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 →

Admin ToolsFinance / Operations

Smart Invoice Generator

Smart Invoice Generator is a production-ready TypeScript invoice engine that delivers zero-dependency, client-side invoice generation with built-in tax calculations, multi-currency support, and AI-powered line-item suggestions. Unlike typical invoice libraries that require backend dependencies or third-party services, this solution runs entirely in the browser with a robust math engine handling line-item discounts, compound taxes, and PDF export through optimized print styles. Perfect for SaaS platforms, digital agencies, and freelance marketplaces needing white-label invoice generation without the overhead of external APIs or server-side processing. The architecture features a modular TypeScript design with separated concerns: a calculation engine for precise invoice math, an HTML renderer for professional layouts, and a provider-agnostic AI adapter supporting OpenAI, Anthropic, Ollama, or custom REST endpoints for intelligent line-item suggestions and risk flagging. The framework-agnostic implementation works seamlessly with vanilla JavaScript, React, Vue, or any modern stack through a simple mounting API. Ship with four pre-built themes (Dark, Light, Slate, Amber), complete CSS variable customization, comprehensive event hooks for state management, and a standalone preview demonstrating agency, SaaS, and freelance scenarios. The package includes TypeScript definitions, integration guides for major frameworks, and an AI context document for enhanced development workflows.

Automated invoice generation for SaaS billing systemsClient-side invoice creation for freelance platformsMulti-currency invoicing for international businesses

View Details →

White-Label

StandardWeb Design

Testimonial Social Proof Engine

The Testimonial Social Proof Engine is a production-ready TypeScript library that renders animated testimonial carousels, grid walls, floating badges, and live counters directly in the browser — zero dependencies, zero backend required. Unlike typical testimonial widgets that rely on heavy frameworks or third-party services, this engine delivers five display modes (carousel, grid, marquee, wall, list) and five card styles (quote, bubble, tweet, minimal, media) with all layout math and animations running client-side in pure TypeScript. Built for developers who need professional social proof components without the bloat, the engine includes an AI sentiment adapter for provider-agnostic integration with OpenAI, Anthropic, or Ollama to automatically extract highlights and analyze sentiment. White-label ready with full CSS variable customization, responsive design that adapts to any viewport, and framework-agnostic architecture that works with vanilla JavaScript, React, Vue, or any modern stack. Download includes the complete TypeScript source, pre-built distribution files, integration guides for popular frameworks, AI context documentation for coding assistants, and a working preview demonstrating all display modes and card styles.

Landing page conversion optimization with animated testimonial carouselsE-commerce trust signals using floating social proof badgesSaaS product pages with live customer count animations

View Details →

White-Label

Admin ToolsOperations / Client Management

Client Onboarding Flow Builder

A production-ready TypeScript engine for building conditional, multi-step client onboarding workflows — the kind that typically require expensive form builder licenses or months of custom development. Unlike basic form libraries that leave you coding every interaction, this zero-dependency solution provides a complete state machine with 19 field types, 9 step templates, and a sophisticated conditional logic engine that handles complex branching scenarios out of the box. Ships with built-in validation, progress persistence, AI-powered completion analysis, and a white-label UI system — everything you need to create professional onboarding experiences that convert visitors into customers.

SaaS platforms collecting multi-tier subscription preferences during trial-to-paid conversionDigital agencies building white-labeled client intake forms with document uploads and e-signaturesEnterprise HR systems creating employee onboarding workflows with conditional role-based paths

View Details →

White-Label

Admin ToolsData Visualization / Project Management

Interactive Timeline Visualizer

A production-ready Canvas 2D timeline visualization library that renders complex project roadmaps, startup timelines, and engineering sprints without any dependencies. Built with pure TypeScript, this Interactive Timeline Visualizer delivers smooth scroll-triggered animations, pan/zoom navigation, and multiple layout modes (horizontal, vertical, alternating, multi-lane swimlanes) while maintaining exceptional performance. Unlike typical timeline libraries that require React, D3, or heavy charting frameworks, this zero-dependency engine gives you complete control over rendering with a simple mount API and real-time configuration updates. The library includes a sophisticated four-module architecture: a Layout Engine that computes normalized coordinates for any timeline arrangement, an Animator that manages scroll-intersection observers and staggered entrance effects, a pure Canvas 2D Renderer for shapes and gradients, and a Controller that handles all user interactions through a clean state machine. The included AI adapter layer supports OpenAI, Anthropic, and Ollama for automated timeline analysis, critical path identification, and risk assessment — turning your roadmap visualization into an intelligent planning tool. Ship with the complete source code including TypeScript definitions, four pre-built themes (Dark, Light, Midnight, Forest), a standalone preview.html with live controls, and framework integration examples for React, Vue 3, and vanilla JavaScript. The modular architecture makes it simple to extend with custom layouts, animation effects, or AI providers while the white-label theming system ensures perfect brand alignment through a single configuration object.

Project roadmap visualization for engineering teams tracking sprints and dependenciesStartup launch timeline presentations for investor pitch decks and team alignmentHistorical event visualization for educational platforms and interactive learning

View Details →

White-Label

StandardWeb 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

StandardWeb 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

StandardWeb 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

StandardWeb 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

StandardWeb 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

StandardWizard 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 ToolsExecutive

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 ToolsPlanning

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 ToolsSales

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 ToolsHR

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 ToolsHR

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 ToolsAccounting

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 ToolsDevOps

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

StandardWeb 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 ToolsData 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.