Autolayout Gap Dial
Autolayout Gap Dial is a interaction & feature demo Remotion shot (with a public demo.tsx). Watch the video preview, read the recipe notes, and copy the agent brief to implement it from tuned TSX.
- Category
- Interaction & Feature Demo
- Duration
- ~4s (120f: marquee entry + widening 38f + hold + spring bounce-back)
- Energy
- Medium (tool-rational style; the payoff is the locked sync between number and displacement)
- Styles
- 1
Recipe notes
A gap dial drives the layout — a row of link blocks with a marquee selection outline and gap annotations, badge numbers ticking up step by step while blocks get pushed apart in real time by the parameter and spring back into place; visualizing "parameter-driven layout"
When to use it
"Change one number, the UI follows" selling-point shots for design tools/low-code products; category language that wraps things in design-tool semantics
Intent
"Parameter changed, UI changed" is the core promise of design tools, but it's usually shot as a before/after of "click panel → cut to result", with the causality cut away. This card shoots the causality as one continuous shot: the gap badge number ticks up step by step, the link blocks get pushed apart **on the same frame**, and the measurement line stretches in real time — the number is the reins, the layout is the horse. The marquee outline + 8 handles + gap annotations are all native design-tool language, so the viewer instantly recogni