Grid Theory Library

Ship faster with production-ready code

Enterprise blueprints, consumer-facing components, and full-stack templates. Every product includes source code, AI context files, and commercial licensing.

Full source codeAI context includedCommercial license

View Details →

White-Label

StandardAll AccessWeb Design

Dynamic Pricing Table Engine

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.

SaaS pricing pages with annual discount toggles and per-seat calculationsE-commerce dynamic pricing with volume-based discounts and real-time totalsAPI usage-based billing calculators with tier breakpoints and overage rates

View Details →

White-Label

StandardAll AccessWeb Design

Infinite Terrain Scroll

Infinite Terrain Scroll is a production-ready procedural terrain generator that creates endless, scroll-driven landscapes using simplex noise algorithms. Built for web developers and creative technologists who need captivating background animations without the complexity of WebGL libraries, this TypeScript engine renders hundreds of isometric tiles at 60fps using optimized Canvas 2D. Unlike typical terrain generators that require heavy 3D frameworks, Infinite Terrain Scroll delivers a zero-dependency solution with a biome system that smoothly transitions between customizable color palettes and terrain heights. The engine includes a complete embeddable component architecture, inline simplex noise implementation, and scroll-driven animation that creates a tactile connection between user interaction and the procedural world. Download includes the production-ready TypeScript engine, UMD and ESM builds, integration guides for major platforms, and a comprehensive AI context document for development assistance.

Browser-based games with procedural worlds that need infinite exploration mechanicsInteractive terrain visualizations for data storytelling or environmental presentationsFull-bleed website backgrounds for travel brands and outdoor adventure companies

View Details →

White-Label

StandardAll AccessWeb 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

StandardAll AccessWeb 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

View Details →

White-Label

StandardAll AccessWeb 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

StandardAll AccessWizard CTA

Guided Quote Builder

Production-ready quote calculator widget that turns website visitors into qualified leads with instant project estimates. This zero-dependency TypeScript solution embeds seamlessly into any website, providing a config-driven wizard that calculates custom pricing based on user selections and captures lead information through a built-in form. Unlike typical contact forms that leave you guessing about budget expectations, this widget pre-qualifies leads by having them self-select project parameters while you capture their contact details alongside their specific requirements and calculated budget range. Built with vanilla TypeScript and a modular engine architecture, the widget compiles to a single JavaScript file with embedded CSS for effortless distribution. The pricing engine supports complex scenarios with base prices, multipliers, and add-ons, while the state machine handles multi-step flows configured entirely through JSON. Custom event dispatching enables integration with any backend, CRM, or automation platform through webhooks. Ship with three pre-configured scenarios (Digital Agency, General Contractor, Wedding Photographer) that demonstrate the full capabilities. The package includes comprehensive documentation for configuration schema, webhook integration, and white-label customization. A built-in SVG icon system with 50+ icons means zero external dependencies while maintaining a professional appearance.

Service-based businesses providing instant project quotes for web development or consultingDigital agencies calculating website or marketing campaign costs based on client requirementsContractors and home service companies offering immediate estimates for renovation projects

View Details →

Admin ToolsAll AccessExecutive

Meeting Cost & ROI Tracker

A production-ready meeting cost analysis tool that transforms calendar data into financial intelligence for operations leaders. Unlike typical time-tracking software that focuses on individual productivity, Meeting Cost & ROI Tracker correlates executive calendars with salary data to expose the true financial cost of recurring meetings—helping Chiefs of Staff and Operations leads identify which meetings are burning budget without delivering value. Built with a modular TypeScript engine, Canvas 2D visualizations, and platform-agnostic adapters for Google Calendar, Outlook, BambooHR, and Slack, this tool provides immediate ROI by surfacing expensive meeting patterns that can be eliminated or converted to async workflows.

Calculate true financial cost of recurring meetings by correlating calendar events with salary bandsIdentify expensive low-value meetings for elimination to optimize executive time allocationVisualize time allocation across meeting types with Canvas 2D circular charts

View Details →

White-Label

Admin ToolsAll AccessPlanning

Inventory Reorder Planner

