Webflow University 2.0: Learn web design, development, and time travel — visually

01 · Hook · 0:00–0:00

A uniform black screen holds across the short clip, a quiet lead-in with no elements, text, or motion visible.

Camera: Static

02 · Hook · 0:00–0:04

A translucent dark panel unfolds in 3D, its edges folding outward into a box-shaped spacing widget, set against a blurred design app. It settles at a tilted angle, exposing the Spacing header and the values 10 and 0 on its faces.

Techniques: 3D mockup

Camera: Static

03 · Hook · 0:04–0:07

Three design-tool panels sit side by side on black: a color picker, a layout and spacing inspector, and a grid panel. The frame opens fully out of focus and racks into sharp focus, settling on the inspector values.

Camera: Push in

04 · Demo · 0:07–0:08

A web design editor interface shows a central canvas with a selected text box. The text 'Everything you can imagine is real.' completes in a pink-to-orange gradient, with '-Pablo Picasso' below it.

Techniques: Kinetic type

Camera: Static

05 · Demo · 0:08–0:12

A design tool shows a Sydney travel card on the left and a CSS Preview panel beside it. A cursor drags the padding value in the right panel; the card's white padding widens and narrows live, green pixel badges appear on its edges, and the code updates.

Techniques: Cursor demo

Camera: Static

06 · Demo · 0:12–0:14

A split view shows a Sydney travel card on the left and a dark CSS code panel on the right. A green measurement badge above the card counts up from 14px to 20px as the top padding grows and the photo slides down.

Techniques: Split screen

Camera: Static

07 · Demo · 0:14–0:17

A dark properties panel sits in 3D perspective as the camera trucks across it, the right edge blurring. Rows for Width, Min W and Max W with a unit dropdown hold sharp, then it cuts to the full After Effects workspace with a rose line-art composition on the timeline.

Techniques: 3D mockup, Parallax

Camera: Pan

08 · Demo · 0:17–0:19

Full-screen After Effects workspace. A cursor drags the playhead right along the timeline, and in the central comp panel a vertical white card shows a rose filling from a gray line sketch into a saturated red bloom with green leaves. Image layers stack in the timeline below.

Techniques: Cursor demo

Camera: Static

09 · Demo · 0:19–0:23

A white shop page; the heading THE ROSE SHOP is fixed on the left. A rose stem in the center crossfades from a black line sketch to a red rose. On the right, text blocks with SHOP NOW buttons slide up in sequence while the pagination dots advance.

Techniques: Morph

Camera: Static

10 · Demo · 0:23–0:24

A design editor panel sits at an angle in 3D perspective, shallow depth of field blurring the edges. A colorful gradient poster with the words THE ROSE SHOP fills the left canvas while the right panel lists Backgrounds and Borders settings. The camera is locked off.

Techniques: 3D mockup

Camera: Static

11 · Demo · 0:24–0:26

Inside a website builder, a dark canvas shows a landing page with a colorful serif headline and floating images. A cursor moves across the canvas and the marble image drifts left, driven by the mouse actions listed in the right panel.

Techniques: Cursor demo, Parallax

Camera: Static

12 · Other · 0:26–0:30

A man in a black sweater and open collar sits at a wooden desk, speaking to camera. Behind him a white bookshelf holds books, potted plants and a clock; a lit lamp stands at left. He shifts his head and blinks as he talks.

Camera: Static

13 · Other · 0:30–0:31

A man in a dark shirt sits at a desk holding a red card and a pen, speaking to someone off camera. A blurred editing interface fills the left foreground; lenses, papers and a lit lamp sit on the desk.

Camera: Static

14 · Other · 0:31–0:33

A man in a black sweater sits at a wooden desk in front of white bookshelves. He faces the camera, speaks, and gestures with his right hand while his left hand rests on the desk.

Camera: Static

15 · Other · 0:33–0:35

A man with headphones around his neck sits at a table with camera lenses and papers, a blurred phone interface in the left foreground; he gestures while speaking. Cut to a man in a black sweater at a desk before a bookshelf, also gesturing.

Camera: Static

16 · Other · 0:35–0:36

A man in a black sweater sits at a wooden desk before a white bookshelf, facing the camera and speaking. His hands rest on the desk edge as he gestures slightly. A lit lamp and a silver tower computer frame the shot in a static medium close-up.

Camera: Static

17 · Other · 0:36–0:37

A man in a dark shirt sits at a wooden desk, headphones around his neck, holding a red pen and gesturing as he speaks. A blurred screen fills the left foreground and a lit table lamp stands at right against a wooden panel.

Camera: Static

18 · Other · 0:37–0:39

A man in a black sweater sits at a desk before a bookshelf, gesturing with open palms as he speaks. The angle shifts to a side view where he holds a red pen over a notebook, papers, glasses and a phone on the desk.

Camera: Static

19 · Other · 0:39–0:40

A man with headphones around his neck sits at a wooden desk, holding a red pen and gesturing as he speaks. A blurred monitor showing a colorful interface frames the left foreground, while lenses, papers, and a lamp rest on the desk.

Camera: Static

20 · Other · 0:40–0:41

A man in a black sweater sits at a wooden desk before a white bookshelf, gesturing with both hands as he speaks. A lit table lamp sits at left; the framing holds a static medium shot of him centered.

Camera: Static

21 · Other · 0:41–0:42

A man in a dark shirt sits at a wooden table, holding a red pen and speaking, with camera lenses, papers and a lit lamp arranged in front of him. A blurred tablet showing a camera app frames the left foreground.

Camera: Static

22 · Other · 0:42–0:44

A man in a black sweater sits at a wooden desk, hands folded, in front of white bookshelves holding books and small plants. A lit table lamp stands at left. He looks into the camera and speaks, the frame holding steady.

Camera: Static

23 · Other · 0:44–0:45

A man in a dark shirt with headphones around his neck sits at a desk, gesturing with one hand while holding a red pen in the other. A blurred vertical interface panel fills the left foreground, and lenses, papers and a lamp sit on the desk.

Camera: Static

24 · Other · 0:45–0:47

A man in a black sweater sits at a wooden desk before white bookshelves, facing the camera. He raises one finger while talking, then lowers his hand to the desk. A lamp glows at the left edge of the frame.

Camera: Static

25 · Other · 0:47–0:49

Locked-off medium shot, shallow focus. A man in a navy shirt, headphones at his neck, sits at a wooden table and speaks while holding a small red tool. A blurred phone with a glowing UI fills the left foreground; lenses, papers and a lamp sit on the table.

Camera: Static

26 · Other · 0:49–0:52

A man in a black sweater and light shirt sits at a wooden desk before a white bookshelf, raising his index finger to make a point as he speaks, then resting his hand on the desk.

Camera: Static

27 · Outro · 0:52–0:54

A man in a dark shirt, headphones at his neck, sits at a wooden desk in a dim studio holding a red pen, with lenses and a lit lamp on the table and a blurred monitor in the foreground. The shot cuts to black, revealing the white webflow wordmark centered.

On-screen text: “webflow”

Camera: Static

28 · Outro · 0:54–0:57

Black background with the white webflow wordmark centered and static. The word University slides in to its right with a horizontal motion blur around 2.2s, then the full lockup settles by 3.2s.

On-screen text: “University”

Techniques: Kinetic type

Camera: Static

29 · Outro · 0:57–0:59

A solid black frame holds for the full duration of the scene. No elements, text, or motion appear; the screen stays uniformly dark from start to finish, reading as a blank transition or hold.

Camera: Static