Suno · AI · Jul 2024
Introducing Skills: Teach the Framer Agent to design more like you and your team
Framer · Sep 2026 · 0:30
A dark, minimal launch film for Framer skills that opens on a promise, demos the agent without the feature, then reveals the /skills command and its payoff. It alternates locked-off typing close-ups with wide 3D mockup rows, using a glowing cyan frame and sliding blue token pills as its signature moves.
More like this
Airbnb · Consumer · May 2024
Linear · Productivity · Apr 2026
Introducing Skills: Teach the Framer Agent to design more like you and your team, scene by scene
· 13 scenes as text
01 · Hook · 0:00–0:01
Close-up of a dark chat interface. The prompt text types out letter by letter in the input field, a caret blinking at the end. The New chat header and the GPT 6 Astra model selector stay still.
Camera: Static
02 · Hook · 0:01–0:02
A dark chat window in close-up, framed at a slight angle. The prompt field types out “Use curly quotes, not straight.” letter by letter, the caret blinking at the end. The frame stays locked off.
Techniques: Kinetic type
Camera: Static
03 · Hook · 0:02–0:03
A locked-off close-up of a dark chat screen. White sans text types out letter by letter inside the rounded input field, while a New chat label stays static above.
Camera: Static
04 · Hook · 0:03–0:04
A tight, slightly angled close-up of a dark screen as white sans-serif text types itself out letter by letter, completing the fragment 'um, never light.' behind a blinking caret. The frame stays locked throughout.
Techniques: Kinetic type
Camera: Static
05 · Demo · 0:04–0:05
A row of dark website mockups sits in 3D perspective, the center about page framed by a glowing cyan wireframe box. The panels rotate from a tilted angle to face the viewer while the camera holds still.
Techniques: 3D mockup
Camera: Static
06 · Demo · 0:05–0:06
A dark about page assembles in 3D perspective: blue outline boxes snap around each text block while the layout scrolls downward, angled side panels drifting at the edges for depth.
Techniques: 3D mockup, Parallax
Camera: Static
07 · Demo · 0:06–0:11
A dark website mockup in 3D perspective shows an Our principles section, its three cards filling with text. The camera pulls back to the full page, then widens to a row of panels, the center glowing. It fades to black, then a chat input box fades in.
Techniques: UI zoom, 3D mockup
Camera: Pull out
08 · Feature reveal · 0:11–0:17
A dark prompt card on a black background as a prompt is typed letter by letter behind a blinking caret. The camera zooms in on the text, then the /design-system token gains a blue pill highlight.
Techniques: UI zoom
Camera: Static
09 · Feature reveal · 0:17–0:18
A row of dark page mockups recedes into black, the center page outlined in glowing cyan. Its content scrolls up through the “Helping teams do better research” heading, “What we're building” and the three “Our principles” cards.
Techniques: 3D mockup
Camera: Pan
10 · Feature reveal · 0:18–0:23
A row of dark website mockups sits in 3D perspective on a black background. The center-right panel, framed by a glowing blue outline, scrolls its page upward as a colorful abstract image fades into a content box, while dimmer panels flank it left and right.
Techniques: 3D mockup
Camera: Pan
11 · Feature reveal · 0:23–0:24
Black background. Blue monospace code tags '/cms-structure' then '/motion-system' sit centered in rounded rectangle outlines that slide across as each label swaps in. Small captions 'Our principles' and 'What we're building' slide by.
On-screen text: “/cms-structure”, “/motion-system”, “Our principles”, “What we're building”
Camera: Static
12 · Feature reveal · 0:24–0:27
A dark card slides in from the right as a blue pill types /skills letter by letter behind a cursor. The card fades out, leaving the glowing cyan pill centered on black.
On-screen text: “/skills”
Techniques: Kinetic type
Camera: Static
13 · Outro · 0:27–0:30
A small white Framer logo sits centered on a black background, its angular shapes shifting subtly as it holds the frame. The command /skills appears as a static caption.
On-screen text: “/skills”
Camera: Static