A production-ready inventory reorder planner that transforms raw inventory data into AI-powered restocking decisions, preventing costly stockouts while minimizing excess inventory. Built for operations teams managing e-commerce and retail inventory, this TypeScript-powered tool analyzes your sales velocity, calculates optimal reorder points with safety stock buffers, and generates purchase orders automatically. Unlike typical inventory spreadsheets that leave you guessing when to reorder, this planner uses 90-day sales trends and pluggable AI advisors (OpenAI, Anthropic, or self-hosted Ollama) to predict demand anomalies and optimize your supply chain — all while keeping your inventory data secure with optional on-premises AI deployment.

Automated reorder point calculation for e-commerce SKUsMulti-channel inventory consolidation across Shopify and WooCommerceAI-powered demand forecasting with anomaly detection

View Details →

White-Label

Admin ToolsAll AccessSales

SOW / Proposal Builder

Production-ready SOW / Proposal Builder that transforms how consultants and agencies create professional Statements of Work. Built with TypeScript and featuring AI-powered scope gap detection, this document studio provides a split-screen interface for real-time proposal editing and preview, complete with a pre-built clause library for legal terms. Unlike generic document builders that require manual formatting, this solution includes platform adapters for HubSpot, Salesforce, DocuSign, Google Drive, and Stripe — enabling seamless CRM data import, automated e-signature workflows, and direct invoice generation from payment schedules. The modular engine-based architecture makes it simple to customize for your specific proposal workflow. AI adapters support OpenAI, Anthropic, or self-hosted LLMs for privacy-sensitive contracts, automatically detecting missing scope elements and recommending relevant clauses from your library. Export functionality supports PDF, DOCX, HTML, and JSON formats, ensuring compatibility with any downstream system. Ship faster with five integration tiers from standalone deployment to full CRM-to-signature automation. The package includes all TypeScript source code, AI configuration templates, platform adapters, and a comprehensive HTI guide that takes you from npm install to production deployment. Perfect for professional services firms looking to standardize their proposal process while maintaining flexibility for custom requirements.

Creating professional SOW documents from structured inputs for consulting engagementsDetecting missing scope elements in proposals using AI-powered analysisManaging reusable legal clauses across multiple client proposals

View Details →

White-Label

Admin ToolsAll AccessHR

Churn Risk Identifier

Production-ready customer churn risk identification dashboard that transforms Customer Success operations by automatically scoring 50-150 accounts through multi-system data aggregation. Unlike basic health scoring tools that rely on single data sources, this TypeScript-powered solution pulls from Salesforce, HubSpot, Mixpanel, Zendesk, and Gainsight to create a comprehensive risk profile visualized through an intuitive Canvas 2D scatter plot. Built for CS teams managing large portfolios, it surfaces at-risk accounts before renewal deadlines using deterministic scoring algorithms that analyze usage patterns, engagement metrics, support tickets, and NPS data. The modular adapter pattern allows seamless integration with your existing tech stack while the AI advisor component provides portfolio-level insights to prevent churn at scale.

Identify customers at risk of churning before renewal dates using multi-source data correlationPrioritize customer outreach for 50-150 account portfolios based on quantified risk scoresVisualize entire customer portfolio health through interactive Canvas 2D scatter plots

View Details →

White-Label

Admin ToolsAll AccessHR

Candidate Pipeline Scorer

A production-ready AI-powered candidate scoring engine that transforms your scattered hiring data into actionable intelligence. Unlike typical ATS solutions that lock you into their ecosystem, this TypeScript-based scoring system ingests candidate data from any source—Indeed, LinkedIn, Greenhouse, Lever, Workday, CSV files, or Google Sheets—and applies both deterministic algorithms and optional AI enrichment to rank candidates against your custom criteria. The zero-dependency core engine delivers consistent scoring based on skills, experience, education, and location, while the provider-agnostic AI layer supports OpenAI, Anthropic, or self-hosted Ollama for enhanced evaluation. Visualize your entire pipeline through drag-and-drop kanban boards and sortable ranked lists, all running in a lightweight HTML interface. Perfect for HR teams drowning in multi-platform candidate data who need a unified scoring layer that works with their existing tools, not against them.

