Interaction & Feature Demo
UI Spacing Animation
A spacing dial controls the readout, measurement lines and layout as five navigation cards spread apart and spring back.
See the effect
Original shot recipe ↗About this shot
Where it fits in your video
Show how a single setting changes a layout in a design tool, no-code editor, or component-library demo.
Use this where you would normally show a before and after. The numbers and the layout move together, so the audience can see exactly what the control does.
What viewers see
- The navigation row and measurement guides appear.
- The dial opens the gaps and updates the measurements.
- The cards spring back together.
Use your own navigation labels, spacing values, and accent color.
Related shots
Back to library ↗
Interaction & Feature Demo
Canvas Materialize Moves
A table row arcs out into a canvas card, or a typed prompt triggers a branching diagram whose connections grow ahead of its nodes.
Customize this shot ↗
Interaction & Feature Demo
Chip Grid Single Select Blackout
Five chips appear in two rows. The chosen chip darkens and springs, the others fade away, and a price rises beneath the selection.
Customize this shot ↗
Interaction & Feature Demo
Collab Cursor Moves
Five cursors enter at different times, drift, type briefly, and gather around the same area.
Customize this shot ↗
Interaction & Feature Demo
Glass Pill Dictation Typing
A glass input pill springs into place. A cursor types a dictated sentence while the colored glow fades to neutral frosted glass.
Customize this shot ↗
Interaction & Feature Demo
Hashtag To Pill Materialize
A typed hashtag snaps into a large pill, shrinks into its slot, and cuts to the finished page.
Customize this shot ↗
Interaction & Feature Demo
Picker Carousel Feature Cycle
Options slide through a fixed focus pill, sharpening and snapping to a stop as they reach the center.
Customize this shot ↗