UI To Brand Morph
UI To Brand Morph is a outro 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
- Outro
- Duration
- A ~4.3s (130f) / B ~4.7s (140f)
- Energy
- Medium-high (closing highlight; one complete transformation tells it all)
- Styles
- 2
Recipe notes
Two-variant UI-to-brand morph — icon-flip-bloom flattens the icon's Y-axis into a vertical line that blooms into a flower-shaped mark + wordmark settling letter by letter; input-morph-assemble shrinks the input box into a pill with three primitive elements dropping in to assemble into a single logo petal
When to use it
Brand closing / the last beat before an outro; the visual argument that "the UI you use every day is this brand"
Intent
The brand-closing library already has three routes: brand-ink-open draws and stamps in at the opening, morph-from-primitive goes primitive → UI container (the reverse direction), outro-group-photo-launch gathers elements into a group photo (assembled but not transformed). This card adds a fourth: **the product's UI elements transform into the brand symbol themselves** — Variant A flips the icon over to become the logo (same-position entity swap); Variant B has the input box that recurs throughout the film assemble into a single logo petal after the final send (multi-element landing assembly). What the viewer sees isn't "a logo appeared" but "the thing I was just using was it all along" — the causal chain is itself the brand argument.