0:52
Rive's GPU Canvas is now live for everyone
Rive · Design · Sep 2026
Explore
Responsive Layouts have landed
Rive · Oct 2024 · 0:46 · AI-annotated
00:00:00 / 00:46:19
A single-feature launch built as a blueprint title card followed by a fast montage of editor screens where game, dashboard and device mockups reflow between landscape and portrait on the beat. Signature moves are the sliding blue selection boxes, dimension tags and state-machine highlights that tie every demo to the layout system, closing on a scaling R logo tile.
No filming indicatedEstimated needs: 2 capture groups — your screens or recordings · 1 official logo — reused across the film
More like this
1:36
Rive for Product Design Reel 2025
Rive · Design · Mar 2025
1:21
All the launches at Config 2025 | Figma
Figma · Design · May 2025
Responsive Layouts have landed, scene by scene
· 26 scenes as text
01 · Product intro · 0:00–0:04
A dark design-tool canvas with blue selection boxes and dimension tags. White text blocks reflow twice, spelling CREATE RESPONSIVE LAYOUTS IN RIVE. A starburst NEW badge pops in and flashes yellow and purple.
On-screen text: “CREATE RESPONSIVE LAYOUTS IN RIVE”, “NEW”
Techniques: Kinetic type
Camera: Push in
02 · Feature reveal · 0:04–0:05
Inside a dark design tool, a game UI mockup reflows from a wide two-column layout into a narrow portrait column as the canvas resizes. The pink race car, stat bars and SELECT button stack vertically while the editor's layer and property panels stay fixed.
Camera: Static
03 · Feature reveal · 0:05–0:07
A dark editor window shows a fantasy game UI on the left, a bearded gnome with a scythe and an inventory grid. The panel reflows from a wide landscape layout to a narrow portrait one. A node graph on the right lists landscape and portrait states.
Techniques: Morph
Camera: Static
04 · Feature reveal · 0:07–0:08
Left, a dark dashboard of widgets (map, car, music, clock) reflows from a wide landscape layout to a compact portrait one. Right, a flowchart node Any State points to Square, landscape and Portrait; the blue highlight jumps between the orientation nodes to match the resize.
On-screen text: “Any State”, “Square”, “landscape”, “Portrait”
Techniques: Split screen
Camera: Static
05 · Feature reveal · 0:08–0:10
A car dashboard mockup on the left reflows from a wide landscape layout to a stacked square layout, while a node diagram on the right highlights the matching state, shifting its blue outline from landscape to Square.
Techniques: Split screen
Camera: Static
06 · Feature reveal · 0:10–0:11
On a gray design canvas, a dark TX6 console mockup with teal-glow faders morphs from a tall portrait layout into a wide landscape one, its two knobs sliding from the bottom edge to the right side.
Techniques: Morph
Camera: Static
07 · Feature reveal · 0:11–0:14
A dark 3D design tool fills the frame; its center viewport shows a metallic device with red-lit buttons and black cables. The panel grid reflows, sliding sideways as it expands from four to six columns, then a right column fades. Hierarchy and properties panels flank it; the frame is locked.
Techniques: 3D mockup
Camera: Static
08 · Feature reveal · 0:14–0:17
A game UI mockup sits inside a design tool artboard. As the layout reflows, four planet cards collapse from a grid into a single row and a pink skull bubble slides from left to right, while the green heading SELECT YOUR PLANET slides with them.
On-screen text: “SELECT YOUR PLANET”
Camera: Static
09 · Feature reveal · 0:17–0:18
A selected macOS Finder window on a dark design canvas expands rightward, its blue selection edge sliding outward to reveal additional app icons and toolbar controls.
Camera: Static
10 · Feature reveal · 0:18–0:20
Split view of a design app: a dark hierarchy panel on the left, a light canvas on the right. A cursor selects rows as the canvas reflows, one wide track card becoming three side by side; the “Club classics” headline slides and “Charli xcx” scales.
Techniques: Cursor demo
Camera: Static
11 · Feature reveal · 0:20–0:21
A design canvas shows a selected group: a white round playback button beside a yellow card with a bold title and dotted rows. A cursor drags the blue bounding box wider, the content scales up, and the dimension labels update.
Techniques: Cursor demo
Camera: Static
12 · Feature reveal · 0:21–0:23
A black design canvas with a blue selection frame and dimension tags holds three rounded buttons. The buttons slide apart as their labels flip from English to Dutch, and the white-filled button hops between the middle and right slots.
Techniques: Kinetic type
Camera: Static
13 · Feature reveal · 0:23–0:25
A dark design-tool layout displays a Saturn V article, a labeled rocket diagram and a launch photo. As the clip runs, callout labels for the third and second stages fade in beside the rocket, while the right-hand properties panel stays fixed.
Camera: Static
14 · Feature reveal · 0:25–0:27
A grayscale game main menu over a foggy forest lists NEW GAME, LOAD GAME and OPTIONS on the left, a bearded cartoon lumberjack with an axe on the right. The white-bordered window resizes and the layout reflows to fit.
Camera: Static
15 · Feature reveal · 0:27–0:28
A dark editor screen holds a locked-off frame, its center canvas running a sci-fi game HUD. The 'SNIPER RIFLE' label slides in and a cyan crosshair icon fills in while a hand cursor rests on an input box.
Camera: Static
16 · Feature reveal · 0:28–0:30
A dark editor UI displays a game HUD mockup; a cursor edits the weapon input, and the HUD title and icon grid re-animate to a new state. The scene cuts to a 3 by 8 grid of flat vector planets.
Techniques: Cursor demo
Camera: Static
17 · Feature reveal · 0:30–0:31
On a dark canvas, a grid of rounded cards holds flat planet icons; most icons shrink to tiny dots at the card edges while a beige banded planet and a pink circle enlarge and overlap in the center, the cursor gliding in beside them.
Techniques: Cursor demo
Camera: Static
18 · Feature reveal · 0:31–0:32
A dark UI panel holds eight columns of rounded planet cards with pill thumbnails above and below. The layout reflows: cards resize, planets swap sizes and shift columns while a cursor moves across the right side.
Techniques: Cursor demo
Camera: Pull out
19 · Feature reveal · 0:32–0:34
Inside a dark editor interface, a red cartoon figure reaches across the canvas and pushes a green list bar, the white bars above and below reflow to fill the gap. The timeline and layer panels stay static around the animating artboard.
Camera: Static
20 · Feature reveal · 0:34–0:35
A design app canvas shows an exploded burger poster on white, with a side panel listing the parts. A blue selection box tracks the stack as brown patty discs pop in one after another, building a tall tower under the title.
On-screen text: “The X-tra Cheezy”, “McBurger”
Camera: Static
21 · Feature reveal · 0:35–0:36
A dark game viewport shows an inventory panel and a white mouse character on a cracked floor, then the view cuts to a design tool workspace where the same inventory card sits on a white canvas between a layers list and a layout inspector, with a cursor hovering over it.
Techniques: Cursor demo
Camera: Static
22 · Feature reveal · 0:36–0:39
A dark design tool frames a white canvas where stacked green, red and blue rounded bars reflow as a blue selection box and fill labels update. The cursor clicks the red bar while layer and property panels stay fixed at the edges.
Techniques: Cursor demo
Camera: Static
23 · Feature reveal · 0:39–0:41
A dark design-tool view shows a black canvas holding four colored rounded squares stacked in a column, next to a Layout properties panel. A cursor edits the direction control, and the squares slide from the column into an even horizontal row aligned to the top edge.
Techniques: Cursor demo
Camera: Static
24 · Feature reveal · 0:41–0:43
A dark motion editor shows a teal status panel with five cards and a 50% readout; the canvas zooms in on the first card as its bar fills to 100%, while the Step.1 node in the bottom flow diagram highlights.
Techniques: UI zoom
Camera: Static
25 · Outro · 0:43–0:44
On a black field, a gray square carrying a black R-mark scales down to a small centered square. Small text reads 100%, which scales, and → Step.1, which holds still.
On-screen text: “100%”, “→ Step.1”
Camera: Static
26 · Outro · 0:44–0:46
A small white square holding a black R mark sits dead center on a black field, then scales down and fades out of frame.
Camera: Static