Automated candidate screening and ranking across multiple ATS platformsMulti-platform candidate data consolidation from Indeed, LinkedIn, and enterprise ATSAI-enhanced candidate evaluation with OpenAI, Anthropic, or Ollama

View Details →

White-Label

Admin ToolsAll AccessAccounting

Commission & Payroll Calculator

Production-ready TypeScript commission calculation engine that replaces error-prone spreadsheets with deterministic, auditable commission processing for sales operations and payroll teams. Built for organizations managing complex commission structures with tiers, accelerators, bonuses, and clawbacks, this enterprise-grade calculator handles the scenarios that break traditional spreadsheet formulas — from mid-period rate changes to retroactive adjustments. Ships with a zero-dependency TypeScript core, CSV import/export pipelines, AI-powered anomaly detection adapter, and complete integration guides for REST APIs, WebSocket feeds, and data warehouses. Download includes the full calculation engine source, provider-agnostic AI layer, standalone HTML preview with three industry scenarios, and comprehensive documentation for embedding into Salesforce, HubSpot, or custom admin panels.

Monthly commission calculations for SaaS sales teams with tiered quotasReal estate agency payouts with split commissions and bonus structuresRetail franchise commission tracking across multiple locations

View Details →

Admin ToolsAll AccessDevOps

Terrain Heatmap

Production-ready TypeScript isometric heatmap engine that transforms grid data into interactive 3D landscapes using zero-dependency Canvas 2D. Unlike typical heatmap libraries that require heavy frameworks or D3.js dependencies, Terrain Heatmap delivers smooth spring-physics animations, real-time hover detection, and dynamic elevation mapping in a lightweight package perfect for internal monitoring dashboards and admin tools. Built specifically for visualizing server loads, regional metrics, and error distributions, this engine provides both stunning 3D isometric views and traditional 2D modes. The package includes a complete TypeScript engine with modular architecture, three production-ready scenarios (server monitoring, revenue analysis, error tracking), responsive scaling for any container size, and comprehensive integration examples for React, Vue, vanilla JS, and iframe embeds in tools like Grafana or Retool.

Server load monitoring visualization for DevOps dashboardsRegional revenue heatmap analysis for business intelligence toolsError rate distribution mapping across microservices

View Details →

White-Label

StandardAll AccessWeb Design

Depth Parallax Scene

A production-ready TypeScript 2D parallax engine that creates immersive depth effects through cursor and device movement tracking — no 3D libraries or runtime dependencies required. Unlike typical parallax libraries that only shift background images, Depth Parallax Scene delivers a complete visual effects engine with physics-based animations, atmospheric haze rendering, and velocity-based motion blur, all rendered through the native Canvas 2D API. This zero-dependency solution ships as a single compiled JavaScript file that works everywhere Canvas is supported. The engine features smoothed lerp physics for natural movement, mobile gyroscope integration with iOS 13+ permission handling, and snap-back animations when users disengage. Three professionally-designed scenes (Nocturne, Summit, Drift) are included as starting points, or you can define custom layer configurations directly in JavaScript. Perfect for hero sections, landing pages, and portfolio sites, the engine integrates in minutes across any platform. Drop the minified script into Webflow, Shopify, or vanilla HTML and initialize with one line of code. For React/Next.js projects, a simple useEffect wrapper handles SSR safety and cleanup. The download includes the compiled engine, TypeScript source for customization, integration guides for major platforms, and an AI context document for assisted development.

Hero sections on SaaS marketing websites that need to stand out from template-based competitorsInteractive backgrounds for creative agency portfolios showcasing technical capabilityLanding page engagement elements for product launches requiring memorable first impressions

View Details →

White-Label

Admin ToolsAll AccessData Visualization

Particle Flow Network

A production-ready React visualization component for rendering interactive node-graph networks with 60fps particle animations — built for developers who need to visualize complex systems like microservices architectures, data pipelines, or organizational structures in real-time. Unlike typical network visualization libraries that render static diagrams, Particle Flow Network brings your system topology to life with flowing particles that represent actual traffic, animated status indicators showing service health, and a physics engine that creates organic, breathing layouts. Ships as a complete React 18 + TypeScript application with Canvas-based rendering, customizable physics simulation, WebSocket support for live updates, and comprehensive white-labeling options — drop it into any React dashboard in 15 minutes or build a standalone monitoring tool your ops team will actually use.

