DEV Community: yunbiao

Half of stack migrations are now written by AI agents. Here's where they're moving apps.

yunbiao — Fri, 23 Oct 2026 04:00:43 +0000

Two years ago, half of the products I track sent their emails through SendGrid. But for the ones that launched this year, it droped to 1/8. Resend went the other way, from 41% to 82%.

It doesn't surprise me, though. What surprises me the most is: when I sampled recent GitHub pull requests titled "Firebase to Supabase", "Vercel to Cloudflare" and so on, half of them were opened by a coding agent. A year and a half ago it was almost zero.

Some context first. For a while now I've been cataloguing what shipped products actually run on. It's at 7,302 products, and every "uses X" links to where it was found: a script on the live site, a DNS record, a dependency in a public repo, or the maker saying it themselves. It's all on howmakersbuild.com if you want to check my work. Most of this post comes out of that data, plus a GitHub crawl.

What new products pick

The trap with "most popular tool" lists is that old tools win by default. They've had more years to collect users. So I split products by when they launched (on Product Hunt) and compared the share of each tool among products launched in 2026 with the share among products launched in 2024 or earlier.

Decision	Launched ≤2024	Launched 2026
Transactional email	SendGrid 51%, Resend 41%	SendGrid 13%, Resend 82%
Database	Supabase 33%, Firebase 19%, MongoDB 17%	Supabase 64%, Firebase 9%, MongoDB 5%
Product analytics	PostHog 52%, Mixpanel 30%	PostHog 88%, Mixpanel 9%
Web analytics	Plausible 42%, Umami 6%	Plausible 22%, Umami 25%
Hosting	Cloudflare 8%, Railway 2%	Cloudflare 21%, Railway 8%
Payments	Stripe 74%, Polar 2%	Stripe 65%, Polar 11%

Note: Shares add up to more than 100% in places because plenty of products use two of something.

A few notes, since half of these are search terms people actually type:

SendGrid alternatives. If you're looking, the new-product crowd has already voted. 82% of 2026 launches that send email use Resend. Postmark dropped from 25% to 10%, which I didn't expect. (email API breakdown)
Supabase vs Firebase. Not close anymore for new projects. Firebase halved, MongoDB lost nearly three quarters of its share. (database decision)
PostHog vs Mixpanel. PostHog is now the default in 9 of 10 new products that track product analytics. (product analytics)
Stripe is still the default for payments, but merchant-of-record services (Polar, Dodo) are eating the edges. Solo makers apparently don't want to deal with sales tax in every country they sell to. Fair.

I left out mobile on purpose. React Native "drops to 0%", but that's because apps built with Expo get counted as Expo, and Expo is React Native. Data is fun like that.

I expected AI to pick differently. Mostly they don't.

About 1,460 products in the dataset were built with an AI coding tool or app builder (Claude Code, Cursor, Codex, Lovable, Bolt and friends), either because the maker said so or because the repo has the tool's config in it.

Compare them with everyone else and the gap looks huge: Resend 69% vs 40%, Supabase 66% vs 39%, PostHog 82% vs 60%.

Then I remembered that 850 of those AI-built products launched this year. Of course they look like 2026 products. So I compared only products launched in 2026, AI-built vs not:

2026 launches	Built with AI tools	Others
Resend	86%	79%
Supabase	71%	59%
PostHog	92%	86%
Polar	12%	11%
Stripe	68%	64%

Most of the gap disappears. Supabase keeps a 12 point lead (78% among apps built with Lovable, Bolt and the like, which makes sense, since some of those builders wire Supabase in for you). Everything else is within a few points.

So "AI is picking your stack" is only half true. Everyone launching in 2026 picks roughly the same stack, whether or not an agent wrote the code. My guess is the same tutorials, the same templates, and the same AI answers feed both groups. Nobody gets their defaults from nowhere. Ryan Carniato wrote a good piece about this a couple of months ago, Nobody Argued For Your Stack, on how conclusions now spread without the arguments behind them. I mostly agree with him. This is the data side of it.

