SVG Shape Morph
SVG Shape Morph is a ui entrance & showcase 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
- UI Entrance & Showcase
- Duration
- ~5.2s (156f@30fps)
- Energy
- Low (continuous flow with no explosion — good as narration base or breathing beat)
- Styles
- 1
Recipe notes
One 140-point closed outline smoothly morphs into another shape and back; the two shapes are first resampled in polar coordinates to the same point count, per-point radius interpolation with inOutCubic; mid-morph layers a slight scale breathing, slow self-rotation, and hue drifting from 185° to 305°
When to use it
"shape transition / adaptation / organic growth" expressions for abstract concepts; an atmospheric beat before an opening logo, or transition shapes between chapters
Intent
"Shapes change" can't be conveyed by crossfading two images — the viewer sees two things overlapping. A real morph must make the viewer believe this has always been **the same thing** changing its shape. Equal-point resampling plus per-point interpolation is the technical guarantee of that "sameness": no points created or destroyed, only radii changing. Morphing back closes the loop — seeing it go and return, the viewer knows this is a reversible capability, not a one-time transformation.