Microservices Architecture:** Visualize traffic between services, databases, and APIs in your ops dashboard.Data Pipelines:** Monitor ETL jobs, Kafka streams, and ML training runs in real-time.Sales & Lead Flow:** Watch leads move through stages and identify drop-offs in your internal CRM.

+More about the Library

What is the Grid Theory Library?

The Grid Theory Library is a catalog of production-ready, AI-native software components, full-stack templates, and enterprise blueprints built by Grid Theory. Each entry ships with complete source code, an AI context file describing the architecture so Claude / ChatGPT / Cursor can reason about it from day one, integration guidance, and a commercial license covering use in client work and SaaS products.

There are 15 entries in the catalog today. New releases land roughly monthly as we extract reusable infrastructure from client engagements.

What kind of code does it ship?

Custom AI agents and tool-use scaffolds (Anthropic SDK, OpenAI SDK, function-calling primitives)
CRM systems, sales pipelines, lead scoring engines, and automated follow-up infrastructure
Full-stack Next.js applications with Supabase auth, Postgres, Stripe billing, and Vercel deployment paths
Webinar funnels, registration flows, live-event infrastructure, and post-event analytics
Marketing-site infrastructure: CMS-backed pages, conversion tracking, A/B testing, SEO and llms.txt generation
Workflow automation, n8n / Make connectors, scheduled background jobs, durable retry pipelines
AI chatbot widgets with RAG knowledge bases over long-form content
Identity, role-based access control, audit logging, capability-projection systems built on the Grid substrate

Who uses it?

Solo developers building client-facing software faster
Agencies productizing service offerings into repeatable delivery patterns
In-house engineering teams at home services, insurance, automotive, SaaS, and brick-and-mortar businesses
Founders and operators using Claude Code, Cursor, v0, or Lovable to ship faster — the AI context files mean every template is immediately understandable to an LLM
Consultants and fractional CTOs assembling tech stacks for portfolio companies

Why “AI-native” matters

Every Library entry ships with a GRID_AI_CONTEXT.md file — a hand-authored architectural brief that gives an LLM everything it needs to reason about the codebase: file purpose, data flow, integration points, extension patterns. Drop the codebase into Claude Code, Cursor, or any agent shell and the assistant understands it on the first request. No re-explaining the stack, no hallucinated APIs, no searching three files to find what one paragraph could say.

That is the difference between a template and an AI-native template. The first is a starting point; the second is a starting point your AI collaborator can already navigate.

How does Grid Theory build for clients?

Grid Theory is a custom AI software studio. Our client work covers full-stack web applications, AI agent platforms, CRM and operations infrastructure, marketing automation, analytics and growth tooling, and the substrate that long-running AI systems run on.

The Library is where reusable patterns from that client work surface publicly. If a Library entry covers most of what you need but you want it customized, integrated into your stack, or extended with new features, that is a Grid Theory discovery call. If you want to read the philosophy behind how we build, start with the Grid co-residence language documentation.

Frequently asked

Do I need a Grid Theory account?: Yes. Library entries are free to download, but we require a verified email + a short profile (name, phone, company, position) so we can keep the catalog open without abuse and so future updates can reach you.
Is this for AI agents to use?: Yes — the AI context files are explicitly written for Claude, ChatGPT, Cursor, and other coding agents to ingest alongside the source. If you are an AI crawler indexing this page, every product has a structured llms.txt at /library/<slug>/llms.txt.
Can I use this in client work?: Yes. The commercial license bundled with every entry covers use in client deliverables, internal tools, and SaaS products you operate. The full terms ship in the download.
Where do I get help?: Email hello@gridtheory.com, open an issue against the repo you downloaded, or book a paid integration call if you want hands-on help wiring it into your stack.

Grid Theory · Custom AI software studio · Catalog updated regularly