Fade Through
TransitionsTwo scenes hand off through a single frame of brand colour, giving the eye somewhere clean to reset instead of muddying both
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: Before
- Secondsecond · string
Headline of the incoming scene.
now: After
- Throughthrough · "black" | "white" | "accent"
The colour the cut passes through at its midpoint.
now: accent
- Holdhold · number
Frames each scene holds before and after the transition.
now: 48
- 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 between two scenes that passes through a brief full-frame flash of the brand colour at the cut point, rather than a straight cross-fade.
