Best on desktop — open this on a larger screen to download products and use the full Library experience.

Web DesignWhite-Label Readyv1.0.0

Dynamic Pricing Table Engine

Name: Dynamic Pricing Table Engine
Brand: Grid Theory
Availability: InStock

A production-ready TypeScript pricing table engine that transforms static pricing data into interactive, state-driven DOM components with zero dependencies. Built for SaaS companies and e-commerce platforms, this engine handles complex billing calculations entirely on the client side — including flat rates, per-seat pricing, volume tiers, usage-based models, and hybrid configurations — delivering instant UI updates as users interact with sliders and toggles. Unlike typical pricing components that require backend calls for every change, this engine includes a built-in calculation layer for prorating add-ons, applying annual discounts, and computing volume tiers locally, plus a provider-agnostic AI adapter layer that integrates with OpenAI or Anthropic for pricing optimization insights. Ships with a complete white-label theming system via CSS variables, full TypeScript types, and framework-specific integration examples for React, Vue, and vanilla JavaScript.

Built for SaaS companies, e-commerce platforms, and businesses needing dynamic pricing displays with AI-powered optimization

TypeScriptHTMLAI Integration (OpenAI/Anthropic)DOM ManipulationEvent-driven Architecture

See Live Preview Get this template

Interactive Preview

Live frontend preview with mock data, the full product includes the complete source code and backend

Real-time price calculation engine supporting flat, per-seat, tiered, volume, usage-based, and hybrid pricing models

AI-powered pricing optimization via provider-agnostic adapter for OpenAI/Anthropic integration

Zero-dependency TypeScript architecture with requestAnimationFrame batching for instant UI updates

White-label ready with CSS variable injection and complete ThemeConfig customization system

Event-driven state machine controller with automatic proration and discount calculations

Built-in annual discount handling, add-on management, and volume tier calculations

Intl.NumberFormat localization support for multi-currency and multi-locale deployments

Custom event emissions (gt:cta-click) with detailed price breakdown payloads for analytics tracking

Ready to ship?

Get Dynamic Pricing Table Engine — full source code, AI context, commercial license, integration guide.

White-Label Ready

Rebrand completely and deploy under your own name for your clients.

Replace logos, colors & fonts

Use your own domain & branding

Connect your own payment processor & database

Deploy for unlimited clients

BRANDING.md guide included

Full commercial rights

Your brand, your product

Rebrand and resell to unlimited clients — full white-label rights and BRANDING.md guide included.

What's Included

Everything you need to ship, no surprises.

Zero-dependency TypeScript pricing engine source code

Six pricing model implementations (flat, tiered, volume, usage-based)

AI pricing optimization adapter for OpenAI/Anthropic

Interactive preview.html with SaaS, Agency, and API demos

Complete white-label theming system via CSS variables

Framework integration examples for React, Vue, and vanilla JS

AI coding assistant context document (GRID_AI_CONTEXT.md)

Full documentation suite with architecture diagrams

White-label commercial rights

Free with a Grid Theory account

Verify your email, complete your profile, and download Dynamic Pricing Table Engine along with every other product in the catalog.

Already signed in? Open your account →

More from this category

View Details →

White-Label

Web Design

Particle Portrait

Production-ready Canvas 2D particle engine that transforms any image into an interactive, physics-driven particle field with zero dependencies. Unlike typical particle effects that require WebGL or heavy animation libraries, Particle Portrait delivers smooth 60fps performance using pure TypeScript and Canvas 2D, making it perfect for adding engaging visual effects to portfolios, hero sections, or product showcases without the complexity overhead. This high-performance engine samples pixel data from any image element and replaces it with thousands of interactive particles that respond to mouse and touch input with realistic spring physics. Each particle repels from the cursor with configurable force and snaps back to its original position using Hooke's Law calculations, creating an organic, fluid interaction that captivates users. The modular TypeScript architecture includes separate components for image sampling, particle system management, and an embed core that handles initialization and lifecycle. Ship with a single UMD bundle (no build step required), comprehensive configuration options for particle size, gap, repel radius, spring stiffness, and damping, plus ready-to-use integration examples for Webflow, Squarespace, and React/Next.js applications. The package includes a multi-scenario preview demonstrating portrait, product, and logo mark implementations, complete documentation, and an AI context file to accelerate customization.

Interactive hero images for creative agency portfoliosDynamic profile picture effects for social platformsProduct showcase animations for e-commerce sites

View Details →

White-Label

Web Design

Liquid Cursor Trail

Production-ready fluid physics cursor trail engine that creates stunning liquid effects following user interactions on any website. Unlike typical cursor effects that use basic CSS animations, Liquid Cursor Trail implements a real Navier-Stokes inspired velocity field with curl mechanics to create realistic fluid behavior that responds to cursor speed and direction. Built with pure TypeScript and Canvas 2D, this zero-dependency solution delivers WebGL-quality visuals while maintaining 100% cross-browser compatibility. The engine uses a hybrid architecture combining a low-resolution velocity field (48x48 grid) for physics calculations with a high-performance particle pool (800 particles) for visual rendering. This approach provides the visual fidelity of a full fluid solver while maintaining smooth 60fps performance even on low-end devices. Every aspect is configurable through a simple API — from dissipation rates and curl strength to splat radius and color values. Ship with a single script tag and configuration object. The download includes the minified engine, TypeScript definitions, multi-scenario preview demos (Creative Agency, Luxury Brand, Gaming Studio), comprehensive integration guides for popular platforms, and an AI coding assistant context document. Perfect for agencies and developers who need to add that extra layer of polish to high-impact websites without the complexity of WebGL or Three.js.

Interactive landing pages for SaaS products that need memorable first impressionsPortfolio websites for creative professionals showcasing attention to detailCreative agency websites demonstrating technical and design capabilities

View Details →

White-Label

Web Design

Magnetic Text

Production-ready magnetic text animation library that brings interactive typography to life with spring physics — no dependencies, just pure TypeScript performance. Unlike typical text animation libraries that rely on heavy frameworks or CSS-only tricks, Magnetic Text delivers a lightweight physics engine where individual characters, words, or entire text blocks respond to cursor movement with configurable spring dynamics. Built for developers creating memorable web experiences, this library includes TypeScript definitions, touch support, three animation modes (characters/words/blocks), and hardware-accelerated rendering via requestAnimationFrame and translate3d.

Interactive hero sections for SaaS landing pagesEngaging call-to-action buttons that react to hoverPortfolio websites with dynamic typography animations

Disclaimer: This product is provided as-is under the Grid Theory Library Terms. Products are delivered as source code and are intended for use by developers and technical teams. Grid Theory makes no guarantees regarding fitness for a particular purpose, uptime, or compatibility with third-party services. The interactive preview shown on this page uses mock data and may not represent the full functionality of the delivered product. White-label rights, where applicable, permit rebranding and redistribution under the terms of the license agreement, resale of the original source code as a standalone product is prohibited. By downloading, you agree to the Terms of Service and Privacy Policy.