Where AI clearly changes things: leaving

Picking a stack was never the hard part. Getting off one was. That's where agents show up.

I counted GitHub pull requests titled " to " over the last two years. A few of the biggest flows:

Migration	PRs	The other way
Firebase → Supabase	297	113
Vercel → Cloudflare	242	83
Next.js → Astro	178	48
Prisma → Drizzle	140	27
Next.js → TanStack Start	92	9

Across all the flows I track, there were 253 of these PRs in the first half of 2025 and 2,838 in the first half of 2026. That's 11x in a year. GitHub got bigger in that time, but not 11x bigger.

Then I pulled the newest PRs for each flow (1,628 of them, leaving out migrations between AI tools and model APIs, since those are a different story) and checked who opened them. I counted a PR as agent-made if it came from an agent's branch (claude/…, codex/…, cursor/…), an agent's bot account, or had a "Generated with" or "Co-Authored-By" line naming one.

First half of 2025: 11%
Second half of 2025: 41%
First half of 2026: 48%
Since July: 44%

That's a floor, not an estimate. Anyone who squashes commits or renames the branch is invisible to me. About 7 in 10 of the agent PRs were Claude, then Copilot, Cursor, Codex, Devin and Jules.

Some flows are almost entirely agent work now. In this year's sample: Express → Fastify 14 of 20, Netlify → Cloudflare 13 of 20, React → Astro 11 of 20.

What I think happens next

These are guesses, labelled as guesses.

Defaults get even stickier for new projects. When a template or an agent reaches for Supabase, Resend and PostHog, most people won't argue. Expect the 2027 numbers for the top pick in each category to be higher, not lower.
Lock-in stops being a moat. If moving costs an afternoon, "it's a pain to migrate" stops protecting anyone. Tools will have to keep you on price and reliability. The question shifts from "how fast can I set this up" to "what does this cost me at 10k users".
Being readable by agents becomes distribution. 51% of the active product repos I track already have an AGENTS.md or CLAUDE.md. For repos created this year it's 72%. A tool whose docs an agent can follow without guessing will get picked, and migrated to, more often.
Model APIs stay the least settled layer. Claude → Gemini: 108 PRs. Gemini → Claude: 104. People switch models like they switch tabs.

Caveats

Shares are of products I can see evidence for, not market share. Hosted services show up on websites; backend libraries mostly in code. How the evidence is collected.
The "≤2024" group is mostly 2024 launches (1,313 of 1,824).
Migration counts are PR titles across all of GitHub, not just these 7,302 products, and only PRs titled that way round.
The agent sample leans recent (newest 20 per flow), and early 2025 is thin: 37 PRs.
About 450 PRs failed to fetch, mostly rate limits.

All of this is browsable: every decision, every migration flow, and what agent instruction files look like in practice.

Did an agent pick your stack, or did you? And if you've moved off something this year, did you write the migration yourself?

Skip Remotion Setup: Generate Videos in Browser with Just a Prompt

yunbiao — Fri, 30 Jan 2026 04:36:22 +0000

The Remotion Skills Hype

If you've been on X lately, you've probably seen the explosion around Remotion Agent Skills. Remotion has integrated with Claude Code to let you generate videos programmatically using AI prompts. It's genuinely impressive, you can create motion graphics, animations, and professional videos just by describing what you want.

But here's the thing: even with AI assistance, Remotion still requires:

Installing Node.js and setting up a local development environment
Managing a project structure
Installing the Remotion agent skills extension
Need a CLI or IDE (Claude Code, Cursor, etc.)
Understanding React components and Remotion's API

For someone who just wants to quickly generate a promo video for their SaaS product, this felt like overkill. I wanted something instant, browser-based, and zero-setup.

What I Built Instead

