Motionboard
Original · Arc Boosts · 0:00–0:05YouTube ↗
Motionboard recreation

Locked-Layout Reskin

Layout positions stay locked while the color scheme and fonts hard-cut every 6–10 frames.

Full recipe

Why it works

With the layout locked, the viewer's eye stays in one place and sees only what changes with each switch. Cuts land on the strong beats of the music, and the skins differ enough in color.

Spec

Timing
Skin cuts: 4 at 16-frame spacing (0.53s) from 1.0s to 2.6s; title card 3.13–3.73s (18 frames); 10 cuts at 8-frame spacing (0.27s) 3.73–6.13s; 11 cuts at 6-frame spacing (0.2s) 6.4–8.4s, landing on one skin; Enter applies at 8.67s; wordmark cuts 9.4–9.7s; film 11s
Easing
No transition, a class swap with tl.set on a single frame; only the toast (expo.out 0.35s), cursor move and the final scale push animate
Camera
Fixed; the editor window is 1632×918px (85% of the frame) with position locked; scale 1→1.03 linear over 1s after landing (8.4–9.4s)
Subject
One page (a 1240×828px site canvas) re-skinned through eight theme classes: Mono white, Gazette beige serif, Neon dark purple with lime and monospace, Fern green serif, Block orange with condensed black type, Sorbet pink and lilac, Poster blue with condensed caps, Noir dark with gold serif; layout and elements never move
Sync
A theme-list panel highlights the active row, and an arrow-down key cap lights for 3 frames on every cut; the cursor picks the Gazette row at 0.87s and the first cut follows at 1.0s; the title card colors come from the skins on either side (#fff1f5 background, #ff5a1f text)
Style
Each skin changes background, text, accent, border and font through CSS variables; saturated solid fields (Block #ff5a1f, Poster #2340ff) alternate with quiet light and dark skins; type styles differ clearly between skins

Prompt

Show that your page is customizable with a shot called Locked-Layout Reskin. Put one page in an editor window that takes up 85% of the frame (1632×918px), with position and element layout fully locked. Swap it through eight skins by changing a theme class on a single frame, each skin changing background, text, accent, border and typeface through CSS variables (white Mono, beige serif Gazette, dark Neon with lime and monospace, green Fern, orange Block with condensed black type, pink Sorbet, blue Poster, dark gold Noir). Light an arrow-down key cap for 3 frames on every cut. Start with the cursor picking one skin at 0.87s, cut every 16 frames for 4 skins (1.0 to 2.6s), insert a 0.6s solid-color title card at 3.13s with colors taken from the skins before and after, cut every 8 frames for 10 skins, then every 6 frames for 11 skins until it lands on the chosen skin at 8.4s. Press Enter with a toast at 8.67s, push scale 1 to 1.03 over 1s, then finish with a few hard-cut wordmark skins.

People describe it as

  • The same web page in lots of colors and fonts
  • The layout stays put while the colors keep jumping
  • Quick switching between different themes

Often confused with

  • Control-Driven ChangeControl-Driven Change shows a control that changes the result on the same frame; Locked-Layout Reskin has no control and conveys customizability through edit rhythm.
  • Focus HopFocus Hop moves a single highlight block; Locked-Layout Reskin changes the skin of the whole page.
Recipe file (.md)

More Transitions