Split Swap
TransitionsThe frame cuts into strips that slide past each other in opposite directions, swapping an analytics dashboard for a landscape photograph behind a thin accent seam
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 · 4 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.
- Panelspanels · number
How many strips the frame is cut into. 2 is the classic split swap; 3 gives a staircase, each strip sliding the opposite way to its neighbour.
now: 2
- Orientationorientation · "vertical" | "horizontal"
vertical: the frame is cut into side-by-side columns that slide up and down. horizontal: stacked bands that slide left and right, which suits wide shots with a strong horizon.
now: vertical
- Seamseam · number
Width of the accent-coloured seam along every cut, in pixels at 1080p (it scales with the frame). 4 to 8 reads as a clean edge, above 12 as a graphic stripe, 0 hides it.
now: 6
- Brandbrand · string
Brand token id, one of the keys of BRANDS. Sets the dashboard's paper and ink, the seam colour, and the palette the landscape is painted from.
now: linen
For developers · source, dependencies and provenance
Dependencies
No Tailwind, no CSS, no asset files. Inline styles only.
Source
Provenance
Prompt
A split screen transition: the frame cuts into two columns that slide past each other in opposite directions, the old shot leaving as the new one pushes in behind it, with a thin seam in the accent colour along the cut. Give it weight, a long ease with no bounce, and a little parallax so the pictures feel like they sit behind the panels. Demo it going from an analytics dashboard with a rising chart to a soft landscape photo of hills and a lake, and make the thumbnail catch it halfway so both are on screen.
