Launchscene
PricingSign in
Explore

Introducing v0: Generative UI

Vercel · Oct 2023 · 0:47 · AI-annotated

00:00:00 / 00:47:30

A single continuous white field carries the whole story: a line art logo sting, a question card, a rapid tour of the v0 interface (prompt bar, element editing, code panel, stealth mode), a community grid, then a URL close. Signature moves are the expanding dark pill bar, the 3D code panel that rotates away to flatten the UI, and the logo morphing into the Vercel wordmark.

No filming indicatedEstimated needs: 6 capture groups — your screens or recordings · 1 official logo — reused across the film

More like this

Introducing v0: Generative UI, scene by scene

· 13 scenes as text

  1. 01 · Product intro · 0:00–0:02

    A thin line-art v0 wordmark centered on white fills in to solid black as faint dashed construction lines cross the frame and fade out.

    Camera: Static

  2. 02 · Hook · 0:02–0:04

    The dark gray v0 logo sits centered on white, then gives way to the question What will you ship? which scales in light gray as a dark rounded bar expands behind it, turning the type white.

    On-screen text: “What will you ship?”

    Techniques: Kinetic type

    Camera: Static

  3. 03 · Hook · 0:04–0:13

    A black pill prompt bar on white shows the question, then widens to reveal an avatar and lock and enter icons. Prompts type in; each finished line slides up and fades as the next appears. A cursor clicks the enter icon and the bar collapses to a dot.

    On-screen text: “What will you ship?”, “A flower shop”, “A sleek pricing page”, “A SaaS dashboard layout”, “A newsletter form in dark mode”

    Techniques: Kinetic type, Cursor demo

    Camera: Static

  4. 04 · Feature reveal · 0:13–0:29

    The cursor clicks the Acme Inc header of a dashboard mockup, a prompt box opens, and the instruction Make the company logo color blue is typed; Update turns the logo blue. The view zooms out, and the cursor clicks the Canvas button, and the mockup fades.

    Techniques: UI zoom, Cursor demo

    Camera: Static

  5. 05 · Feature reveal · 0:29–0:30

    A V0 project screen shows a dark code editor under a user prompt. A cursor hovers over the Canvas button, then the view reframes closer to the code panel and right-side version thumbnails.

    Techniques: Cursor demo, UI zoom

    Camera: Static

  6. 06 · Feature reveal · 0:30–0:36

    A tilted 3D code panel rotates away, flattening the SaaS dashboard, then the view zooms into the top bar as a cursor opens the Stealth Mode dropdown and moves the check from Private to Public, before zooming back out.

    Techniques: 3D mockup, UI zoom, Cursor demo

    Camera: Pull out

  7. 07 · Demo · 0:36–0:36

    A faint dashboard mockup with a left nav and a search field sits centered on white, a smaller copy hovers above it and a chat bubble with a robot avatar below reads 'A SaaS dashboard layout'. The frame is locked off as the prompt text scales in.

    Camera: Pull out

  8. 08 · Demo · 0:36–0:37

    On a white canvas, a small dashboard mockup and a chat prompt bubble below it scale up into a full layout: dashboard left, a pricing card and dark toolbar on the right and bottom, a second prompt bubble at the base.

    Camera: Static

  9. 09 · Social proof · 0:37–0:39

    A four-by-three grid of small UI mockups fades in from white on a light background. Each cell pairs a screenshot with a gray pill caption and a small avatar below it, the whole grid settling into place at a calm pace.

    On-screen text: “A SaaS dashboard layout”, “A SaaS analytics dashboard layout”, “A sleek pricing page for a SaaS.”, “A cookie consent banner”, “Hero section with an email input”, “A FAQ section”, “A note taking app”, “A table of financial invoices”, “A toolbar for a wysiwyg editor”, “A dashboard for a saas app, Vercel toolbar clone, A news website”

    Camera: Push in

  10. 10 · CTA · 0:39–0:39

    The v0.dev wordmark scales in at the center of a plain off-white field after a faded grid of labeled UI mockups washes out to white.

    On-screen text: “v0.dev”

    Techniques: Kinetic type

    Camera: Push in

  11. 11 · CTA · 0:39–0:41

    The wordmark v0.dev sits centered on a near-white field. The .dev portion then expands and morphs into a large rounded outline while v0 holds its position.

    On-screen text: “v0.dev”

    Techniques: Kinetic type, Morph

    Camera: Static

  12. 12 · Outro · 0:41–0:41

    A black v0 logomark sits centered on a plain off-white background. The mark stays static for the whole clip, with no reveal or camera move.

    On-screen text: “v0”

    Camera: Static

  13. 13 · Outro · 0:41–0:47

    On a plain white background, the small black v0 logomark scales up in the center, then resolves into the Vercel wordmark with the triangle mark. The wordmark holds briefly, then fades out to white.

    On-screen text: “v0”, “Vercel”

    Techniques: Morph

    Camera: Static