1:54
Introducing Praxis-1 | Runway
Runway · AI · Sep 2026
Explore
Introducing Source by Webflow
Webflow · Sep 2026 · 1:32 · AI-annotated
00:00:00 / 01:32:02
A dark, near-black launch film that alternates locked-off typographic statement cards with tight UI and 3D product shots, each card naming a feature before its demo. Pacing is steady at about 83 bpm with quick cuts, using 3D tilts, parallax card walls, and a recurring blue slash mark as the signature moves.
No filming indicatedEstimated needs: 7 capture groups — your screens or recordings · 1 official logo — reused across the film · 1 graphic passage — draw or supply · 9 3D passages — build or supply
More like this
2:52
Introducing Gemini 2.0 | Our most capable AI model yet
Google · AI · Dec 2024
3:16
Introducing reMarkable 2 — the paper tablet (2020)
reMarkable · Hardware · Mar 2020
Introducing Source by Webflow, scene by scene
· 53 scenes as text
01 · Hook · 0:00–0:03
A black laptop fades in at a three-quarter angle, its screen showing a warm gradient and a row of five app icons. The center icon lifts and enlarges, then a white icon with a blue slash settles into its place.
Techniques: 3D mockup
Camera: Push in
02 · Hook · 0:03–0:04
On a dark navy field, a grid of small blue squares assembles into the numeral 0 at center, the form scaling and pulsing, then the grid thins and dissolves to a few faint dots.
On-screen text: “0”
Techniques: Kinetic type
Camera: Static
03 · Product intro · 0:04–0:06
On black, a cluster of blue dots reorganizes into a slanted dotted parallelogram while two lines of light-gray text slide up into place beneath it. The frame holds, then a dark app sidebar fades in at the close.
On-screen text: “A new way to build”, “with Webflow”
Techniques: Morph, Kinetic type
Camera: Static
04 · Demo · 0:06–0:08
A dark app sidebar scrolls downward, its labels blurring as they pass, while a cursor glides down and rests on the CMS row, filling it with a gray highlight pill.
Techniques: Cursor demo
Camera: Static
05 · Demo · 0:08–0:11
A dark views menu sits in close-up on the left behind a large serif line, 'Where modern'. The menu drops to black and the headline continues in bold sans lines: 'marketing teams', 'and their agents', 'run the web', each line holding still in sequence.
On-screen text: “Where modern”, “marketing teams”, “and their agents”, “run the web”
Techniques: Kinetic type
Camera: Static
06 · Demo · 0:11–0:12
A dark workspace frames a browser showing the ClarityOps site. The page scrolls up: a woman in a beige blazer, a gradient panel with a logo row and buttons, and a dark decision card settle into the hero, while 74%, 4 days and 96% stat blocks slide down.
On-screen text: “run the web”
Camera: Pan
07 · Demo · 0:12–0:12
A browser window shows a pricing page with a large serif headline and a photo card, beside a dark app sidebar listing projects and sessions. The page content eases down slightly over the clip.
Camera: Static
08 · Feature reveal · 0:12–0:13
On a black background, the word Built in white sits next to a gold ampersand. The text then animates, replacing the ampersand with the phrase on code as the final letters type in sequentially.
On-screen text: “Built on code”
Techniques: Kinetic type
Camera: Static
09 · Feature reveal · 0:13–0:14
A large white title, Built on code, sits centered over a blurred changelog page on a black background. The title clears and the page sharpens into focus, revealing a CHANGED list with Home page and Product hero entries and a resting cursor.
On-screen text: “Built on code”
Camera: Static
10 · Feature reveal · 0:14–0:15
A dark review panel in close-up shows a Public positioning heading, a paragraph, three buttons (Approve, Request changes, Reject), and a CHANGED list with a Home page card. The frame opens soft and blurred, then sharpens as the layout settles a few pixels.
Camera: Static
11 · Feature reveal · 0:15–0:17
A light code editor fills the frame with a dark, blurred sidebar at the left. A diff view highlights red removed lines and green added lines of HTML code, and the list scrolls up a few lines as the replacements update.
Camera: Static
12 · Feature reveal · 0:17–0:19
A dark review interface fills the frame. On the left, a panel shows a Public positioning summary with approve, request changes, and reject buttons above a list of changed items. On the right, a code editor displays a red-and-green diff that scrolls slowly downward.
Camera: Static
13 · Feature reveal · 0:19–0:21
On a black background, white lowercase sans-serif text builds phrase by phrase: “the source of truth”, then “for”, then “your brand system”, which scales in. Words fade in one at a time.
On-screen text: “the source of truth”, “for”, “your brand system”
Techniques: Kinetic type
Camera: Static
14 · Feature reveal · 0:21–0:22
A dark interface shows a left sidebar with the Brand System tab and an IDENTITY list, Logo highlighted. A right content panel fades in with a Logo heading, body copy, and a dark logo tile, a light glint sweeping across its bottom edge.
Techniques: Light sweep
Camera: Static
15 · Feature reveal · 0:22–0:23
A dark brand-guideline document with a left navigation rail. The camera pans right across the page, from the Logo section, where a white card holds the ClarityOps mark, to the Color section with an Aa swatch and ink ramp card.
Camera: Pull out
16 · Feature reveal · 0:23–0:24
A row of dark design-system cards (Color, Layout, Voice) slides left in 3D perspective, each showing an “Aa” sample and body copy, above a blurred laptop mockup held in the foreground.
Techniques: 3D mockup
Camera: Pan
17 · Feature reveal · 0:24–0:25
A dark brand-guideline document scrolls left across the frame. Three text panels, Layout, Voice and Audience, slide past in a row, their edges softening with depth of field. Headings sit above small gray body copy and a dashed grid.
On-screen text: “Layout”, “Voice”, “Audience”
Techniques: Parallax
Camera: Pan
18 · Feature reveal · 0:25–0:26
A dark document page fills the frame; the central column stays sharp while the outer columns blur into black. A white sans heading reads 'Audience' over a bolded persona line and four bullet points. The framing eases slowly to the right.
Camera: Pull out
19 · Feature reveal · 0:26–0:28
Centered white text on a black background. The line 'so agents can do' assembles word by word, then the line is replaced by 'the heavy lifting'. Each phrase holds still once formed.
On-screen text: “so agents can do”, “the heavy lifting”
Techniques: Kinetic type
Camera: Static
20 · Feature reveal · 0:28–0:29
A dark list of agent rows, each with a colored circular icon, a title and two-line description, and a role pill on the right. The frame holds locked on the middle rows, with a large caption sitting still in frame.
On-screen text: “the heavy lifting”
Camera: Static
21 · Feature reveal · 0:29–0:31
A dark agents list scrolls upward, bringing the Section builder row to the top, then the view zooms in on that row's palette icon and description.
Techniques: UI zoom
Camera: Pan
22 · Feature reveal · 0:31–0:33
A dark feature list zooms in on a 'Developer' dropdown as gray column headers drift past and a cursor glides in to hover over the field.
Techniques: UI zoom, Cursor demo
Camera: Pan
23 · Feature reveal · 0:33–0:37
A dark chat screen shows a project sidebar and a video call tile of a smiling woman on the right. The view zooms into the input field as a prompt is typed, then sent as a blue message bubble.
Techniques: UI zoom
Camera: Push in
24 · Feature reveal · 0:37–0:39
Two flat panels of the ClarityOps website sit side by side, each panning horizontally at a different rate so the headline and nav slide past at offset positions. A small orange dot and a blue four-square mark appear at the top center between the panels.
Techniques: Split screen, Parallax
Camera: Pan
25 · Feature reveal · 0:39–0:42
Two tilted browser windows of the ClarityOps site sit side by side on black, the left in light theme and the right switching to dark. The pair rotates flat and pulls into sharp focus as the camera settles.
Techniques: 3D mockup
Camera: Static
26 · Feature reveal · 0:42–0:43
A tilted 3D view of a landing page with a large serif headline and top nav bar, edges softly blurred. A cursor glides across the page, a blue numbered badge pops in beside the headline, and a dashed frame draws around the content.
Techniques: 3D mockup, Cursor demo
Camera: Static
27 · Feature reveal · 0:43–0:45
White sans-serif text slides horizontally across a dark gray background while the camera stays locked off. The phrase passes through the frame in two staggered lines, revealing word groups as it moves.
On-screen text: “Can you suggest some new designs”
Techniques: Kinetic type
Camera: Pan
28 · Feature reveal · 0:45–0:46
A rounded chat input box is centered on a black field. White prompt text slides in across two lines, a caret blinking at the end, above a row of line icons and a square up-arrow button.
Camera: Static
29 · Feature reveal · 0:46–0:47
A blue prompt bubble and input bar appear on black, then the frame splits into two website homepage mockups side by side.
Techniques: Split screen
Camera: Static
30 · Feature reveal · 0:47–0:48
A four-panel grid shows the ClarityOps marketing site in different crops: a full hero with logo row and card grid on the left, a zoomed hero with an orange goal card top right, and a browser-framed hero bottom right. The left panel scrolls slowly upward.
Techniques: Split screen
Camera: Static
31 · Feature reveal · 0:48–0:49
A wall of ClarityOps landing-page mockups: a flat page on the left, two angled cards on black at right. A slow vertical drift settles the serif headline and the dark EMEA approval cards into frame.
Techniques: 3D mockup
Camera: Static
32 · Feature reveal · 0:49–0:51
On a black field, the white line “with visual controls” holds center, a faint pink tint on the left of “visual”, then the line is replaced by “when you need them” in the same spot. The frame stays locked off.
On-screen text: “with visual controls”, “when you need them”
Camera: Static
33 · Feature reveal · 0:51–0:53
A light landing page pairs a large serif headline and body copy with a photo of three colleagues and a dark goal card. A blue dashed selection box and a floating format toolbar appear over the text, then the view pans left into a dark margin with the cursor.
Techniques: Cursor demo, UI zoom
Camera: Push in
34 · Feature reveal · 0:53–0:55
A split screen pairs a dark code editor on the left with a live page preview on the right, a white cursor stepping down the markup. The view then shifts so the rendered page sits left while a 3D dashboard mockup with a layout inspector panel fills the right.
Techniques: Split screen, Cursor demo, UI zoom, 3D mockup
Camera: Push in
35 · Feature reveal · 0:55–0:57
A design tool view pairs a webpage canvas with a serif headline and dashed selection border against a dark Layout panel of Display, Spacing and Size controls. The page eases from a 3D tilt to flat while the panel resolves from a doubled ghosted state.
Techniques: 3D mockup
Camera: Pull out
36 · Feature reveal · 0:57–0:59
A near-black frame with a soft warm glow at the lower right holds centered white text. The phrase 'and the work' appears, then the line swaps to 'keeps improving'. Both phrases sit still in a locked-off frame.
On-screen text: “and the work”, “keeps improving”
Camera: Static
37 · Feature reveal · 0:59–1:00
A dark product screen with a Publish button and cursor dims to black as the headline after it ships scales in word by word over the fading interface.
On-screen text: “after it ships”
Techniques: Kinetic type
Camera: Pan
38 · Feature reveal · 1:00–1:01
On a black field with a faint warm glow in the lower right, the bold white phrase “after it ships” scales from a zoomed-in crop of the first word to its final centered size, settling into a static tagline.
On-screen text: “after it ships”
Techniques: Kinetic type
Camera: Static
39 · Feature reveal · 1:01–1:03
A MacBook on a black background shows a warm gradient desktop with an AEO recommendation notification card above a row of app icons. The shot pushes in until the card fills the frame.
On-screen text: “after it ships”, “4000”
Techniques: UI zoom, Kinetic type
Camera: Push in
40 · Feature reveal · 1:03–1:06
A dark chat window on a blurred orange backdrop zooms into an AEO recommendation card. A cursor moves to the input bar, where 'Draft two pricing pages and run an A/B test.' is typed. It cuts to a 3D pricing page with the small window floating above.
Techniques: UI zoom, Cursor demo, 3D mockup
Camera: Push in
41 · Feature reveal · 1:06–1:07
A dark pricing page for ClarityOps drifts across the frame as three offset copies of the same interface slide at different depths, the headline and tier cards shifting in parallax.
Techniques: 3D mockup, Parallax
Camera: Push in
42 · Feature reveal · 1:07–1:08
Two flat browser windows on a black background glide upward and settle into a staggered overlap. The front window shows a pricing page with a serif headline and a three-row plan table; the back window reveals a second page with three pricing cards.
Techniques: Parallax
Camera: Static
43 · Feature reveal · 1:08–1:10
White lowercase sans-serif text on a black background. The word workspaces appears centered, then tailored joins it, and the line swaps to to every teammate. The frame stays locked off throughout.
On-screen text: “workspaces tailored”, “to every teammate”
Techniques: Kinetic type
Camera: Static
44 · Feature reveal · 1:10–1:12
A dark chat panel types a prompt into its input box: 'As a web dev, I want to create a web page for my portfolio'. A preview card on the right refreshes with a photo of a person at a desk, then a second prompt begins. Locked-off frame.
On-screen text: “to every teammate”
Techniques: Cursor demo
Camera: Static
45 · Feature reveal · 1:12–1:14
A dark chat card types out a prompt about understanding the site's performance while an outline cursor hovers, then the camera pulls back to reveal the card's action icons and a white side panel.
Techniques: Cursor demo, UI zoom
Camera: Pan
46 · Feature reveal · 1:14–1:16
A dark product dashboard with a left sidebar and a center stats panel is shown in a browser window, soft and out of focus. The right-hand page fades in with its headline and copy as the scene pulls into sharp focus.
On-screen text: “http://clarityops.com”
Camera: Static
47 · Feature reveal · 1:16–1:17
A close-up of a dark analytics dashboard shows metric cards and a weekly conversion-rate chart whose red and green bars grow upward. A white panel on the right carries a large serif headline and body copy, static throughout.
On-screen text: “DECISION INTELLIGENCE”, “Decis”, “durab”, “ClarityOps gives”, “durable opera”, “commitments”, “every strategic”
Camera: Static
48 · Feature reveal · 1:17–1:18
A dark analytics card with a red-and-green bar chart and a four-row funnel sits between a campaign list and a light pricing page. The blue funnel bars fill in from the left one after another as the frame slowly pushes in on the card.
Techniques: UI zoom
Camera: Static
49 · Feature reveal · 1:18–1:19
A dimmed grid of product screenshots fills the dark background. A centered browser window stays sharp, showing the ClarityOps homepage with a serif headline and a vertical beige bar on its right edge.
Camera: Pull out
50 · Feature reveal · 1:19–1:21
A wall of browser windows recedes in 3D perspective, the center one in sharp focus showing a marketing page with the serif headline Decisions, made durable. The camera slowly pushes toward it while the surrounding screens dim and blur.
Techniques: 3D mockup, Parallax, UI zoom
Camera: Pull out
51 · CTA · 1:21–1:24
On a black background, the line Do your best work assembles word by word, with best in red and work in gray. The line then swaps to as a team. in white, also built word by word, centered in frame.
On-screen text: “Do your best work”, “as a team.”
Techniques: Kinetic type
Camera: Static
52 · Outro · 1:24–1:28
On a black field a blue slanted bar slides in from the right, then the white wordmark Source forms beside it as by Webflow fades in below. The lockup holds center frame, then the whole logo dims to black as a sign-off.
On-screen text: “Source”, “by Webflow”, “webflow.com/source”
Camera: Static
53 · CTA · 1:28–1:32
On a black background, the white URL webflow.com/source sits centered. It fades in from dim to full white over the first second, then holds still on a locked-off frame.
On-screen text: “webflow.com/source”
Camera: Static