Match Cut Shape
TransitionsA coffee cup seen from above pushes in until its round foam fills the frame, becomes a full moon of the same size and place, and pulls back over a night treeline
This is the format it was composed for. Switch above to see it lay itself out for another: same animation, re-arranged for the frame.
What you can change · 2 settings
Everything below can be changed without touching the animation. Hand the list to an agent, or edit the values at the bottom of the component file.
- Reversereverse · boolean
Play the match the other way: open on the moon over the trees, push into it, and pull back out of the morning coffee. Use it to cut from a night scene to the next morning.
now: false
- Brandbrand · string
Brand token id, one of the keys of BRANDS. The table takes the brand's ground and the night sky takes its accent, so a light brand gives the strongest day-to-night swing.
now: paper
For developers · source, dependencies and provenance
Dependencies
No Tailwind, no CSS, no asset files. Inline styles only.
Source
Provenance
Prompt
A match cut for the start of a story. A flat white on a saucer, filmed from straight above on a pale stone table, with a few coffee beans and a napkin. Push in until the round foam fills the middle of the frame, then let the foam become the full moon at exactly the same size and position, dissolving from the circle outwards, and pull back to show the moon over a line of pine trees at night. No text: the shape does the cut.
