Kinetic.email

The Problem

Interactive ("kinetic") email — tabs, carousels, surveys, and carts that work inside the inbox — has existed for a decade, but almost nobody ships it:

• It's hard. Interactivity in email relies on CSS :checked hacks and AMP4Email, with a compatibility matrix that varies by client — and zero JavaScript allowed.
• There's no tooling. ESPs don't generate it, templates don't exist for it, and testing it requires sending to a dozen real inboxes.
• Nobody teaches it. The knowledge lives in scattered blog posts and the heads of a few hundred email developers.

Kinetic.email solves all three: an education platform that teaches the techniques, an AI generation engine that writes the code, and a workspace where teams manage brands, campaigns, and real engagement analytics.

Describe an email → get two production builds

The AI Playground takes a plain-English prompt (or a saved brand profile) and generates two parallel builds of the same email: Kinetic HTML — CSS :checked interactivity for Apple Mail and iOS Mail, with Yahoo/AOL hacks, MSO conditionals, and graceful static fallback for everything else — and AMP4Email, using amp-carousel, amp-form, and amp-bind for dynamic content in Gmail and Yahoo. Both builds share a single design blueprint (palette, typography, spacing, button styles), so the visual experience is identical no matter which client opens it. They ship together as a tri-part MIME bundle — one send, and every inbox gets the best experience it supports. Kinetic.email is an approved AMP sender for Gmail and Yahoo Mail, so the AMP version renders live in their inboxes with no setup for the recipient.

Kineticize: make existing emails interactive

Most teams already have years of emails. Paste one in — a newsletter, a promo, a receipt — and Kineticize rebuilds it as an interactive kinetic + AMP pair while keeping what makes it yours. The design is read from the source itself, by role (its hero, buttons, body and footer), instead of being swapped for a generic template. In evals on ten real production emails, the copy came through 96–100% intact, with every link and image preserved.

Campaign Companion

A campaign strategist built into the workspace. Tell it what you're launching and it plans the campaign from the brand's industry, audience and sending platform, writing in the voice of the email you've starred as your best. It ends with ready-to-generate prompts, so a plan becomes built emails without rewriting a brief. Part of Premium and Enterprise.

Learn the craft

Six developer modules (the checkbox hack, kinetic lightswitch, tabbed elements, tracking, and more) plus marketing and coding curricula — with in-browser code editors, progress tracking, and badges. The education layer isn't a side feature: it feeds the token economy, and educated users become the platform's advocates.

Manage brands and campaigns

Multi-tenant workspaces built for teams:

• Brand Builder — colors, fonts, tone, logo, product catalog (manual + CSV/Shopify import), CAN-SPAM details, and one of eight "style theories" (editorial-minimal, bold-brutalist, luxe-premium…) that steer how the AI constructs the email, not just what colors it uses
• Projects & Emails — versioned email management with test sends via Mailgun
• Arc — a visual campaign canvas (React Flow) for composing email journeys, shareable with clients via tokenized links
• Enterprise workspaces — a shared workspace for a team or agency: owner, admin and member roles, email invites, and one shared credit pool, with nothing leaking between workspaces (enforced at the database level)
• Plans — Premium adds the Campaign Companion and higher limits (10,000 emails, 500 projects, 10 tracking databases); Enterprise brings all of it to every member of a team workspace

Track engagement inside the email

Kinetic emails report interaction without JavaScript: when a :checked selector fires, a CSS background-image tracking pixel loads. AMP versions submit real forms. Both stream into a real-time Convex database — see which tab a subscriber opened, which carousel slide they stopped on, which survey answer they picked, all without a single click-through.

The generation pipeline

Email generation is a staged, multi-model pipeline — not a single prompt:

• Brief builder (Claude Haiku) turns the user prompt + brand config into a structured brief: audience, copy, component pairings, palette
• Design blueprint (Haiku) emits binding design tokens both builds must obey
• RAG retrieval runs hybrid search over a Pinecone dual-index (1,536- and 3,072-dimension OpenAI embeddings) of proven kinetic/AMP examples and technique write-ups, with technique detection, metadata filtering, and Claude re-ranking to pick the top 7 references
• Parallel generators (Claude Sonnet) produce kinetic HTML and AMP4Email concurrently from the same brief
• Dual QA validators (Haiku) — a 30-check validator for kinetic, 24-check for AMP plus the official amphtml-validator; both must pass
• Curator (Haiku) scores the pair on design, content, interactivity, and uniqueness before approval

The model split is deliberate: Sonnet where code quality matters, Haiku everywhere speed and cost matter. Cheap models validate the expensive model's work.

Waiting is a feature

Generation takes a minute-plus, so instead of a spinner, the UI speed-reads the email's copy blueprint back to the user with a Spritz-style RSVP reader (~450 words per minute) while the code generates. Users review the copy in the time it takes Claude to write the code.

Engineering details

• Multi-tenancy at the database layer: every Supabase table runs Row-Level Security — permissions are Postgres policies, not application code — with SECURITY DEFINER helpers to safely cross tenant boundaries and 150+ numbered SQL migrations tracking the schema's evolution
• Analytics rebuilt from primitives: email clients strip all scripts, so CSS state changes load tracking pixels for kinetic and hidden form fields carry AMP events; everything validates sendId/userId pairs server-side and flags mismatches as suspicious
• Growth loop: a token economy gates AI generation — users earn tokens by signing up, completing courses, and referring friends, so every earn action either educates a user or acquires one; all rewards and costs are tunable live from an admin panel without deploys