Motionboard
Original · Vercel v0 · 0:28–0:31YouTube ↗
Motionboard recreation

Card Flip to Code

The preview card rotates 180° around the Y axis and its back face shows the code.

Full recipe

Why it works

Preview and code are the front and back of one card, which says they are the same thing. The surrounding interface stays completely still during the flip, so the motion happens on one element only.

Spec

Timing
Per component: flip to code 0.8s (24 frames), hold about 1s, flip back 0.8s (24 frames). Pricing card 1.03–1.83s, back 2.88–3.68s (hold 1.05s); sign-in form 4.56–5.36s, back 6.26–7.06s (hold 0.9s); notification settings flips to code 7.71–8.51s and stays; component swaps are hard cuts at 3.88s and 7.03s; window leaves 9.4s (0.7s), wordmark 9.85s; film 11s
Easing
One cubic-bezier(0.65,0,0.35,1) (power3.inOut) curve for each 180°; Preview/Code pill slides 0.2s expo.out; cursor press scale 0.86 over 0.06s, release 0.18s back.out(2)
Camera
Whole window in frame with a continuous slow push, scale 1→1.05 over 9.4s linear; 3D stage perspective 2400px, perspective-origin 820px 500px; edge-on the card shadow narrows to scaleX 0.04
Subject
A 940×680px component card turns rotateY 0→180° about its center; the second turn continues 180→360° in the same direction; the back face is rotateY(180deg), a dark code editor (#0d1117) with file tabs, an install command, and line-numbered TSX; the front is white with a dot grid
Sync
The cursor clicks the Preview/Code switch at 0.98s, the pill and labels change at 1.0s, and the flip starts at 1.03s; card shadow width and a black shading overlay (opacity up to 0.2) read the same eased angle each frame; window chrome, sidebar and header stay still; swapping component changes card, title, panel and sidebar row on one frame
Style
Light app window with a dark stage and deep shadow; shadcn-style components on the front; GitHub-dark syntax colors on the back; JetBrains Mono for code

Prompt

Build a preview-and-code switch called Card Flip to Code. Put a 940×680px component card in a light app window with perspective 2400px (origin 820px 500px). Clicking a Preview/Code segmented control (the pill slides over 0.2s with expo.out) starts a 0.8s rotateY from 0 to 180° about the card center with power3.inOut. The back face is rotateY(180deg), a dark code editor, and both faces use backface-visibility: hidden. The card shadow width (down to scaleX 0.04) and a black shading overlay (up to opacity 0.2) follow the same eased angle every frame. Hold about 1s, click back, and keep rotating from 180 to 360° in the same direction. Repeat for three components, swapping card, title, panel and sidebar row on a single frame between them, and leave the last one on code. Window chrome stays still, the camera pushes scale 1 to 1.05 over 9.4s, and at 9.4s the window leaves and your wordmark lands.

People describe it as

  • The preview card flips over and the back is code
  • A flip that switches between preview and code
  • The card turns halfway to show the source

Often confused with

  • Morph RelayMorph Relay turns one element into a different shape; Card Flip to Code shows two faces of the same card, and the shape does not change.
  • Control-Driven ChangeIn Control-Driven Change a control changes the page on the same frame; here the trigger and the result are on the same element.
Recipe file (.md)

More Features