Creator Studio

Type one idea → get a scroll-stopping animated app demo or reel in seconds. A B2C studio for new creators — no designer, no editor. Built on Vercel + Amazon DynamoDB.

Comment

3. INSPIRATION

Every new creator and indie founder hits the same wall: to promote an app or idea you need an eye-catching animated demo — for a launch, an app-store preview, a landing page, or a reel. But the only options are hire a motion designer, learn After Effects, or post a flat screenshot. The good option costs money and time most new creators don't have. We wanted a "describe it → get a playable animated demo" button.

4. WHAT IT DOES

Creator Studio turns one sentence into a self-contained, frame-accurate animated phone demo (HTML + CSS + JS) that plays instantly in the browser.

  • The creator types an idea ("a savings-goal ring filling to 100% with confetti"), picks a length, and hits Generate.
  • In ~30 seconds an AI writes the whole scene; it plays in a sandboxed preview.
  • It also shows the storyboard the engine wrote (the phases of the animation).
  • Every creation is saved to the creator's personal library (DynamoDB) and can be replayed or forked from a gallery.

It's a B2C product: a freemium creator tool. Free to try; the paid "Creator" tier is unlimited generations, HD / vertical-reel export, and the private saved library — and that library is already built on DynamoDB.

5. HOW WE BUILT IT

Stack: Next.js 14 (App Router) deployed on Vercel — a static UI plus two serverless functions: POST /api/generate and GET /api/demos. Database is Amazon DynamoDB via AWS SDK v3. Generation uses Google Gemini 2.5 Flash.

Reliable AI code-gen (the key engineering decision). Instead of asking the model for a finished animation (which breaks constantly), the model writes ONLY the creative parts: the HTML scenes, the CSS, and a single deterministic function updateShowcase(frame) plus const TOTAL_FRAMES. Our server then appends a fixed playback engine (a requestAnimationFrame loop + a seek/play/speed protocol). Because the AI never writes timing/loop code, a whole class of "the animation is broken" failures disappears, and the same output also powers a scrubber. Output is delimiter-framed text (===HTML=== … ===JS===), not JSON, so large code blocks can't break a parser.

DynamoDB data model. One table h0-demos, partition key id (String), on-demand billing. Each creation is a single item: { id, prompt, title, storyboard, html, css, js, durationSec, createdAt }. /api/generate writes it with a PutCommand immediately after generation; /api/demos reads recent items for the library. The key-value, single-item access pattern is a deliberate fit for DynamoDB — a creator's library stays O(1) fast whether they have 10 or thousands of demos, and it scales to many creators with zero schema migrations.

Deploy. Vercel via CLI (token-based, non-interactive), with all secrets as encrypted Vercel environment variables; the DynamoDB table is provisioned by a one-shot SDK script.

6. CHALLENGES WE RAN INTO

  • Thinking tokens silently truncated the output. Gemini 2.5 Flash is a "thinking" model; its reasoning tokens count against the output budget. At 8192 tokens the model spent ~5,200 on hidden reasoning and got cut off mid-JS, so the animation wouldn't run. Fix: set thinkingConfig.thinkingBudget = 0 (this is structured code-gen, not a reasoning task) and raise maxOutputTokens — now generations finish cleanly with the full budget going to actual code.
  • Serverless time limits. A full generation takes ~25–35s, so we set the function maxDuration accordingly and disabled thinking to keep it well under the limit.
  • Making generation never "break." Solved with the playback-shim architecture above — the AI can only produce the safe, creative slice.

7. ACCOMPLISHMENTS WE'RE PROUD OF

  • A real, deployed, publicly accessible B2C product on Vercel that generates a polished animated demo from one sentence — end to end, with persistence.
  • A reliability architecture (AI writes scenes only; engine owns the timeline) that makes AI-generated animations dependable instead of hit-or-miss.
  • A clean DynamoDB integration that doubles as the product's paid-tier feature (the creator library), not a bolted-on database.

8. WHAT WE LEARNED

  • With "thinking" models, reasoning tokens can quietly eat your output budget — watch finishReason and thoughtsTokenCount, and disable thinking for deterministic code-gen.
  • Constraining what the model is allowed to write (only updateShowcase(frame) + scenes) is the single biggest lever for reliable generative output.
  • DynamoDB's single-table key-value model maps perfectly to a per-user content library and a serverless deployment.

9. WHAT'S NEXT

Creator Studio is the first module of a broader creator suite we've prototyped: an AI video editor that auto clean-cuts filler and silence, a data-accurate 3D explainer engine, and an autonomous recorder that films real apps for promos. Those need long-running ffmpeg / headless browsers (beyond serverless), so they're the roadmap; the demo/reel generator shipped first because it's serverless-native and instantly useful. Next: vertical 9:16 reel export, brand themes/colors, and team libraries.

Built With

Share this project:

Updates