I created a single-prompt that generates complete, production-ready promo animations with video recording capability and no installation required.

Here's the entire workflow:

Open ChatGPT (or Claude with Canvas enabled)
Paste my prompt template
Add your product description at the end
Generate and preview
Click "Record Video" in the generated page
Download your .webm file

That's it. No IDE. No CLI. No local setup. Just a browser.

See It In Action

Here's a promo video I generated for a fictional product called "ChartGen AI" (a data analytics tool):

// Detect dark theme var iframe = document.getElementById('tweet-2017093879766667456-108'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=2017093879766667456&theme=dark" }

The entire animation features:

✨ Kinetic typography with GSAP animations
🎬 7 professionally sequenced scenes
📊 Animated UI mockups with realistic details
🎨 Smooth transitions and effects
📹 One-click video recording at 24/30/60 FPS

Total time from prompt to video: ~2 minutes

How It Works Technically

The generated code uses a proven tech stack:

GSAP 3.12.2: Powers all kinetic typography and scene transitions
SnapDOM: Captures DOM elements frame-by-frame for video recording
Tailwind CSS: Utility-first styling for rapid UI development
MediaRecorder API: Encodes canvas stream to WebM format

The system includes four key manager classes:

ResourcePreloader: Ensures fonts load before recording
RenderSyncManager: Synchronizes DOM rendering with frame capture
SnapDOMCaptureOptimizer: Throttles captures to match FPS
StateResetManager: Resets all animations between plays

All the technical implementation details are included in the prompt template below, so the LLM can generate production-ready code every time.

The Prompt Template

Copy this entire prompt and paste it into ChatGPT Canvas or Claude Artifacts. Just fill in your product details at the end:

# SaaS Product Promo Animation Generator

Generate a professional kinetic typography promo animation with video recording capability using GSAP, SnapDOM, and Tailwind CSS.

## ⚠️ Critical Layout Constraints

**Video container dimensions: 854px × 480px**

You MUST ensure all content fits within these bounds:

