Mask Wipe Shape
TransitionsThe next scene is revealed through a circle, star or rounded square growing past the frame, with an accent outline that fades as it clears
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 — 5 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.
- Firstfirst · string
Headline of the outgoing scene.
now: The old way
- Secondsecond · string
Headline of the incoming scene.
now: The new one
- Shapeshape · "circle" | "star" | "square"
The shape the next scene is revealed through.
now: circle
- Outlineoutline · boolean
Draw an accent outline on the growing shape.
now: true
- Brandbrand · string
Brand token id — one of the keys of BRANDS.
now: slate
For developers — source, dependencies and provenance
Dependencies
No Tailwind, no CSS, no asset files. Inline styles only.
Source
Provenance
Prompt
A transition where a shape grows from the centre until it fills the frame, with the next scene visible inside it and a thin accent outline on the shape while it grows.
