Launchscene
PricingSign in
Explore

Introducing Webflow

Webflow · Apr 2023 · 1:51 · AI-annotated

00:00:00 / 01:51:15

The video alternates between a presenter in a bright office, 3D camera flights through floating editor panels in a black void, and screen recordings of the editor building a calendar site. Its signature moves are rack-focus 3D panel glides, shallow depth of field, and quick comedic live-action cutaways that punctuate each feature demo.

Footage neededEstimated needs: 7 capture groups — your screens or recordings · 1 official logo — reused across the film · 13 filmed passages — shoot, supply or replace · 2 graphic passages — draw or supply · 6 3D passages — build or supply

More like this

Introducing Webflow, scene by scene

· 40 scenes as text

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

    A dark settings panel floats in 3D perspective at a steep tilt, edges blurred by shallow focus. The camera glides down the list, sharp focus traveling from padding values to typography fields, while faint panels drift in the background.

    Techniques: 3D mockup, Parallax

    Camera: Pull out

  2. 02 · Product intro · 0:05–0:08

    A tilted monitor in 3D perspective displays a design tool open on a Dropbox Sign webpage mockup, with a bold headline and a photo of two men holding a tablet. The camera orbits the screen as floating UI panels shift at different depths, edges blurred.

    Techniques: 3D mockup, Parallax

    Camera: Pull out

  3. 03 · Product intro · 0:08–0:10

    A man in a black sweater sits at a wooden desk, facing the camera and gesturing with both hands as he speaks. Behind him, white shelves hold books and small potted plants. A white lamp stands at left, the perforated back of a monitor at right.

    Camera: Static

  4. 04 · Product intro · 0:10–0:13

    A dark settings panel floats at a 3D angle with shallow focus, a blurred shoulder at left and more panels behind. A dropdown of unit options highlights downward from percent to VW while the camera tracks slowly, keeping the panel sharp.

    Techniques: 3D mockup, Parallax

    Camera: Pan

  5. 05 · Product intro · 0:13–0:17

    A 3D perspective of the Webflow editor floats in black space. The design canvas with a lifestyle photo and headline sits left while flex, shadow and color panels drift in layered depth. The camera dollies forward, racking focus from blurred foreground panels to the sharp middle ones.

    Techniques: 3D mockup, Parallax

    Camera: Pan

  6. 06 · Product intro · 0:17–0:21

    A dark Export Code panel with CSS sits in the foreground over a Dropbox Sign page mockup. Focus slowly racks from the soft code window to sharp, leaving the page headline and a video of a man blurred behind.

    Camera: Pull out

  7. 07 · Product intro · 0:21–0:25

    A man in a black sweater sits at a wooden desk in front of a bookshelf, speaking to camera. He gestures with his right hand, raising a finger and tapping it as he explains. A white lamp and a monitor stand on the desk.

    Camera: Static

  8. 08 · Demo · 0:25–0:28

    A web design tool fills the screen, its canvas showing a heading and a grid of colorful feature cards. The cursor clicks the plus icon, the left panel switches to an Add menu, the cursor hovers Div Block and Heading, then the view zooms into the cards.

    Techniques: Cursor demo, UI zoom

    Camera: Push in

  9. 09 · Demo · 0:28–0:32

    A web editor shows a dark layers panel left and a grid of gradient feature cards on a white canvas. A cursor drags an H3 Heading element from the panel into the selected card, ghosted heading labels trailing the pointer, then drops it above the body text.

    Techniques: Cursor demo

    Camera: Static

  10. 10 · Demo · 0:32–0:35

    A design editor shows a grid of feature cards on the left and a style panel on the right. A cursor clicks the typography size field and types a smaller value, shrinking the Checker heading on the canvas, then selects the heading text.

    Techniques: Cursor demo

    Camera: Static

  11. 11 · Demo · 0:35–0:38

    A screen recording of a design editor displays a six-card feature grid; a cursor selects the Checker card while the right panel toggles between spacing and animation controls. The canvas then reframes to a calendar view with a purple waitlist button.

    Techniques: Cursor demo, UI zoom

    Camera: Static

  12. 12 · Demo · 0:38–0:40

    A screen recording of the editor shows a calendar mockup on the canvas while the right panel lists its move effect and timing. The cursor drags the Y position slider, and the calendar image slides downward across the canvas.

    Techniques: Cursor demo

    Camera: Pan

  13. 13 · Demo · 0:40–0:42

    A design tool interface fills the frame, with a layers panel left and an actions panel right. The central canvas previews a calendar webpage; the cursor rests on the play control as the headline, button and calendar mockup fade and settle into place.

    Techniques: Cursor demo

    Camera: Static

  14. 14 · Demo · 0:42–0:45

    A grid of feature cards on white under a bold heading, each pairing a gradient illustration of calendar and swatch mockups with a title and short copy. The tilted, glowing cards ease flat as their text cross-fades into place.

    On-screen text: “Features for every need”, “Daily Digest”, “Confusion is over. Daily Digest makes your calendar easy to use so you know exactly what's next.”, “AI Assistant”, “No writing required. AI will take care of your rescheduling messages.”, “Checker”, “Checker will find & resolve every conflict, whatever orbit you're on.”

    Techniques: 3D mockup

    Camera: Static

  15. 15 · Demo · 0:45–0:46

    A man in a black long-sleeve shirt sits at a wooden desk, gesturing with open palms as he speaks to camera. Behind him a white bookshelf holds books and small plants; a white lamp sits left and a monitor back right. Static medium shot.

    Camera: Static

  16. 16 · Feature reveal · 0:46–0:50

    The Webflow Designer interface lies flat in 3D perspective on a black void. A low camera rises to reveal the canvas, showing the heading “A calendar for space travel,” color swatches and calendar cards.

    Techniques: 3D mockup

    Camera: Static

  17. 17 · Feature reveal · 0:50–0:53

    The Webflow Designer shows a selected card, a CSS Preview panel, and a properties panel. As the padding value cycles 20px, 32px, 16px, the green badges, highlighted CSS values, and padding diagram update in sync while the card resizes. A cursor hovers near the Spacing section.

    On-screen text: “A calendar for space travel”

    Techniques: Cursor demo

    Camera: Static

  18. 18 · Feature reveal · 0:53–0:57

    A dimmed landing page mockup for a space travel calendar sits behind an Export Code dialog. The dialog opens with a loading spinner, then fills with syntax highlighted HTML code. A warning line and a blue Prepare ZIP button sit at the bottom.

    Camera: Static

  19. 19 · Feature reveal · 0:57–1:03

    A design tool canvas displays a landing page titled “A calendar for space travel”. The frame zooms to the top toolbar, a cursor clicks Publish, and a dropdown opens with two publish destinations.

    Techniques: UI zoom, Cursor demo

    Camera: Push in

  20. 20 · Feature reveal · 1:03–1:05

    A woman sits at a round wooden desk behind a closed laptop, pointing at it with both index fingers, then opening her hands to gesture. Bookshelves and a desk lamp fill the background in a locked-off medium shot.

    Camera: Static

  21. 21 · Feature reveal · 1:05–1:11

    A website editor screen shows an open publish dialog; the cursor clicks the blue publish button, which shows a spinner then turns green. It cuts to a man in a black sweater speaking at a desk in front of bookshelves.

    Techniques: Cursor demo

    Camera: Static

  22. 22 · Feature reveal · 1:11–1:13

    A man in a black sweater sits at a wooden desk in front of a bookshelf, speaking to the camera and gesturing with his hands. A white lamp on the left and the back of a perforated monitor on the right frame the shot.

    Camera: Static

  23. 23 · Feature reveal · 1:13–1:15

    A browser window of the calendar landing page fades in from white on a black background. The hero headline, body copy, purple CTA button and two app screenshots resolve to full color, with a soft purple glow behind the screenshots.

    On-screen text: “getcalendarapp.com”

    Camera: Static

  24. 24 · Feature reveal · 1:15–1:18

    A dark world map shows blue dots with pulsing rings at data-center sites; a soft blue glow travels from the US across Europe to Asia, then cuts to a man in a black sweater at a wooden desk in front of bookshelves, speaking to camera.

    Techniques: Light sweep

    Camera: Static

  25. 25 · Feature reveal · 1:18–1:20

    A man in a black sweater sits at a wooden desk before a white bookshelf, speaking to the camera and gesturing with both hands. A white lamp stands on the left, the perforated back of a monitor on the right, in a static medium shot.

    Camera: Static

  26. 26 · Feature reveal · 1:20–1:22

    A dark image settings panel sits left with a cursor over a field dropdown; a grid of six feature cards with gray placeholder images and captions fills the right, the first outlined in blue. The cursor moves to the Feature image option.

    Techniques: Cursor demo

    Camera: Static

  27. 27 · Feature reveal · 1:22–1:23

    A dark Image Settings panel anchors the left edge while a grid of six feature cards, each pairing a gradient illustration with a bold title and caption, fills the rest of the screen. A cursor hovers over the Select button.

    Camera: Static

  28. 28 · Feature reveal · 1:23–1:25

    A design tool screen displays a website mockup with a purple waitlist button. A dark side panel lists team members and their editing status, then the Editing dropdown opens to show options such as Request design control and Create a page branch.

    Techniques: Cursor demo

    Camera: Static

  29. 29 · Feature reveal · 1:25–1:26

    A man in a black sweater sits at a light wooden desk, speaking to camera and gesturing with both hands. A white bookshelf with books and small plants fills the background; a white lamp stands left and the back of a perforated metal monitor sits right.

    Camera: Static

  30. 30 · Feature reveal · 1:26–1:28

    A bearded man in a cream sweater sits at a round wooden table with a laptop, its lid facing the camera. He raises a pen and points upward while talking, then lowers his hand. White bookshelves fill the background and an out-of-focus head sits in the right foreground.

    Camera: Static

  31. 31 · Feature reveal · 1:28–1:29

    A man in a black sweater sits at a wooden desk, speaking to camera and gesturing with both hands. Behind him a white bookshelf holds books and small plants; a white lamp stands left and the perforated back of a silver monitor stands right.

    Camera: Static

  32. 32 · Feature reveal · 1:29–1:32

    A white Site access table lists team members with avatars and roles. A cursor clicks the three-dot menu on one row, a dropdown opens with role options, and the role updates to Can design.

    Techniques: Cursor demo

    Camera: Static

  33. 33 · Other · 1:32–1:33

    A man in a black sweater sits at a wooden desk, gesturing with both hands as he speaks to camera. A white bookshelf with books and plants fills the background; a white lamp and the back of a monitor flank the frame.

    Camera: Static

  34. 34 · Other · 1:33–1:35

    A Webflow editor sits in 3D perspective, its canvas showing a “A calendar for space travel” page, while property, color and code panels float around it. The camera pushes in, reframing onto the main canvas as the side panels drift past.

    Techniques: 3D mockup, Parallax, UI zoom

    Camera: Static

  35. 35 · Other · 1:35–1:37

    A design editor shows a landing page for a space-travel calendar, its bold headline and a tilted 3D calendar mockup centered in the canvas between layer and property panels. The shot holds as a locked, static frame.

    On-screen text: “A calendar for space travel”

    Techniques: 3D mockup

    Camera: Static

  36. 36 · Other · 1:37–1:44

    A man in a black sweater sits at a wooden desk before white bookshelves, gesturing with both hands as he speaks to the camera. The framing stays locked off while a small static caption holds the tagline.

    On-screen text: “A calendar for space travel”

    Camera: Static

  37. 37 · Other · 1:44–1:45

    A bearded man in a cream sweater sits at a round wooden table behind a closed laptop, glancing to the side and speaking. White bookshelves full of binders, books and a lamp fill the background.

    Camera: Static

  38. 38 · Other · 1:45–1:46

    A woman with long blonde hair sits at a round wooden desk in a home office, smiling as she looks at an open laptop. A brass lamp stands to her left and floor-to-ceiling bookshelves fill the background. The camera holds a static medium shot.

    Camera: Static

  39. 39 · Outro · 1:46–1:46

    Black screen, centered gray webflow wordmark fades in from black, the closing logo reveal.

    On-screen text: “webflow”

    Camera: Static

  40. 40 · Outro · 1:46–1:51

    The webflow wordmark sits centered on a black background, fading in from a soft blur to crisp white with a gentle glow, then fading out to black in the second half of the clip.

    On-screen text: “webflow”

    Camera: Static