### Text Content Rules
- ❌ **NEVER** use text that's too long for one line
- ✅ Break long text into multiple lines with \`<br>\` tags
- ✅ Use shorter, punchier phrases (3-5 words per line max)
- ✅ For longer content, use typewriter effects or staggered reveals
- ✅ Consider viewport zoom for detailed sections (see Demo Scene example)

### UI Mockup Rules
- Maximum width: **700px** (leaves margins)
- Maximum height: **400px** for main content area
- Use **compact** layouts with proper spacing
- Test that all elements are visible without scrolling

### Font Size Guidelines
- Large text: **50-100px** (use sparingly, only for 1-2 word statements)
- Medium text: **35-65px** (for 3-5 word phrases)
- Normal text: **40-80px** (for single words)
- UI text: **11-14px** (for mockup interfaces)

### Overflow Prevention
\`\`\`javascript
// Example: Long text with line breaks
<div class="kinetic-text medium">
  Spending too much<br>
  on <span class="highlight-red">BAD ADS?</span>
</div>

// Example: Viewport zoom for detailed UI
.call(() => {
  const { scale, tx, ty } = calculatePrecisionZoom(
    videoContainer, 
    sceneContainer, 
    document.getElementById('detailedSection'), 
    { desiredScale: 2.0, alignY: 'center' }
  );
  gsap.to(sceneContainer, { x: tx, y: ty, scale: scale, duration: 1.2 });
}, null, "+=0.2")
\`\`\`

## Technical Stack

- **GSAP 3.12.2**: Animation engine for kinetic typography and transitions
- **SnapDOM**: DOM capture for video recording
- **Tailwind CSS**: Utility-first styling
- **MediaRecorder API**: Video encoding and export

## Core Architecture

### 1. Resource Management System

\`\`\`javascript
class ResourcePreloader {
  constructor() {
    this.fontsReady = false;
  }
  async preloadFonts() {
    await document.fonts.ready;
    const fontVariants = ['400 12px Inter', '600 14px Inter', '700 14px Inter', '900 80px Inter'];
    await Promise.all(fontVariants.map(font => document.fonts.load(font)));
    this.fontsReady = true;
  }
  async preloadAll() {
    await this.preloadFonts();
  }
  isReady() {
    return this.fontsReady;
  }
}
\`\`\`

### 2. Render Synchronization

\`\`\`javascript
class RenderSyncManager {
  static forceLayout(element) {
    void element.offsetHeight;
    void element.offsetWidth;
  }
  static async waitForFrame() {
    return new Promise(resolve => requestAnimationFrame(resolve));
  }
  static async syncBeforeCapture(element) {
    this.forceLayout(element);
    await this.waitForFrame();
  }
}
\`\`\`

### 3. SnapDOM Capture System

\`\`\`javascript
class SnapDOMCaptureOptimizer {
  constructor(targetElement, canvas) {
    this.targetElement = targetElement;
    this.canvas = canvas;
    this.ctx = canvas.getContext('2d', { alpha: false });
    this.lastCaptureTime = 0;
    this.capturePromise = Promise.resolve();
  }

  async capture() {
    await RenderSyncManager.syncBeforeCapture(this.targetElement);
    const capturedCanvas = await snapdom.toCanvas(this.targetElement, {
      width: 854,
      height: 480,
      scale: 1,
      embedFonts: true,
      cacheBust: false,
    });
    this.ctx.clearRect(0, 0, 854, 480);
    this.ctx.drawImage(capturedCanvas, 0, 0, 854, 480);
  }

  async captureWithThrottle(fps) {
    const frameInterval = 1000 / fps;
    const currentTime = performance.now();
    if (currentTime - this.lastCaptureTime >= frameInterval) {
      this.capturePromise = this.capturePromise.then(() => this.capture());
      this.lastCaptureTime = currentTime;
    }
  }
}
\`\`\`

### 4. State Reset Manager

\`\`\`javascript
class StateResetManager {
  static resetAllStates() {
    gsap.killTweensOf('*');
    gsap.set('.scene', {
      opacity: 0, x: 0, y: 0, scale: 1, rotation: 0, rotationX: 0,
      filter: 'none', skewX: 0, clearProps: 'all'
    });
    gsap.set(sceneContainer, { scale: 1, x: 0, y: 0, clearProps: 'all' });
    gsap.set(videoContainer, { backgroundColor: '#000', clearProps: 'backgroundColor' });
    // Reset all animated elements
  }
}
\`\`\`

### 5. Recording System

\`\`\`javascript
async function startRecording() {
  if (!preloader.isReady()) {
    await preloader.preloadAll();
  }

  const stream = recordCanvas.captureStream(selectedFPS);
  const mimeType = MediaRecorder.isTypeSupported('video/webm;codecs=vp9')
    ? 'video/webm;codecs=vp9'
    : 'video/webm';
  const bitrate = Math.min(selectedFPS * 100000, 10000000);

  mediaRecorder = new MediaRecorder(stream, {
    mimeType: mimeType,
    videoBitsPerSecond: bitrate
  });

  mediaRecorder.ondataavailable = (e) => {
    if (e.data.size > 0) recordedChunks.push(e.data);
  };

  mediaRecorder.onstop = () => {
    const videoBlob = new Blob(recordedChunks, { type: 'video/webm' });
    // Auto download
    const url = URL.createObjectURL(videoBlob);
    const a = document.createElement('a');
    a.href = url;
    a.download = \`promo-${selectedFPS}fps-${Date.now()}.webm\`;
    a.click();
    URL.revokeObjectURL(url);
  };

  mediaRecorder.start(100);
  startSyncCapture();
  playAnimation(true);
}
\`\`\`

## Animation Structure

### Scene Flow Pattern

1. **Hook Scene**: Grab attention with pain point (2-3 seconds)
2. **Problem Scene**: Amplify the problem (2 seconds)
3. **Pain Scene**: Emotional impact with flash effect (2 seconds)
4. **Solution Scene**: Introduce your product (2 seconds)
5. **Feature Scene**: Show key features/benefits (3 seconds)
6. **Demo Scene**: Product UI mockup with animations (5 seconds)
7. **CTA Scene**: Call-to-action with branding (2 seconds)

### GSAP Timeline Structure

\`\`\`javascript
masterTimeline = gsap.timeline({
  onUpdate: function() {
    if (isRecording) {
      progressFill.style.width = (this.progress() * 100) + '%';
    }
  },
  onComplete: () => {
    if (isRecording) {
      captureOptimizer.capturePromise.then(() => {
        setTimeout(stopRecording, 500);
      });
    }
  }
});

// Scene transitions
masterTimeline
  .to("#scene1", { opacity: 1, duration: 0.05 })
  .from("#scene1 .text", { scale: 0.5, y: 80, filter: "blur(15px)", duration: 0.35, ease: "back.out(1.7)" })
  .to("#scene1", { scale: 1.1, duration: 1.0 })
  .to("#scene1", { x: -800, skewX: 15, filter: "blur(20px)", opacity: 0, duration: 0.35, ease: "power2.in" });
\`\`\`

## 🎨 UI Mockup Requirements

### Make It Look REAL

Your UI mockups should look like **actual, production-ready SaaS products**, not wireframes:

#### ✅ DO Include:
- **Realistic data**: Real numbers, percentages, chart values (not "Lorem ipsum")
- **Proper navigation**: Sidebar with icons, top bar with user avatar/settings
- **Visual hierarchy**: Headers, subheaders, labels, descriptions
- **Interactive elements**: Buttons, dropdowns, tabs, toggles (styled properly)
- **Data visualizations**: Charts, graphs, progress bars with actual values
- **Status indicators**: Success/warning/error states, badges, notifications
- **Micro-interactions**: Hover states, active states (use GSAP to animate)
- **Spacing & padding**: Professional whitespace, not cramped
- **Color coding**: Use semantic colors (green for success, red for alerts, etc.)
- **Icons**: Use emojis or Unicode symbols (📊 📈 ⚙️ 🔔 👤)

#### ❌ DON'T:
- Use placeholder text like "Lorem ipsum" or "Sample data"
- Create empty boxes with just borders
- Use generic "Button 1", "Button 2" labels
- Make it look like a wireframe or sketch
- Forget shadows, gradients, and depth

#### Example: Dashboard Mockup
\`\`\`html
<!-- BAD: Looks fake -->
<div class="box">
  <div>Title</div>
  <div>Content here</div>
</div>

<!-- GOOD: Looks real -->
<div class="bg-slate-800/50 p-4 rounded-lg border border-slate-700 shadow-lg">
  <div class="flex items-center justify-between mb-3">
    <div class="flex items-center gap-2">
      <span class="text-lg">📊</span>
      <h3 class="text-white font-semibold text-sm">Revenue Analytics</h3>
    </div>
    <span class="px-2 py-1 bg-green-500/20 text-green-400 text-xs rounded-full">+12.5%</span>
  </div>
  <div class="text-white text-3xl font-bold mb-1">$47,582</div>
  <div class="text-slate-400 text-xs">vs. $42,340 last month</div>
  <div class="mt-3 h-16 flex items-end gap-1">
    <!-- Animated bar chart -->
    <div class="flex-1 bg-purple-500/30 rounded-t" style="height: 45%"></div>
    <div class="flex-1 bg-purple-500/40 rounded-t" style="height: 70%"></div>
    <div class="flex-1 bg-purple-500/50 rounded-t" style="height: 55%"></div>
    <div class="flex-1 bg-purple-500/60 rounded-t" style="height: 85%"></div>
  </div>
</div>
\`\`\`

### UI Animation Ideas
- **Counter animations**: Numbers counting up from 0
- **Chart bars**: Growing from bottom to top with stagger
- **Progress rings**: Circular progress with SVG animation
- **List items**: Staggered fade-in from left
- **Cards**: Scale up with bounce effect
- **Notifications**: Slide in from top-right
- **Tabs**: Smooth underline transition

## HTML Template Structure

\`\`\`html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>[Product Name] - Promo Animation</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
  <script src="https://cdn.tailwindcss.com"></script>
  <script src="https://unpkg.com/@zumer/snapdom/dist/snapdom.js"></script>

  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link rel="preload" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700;900&display=swap" as="style">
  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700;900&display=swap" rel="stylesheet">

  <style>
    /* Base styles */
    * { box-sizing: border-box; }
    body { 
      margin: 0; padding: 0; background: #0a0a0f; 
      font-family: 'Inter', sans-serif; 
      display: flex; justify-content: center; align-items: center; 
      min-height: 100vh; flex-direction: column; gap: 20px;
    }

    .video-container {
      position: relative; width: 854px; height: 480px;
      background: #000; border-radius: 12px; overflow: hidden;
      box-shadow: 0 0 60px rgba(59, 130, 246, 0.15);
      transform: translateZ(0); will-change: transform;
    }

    .scene-container {
      position: absolute; inset: 0; transform-origin: 0 0;
    }

    .scene {
      position: absolute; inset: 0;
      display: flex; justify-content: center; align-items: center;
      flex-direction: column; opacity: 0; pointer-events: none;
    }

    .kinetic-text {
      font-size: clamp(40px, 10vw, 80px); font-weight: 900;
      text-transform: uppercase; line-height: 1.1;
      text-align: center; color: #fff; white-space: nowrap;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      text-rendering: optimizeLegibility;
    }

    .kinetic-text.large { font-size: clamp(50px, 12vw, 100px); }
    .kinetic-text.medium { font-size: clamp(35px, 8vw, 65px); }

    /* Color highlights - customize per brand */
    .highlight-red { color: #ef4444; }
    .highlight-blue { color: #3b82f6; }
    .highlight-purple { color: #a855f7; }
    .highlight-green { color: #10b981; }

    /* Control panel styles */
    .control-panel {
      background: rgba(30, 30, 36, 0.95);
      border: 1px solid rgba(139, 92, 246, 0.3);
      border-radius: 12px; padding: 20px; width: 854px;
      box-shadow: 0 10px 40px rgba(0,0,0,0.5);
    }

    /* Hidden canvas for recording */
    #recordCanvas {
      position: fixed; top: -9999px; left: -9999px;
    }
  </style>
</head>
<body>
  <!-- Control Panel -->
  <div class="control-panel">
    <div class="flex items-center justify-between">
      <div class="flex items-center gap-4">
        <button id="btnRecord" class="control-btn btn-record">
          <span>🎥</span><span>Record Video</span>
        </button>
        <button id="btnPlay" class="control-btn btn-play">
          <span>▶️</span><span>Play Animation</span>
        </button>
      </div>
      <div class="flex items-center gap-3">
        <div class="library-badge">
          <span>⚡</span><span>SnapDOM</span>
        </div>
        <div id="statusIndicator" class="status-indicator status-idle">
          <div class="recording-dot"></div><span>Ready</span>
        </div>
      </div>
    </div>

    <div class="fps-selector">
      <span class="fps-label">Frame Rate:</span>
      <div class="fps-option" data-fps="24">24 FPS</div>
      <div class="fps-option" data-fps="30">30 FPS</div>
      <div class="fps-option active" data-fps="60">60 FPS</div>
    </div>

    <div class="progress-bar" id="progressBar" style="display: none;">
      <div class="progress-fill" id="progressFill"></div>
    </div>
  </div>

  <!-- Animation Container -->
  <div class="video-container" id="videoContainer">
    <div class="bg-grid"></div>
    <div class="scene-container" id="sceneContainer">

      <!-- Scene 1: Hook -->
      <div class="scene" id="scene1">
        <div class="kinetic-text medium">
          [Hook Text]<br><span class="highlight-red">[Pain Point]</span>
        </div>
      </div>

      <!-- Scene 2: Problem -->
      <div class="scene" id="scene2">
        <div class="kinetic-text large">
          [Problem] <span class="highlight-red">[Emphasis]</span>
        </div>
      </div>

      <!-- Scene 3: Pain -->
      <div class="scene" id="scene3">
        <div class="kinetic-text">
          [Action] <span class="highlight-red">[Negative]</span>
        </div>
      </div>

      <!-- Scene 4: Solution -->
      <div class="scene" id="scene4">
        <div class="kinetic-text medium">
          [Action]<br><span class="highlight-purple">[Solution]</span>
        </div>
      </div>

      <!-- Scene 5: Features -->
      <div class="scene" id="scene5">
        <!-- Feature visualization with icons/animations -->
      </div>

      <!-- Scene 6: Demo (REALISTIC UI mockup) -->
      <div class="scene" id="scene6">
        <!-- Production-quality SaaS interface mockup -->
        <!-- Include: navigation, data, charts, buttons, etc. -->
      </div>

      <!-- Scene 7: CTA -->
      <div class="scene" id="scene7">
        <div class="flex flex-col items-center gap-6">
          <div class="cta-logo w-24 h-24 bg-gradient-to-br from-purple-600 to-blue-600 rounded-2xl flex items-center justify-center shadow-lg">
            <span class="text-5xl">[Icon]</span>
          </div>
          <div class="text-center">
            <h1 class="cta-title text-5xl font-black text-white mb-2 tracking-tight">[Product Name]</h1>
            <p class="cta-subtitle text-slate-400 text-xl">[Tagline]</p>
          </div>
          <div class="bg-gradient-to-r from-purple-600 to-blue-600 text-white px-8 py-3 rounded-full font-bold text-lg hover:scale-105 transition-transform cursor-pointer" style="white-space: nowrap;">
            [CTA Button Text]
          </div>
        </div>
      </div>

    </div>
  </div>

  <!-- Hidden Canvas -->
  <canvas id="recordCanvas" width="854" height="480"></canvas>

  <script>
    // Include all manager classes and animation logic here
    // (ResourcePreloader, RenderSyncManager, SnapDOMCaptureOptimizer, StateResetManager)

    // Configuration
    const ANIMATION_CONFIG = {
      product: { name: "[Product Name]", url: "[Product URL]" },
      timing: { fast: 0.35, hold: 1.0, flashDelay: 0.5, totalDuration: 20 },
      colors: { primary: "#8b5cf6", danger: "#ef4444", success: "#10b981", bg: "#0a0a0f" }
    };

    // Animation timeline construction
    function playAnimation(autoRecord = false) {
      // Build GSAP timeline with all scenes
    }

    // Recording functions
    async function startRecording() { /* ... */ }
    function stopRecording() { /* ... */ }

    // Event listeners
    btnRecord.addEventListener('click', startRecording);
    btnPlay.addEventListener('click', () => playAnimation(false));

    // Initialization
    resetScene();
    window.addEventListener('load', async () => {
      await preloader.preloadAll();
    });
  </script>
</body>
</html>
\`\`\`

## Design Guidelines

### Typography Hierarchy
- **Large**: 50-100px - Single impactful words only
- **Medium**: 35-65px - Short phrases (3-5 words)
- **Normal**: 40-80px - 1-2 words

### Animation Timing
- **Fast**: 0.35s - Quick transitions
- **Hold**: 1.0s - Display duration
- **Flash**: 0.5s - Impact moments

### Color Palette
- **Primary**: Brand color (e.g., #8b5cf6 purple)
- **Danger**: Red (#ef4444) for pain points
- **Success**: Green (#10b981) for positive outcomes
- **Accent**: Blue (#3b82f6) for highlights

### Scene Transitions
1. **Slide + Skew**: Dynamic exit
2. **Scale + Blur**: Dramatic entrance
3. **Rotation**: Playful transitions
4. **Flash**: Emotional impact

## Key Features to Implement

1. ✅ **Auto-download** after recording completes
2. ✅ **FPS selection** (24/30/60)
3. ✅ **Progress indicator** during recording
4. ✅ **Font preloading** for consistent rendering
5. ✅ **State reset** between plays
6. ✅ **Keyboard shortcut** (Space to play)
7. ✅ **Responsive status** indicators

## Requirements

- Video dimensions: **854x480** (480p)
- Font: **Inter** (Google Fonts)
- Total duration: **~20 seconds**
- Export format: **WebM (VP9 codec)**
- Frame rates: **24/30/60 FPS**

## Instructions

Based on the product description below, generate a complete HTML file following this architecture. Create 5-7 scenes that tell a compelling story:

1. **Hook**: Grab attention with a relatable pain point (keep text SHORT)
2. **Problem**: Amplify the problem (1-2 words + emphasis)
3. **Pain**: Create emotional impact (use line breaks for longer text)
4. **Solution**: Introduce the product (punchy tagline)
5. **Features**: Show 1-2 key features with icons/visuals
6. **Demo**: REALISTIC product mockup with rich UI details
7. **CTA**: Strong call-to-action with branding

Customize:
- Scene text content (keep concise!)
- Color scheme (match brand)
- Animations (keep kinetic typography style)
- Demo mockup (make it look production-ready!)
- Icons/emojis (brand-appropriate)

**Remember**: All content MUST fit within 854×480px. Test text length and use line breaks liberally!

---

## Product Description

[YOUR PRODUCT DESCRIPTION GOES HERE]

Try It Yourself

Copy the entire prompt above
Open ChatGPT (GPT-4 with Canvas) or Claude (with Artifacts enabled)
Paste the prompt
Fill in your product details at the bottom
Wait ~30 seconds for generation
Click "Record Video"
Download your promo!

What's Next?

I'm planning to add:

🎵 Background music integration
🎙️ AI voiceover support
📱 Vertical video format (9:16 for social media)
🎨 More animation presets
🌐 Multi-language support

If you try this out, I'd love to see what you create! Drop a link in the comments.

Found this useful? Share this post with a founder friend who needs a quick promo video for their next launch.

Course: Design Your Startup Landing Page in 1 Week

yunbiao — Sun, 07 Dec 2025 13:35:30 +0000

I built this course for solopreneurs, indie makers, and startup founders who need to launch a clean, high-converting landing page fast — without wasting hours hunting for the right tutorials.

👉 Course link: https://www.disclass.com/courses/adc4c4dc710340c4/outline

🎯 Who This Course Is For

Indie makers & solo builders who want to ship quickly without hiring a designer.
Startup founders validating an idea and needing a clear, conversion-ready landing page.
Developers who can build anything but want help with copywriting, structure, and modern landing page patterns.
Creators launching products (courses, tools, newsletters) who need polished messaging.

💡 Why This Course Helps

This course curates the best YouTube lessons into a simple, actionable workflow:

Understand what makes a landing page convert
Write clear, compelling headlines & body copy
Wireframe with confidence (Figma/Penpot)
Build quickly in Webflow or Framer
Test & optimize your page using A/B testing and analytics

No fluff. No 4-hour rabbit holes.
Just the essentials you need to launch a great landing page in one week.

👉 Course link: https://www.disclass.com/courses/adc4c4dc710340c4/outline

If you're building something new, this will help you ship faster and smarter.