Page Turn
TransitionsA recipe page lifts from its edge and rolls over, the back of the sheet catching warm light and its shadow crossing the dish photographed on the next page
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 · 3 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.
- Fromfrom · "right" | "left"
The edge the page lifts from. Right turns forward, like a book read left to right; left turns back, or forward in a book read right to left.
now: right
- Curlcurl · number
Radius of the rolled edge as a fraction of the frame width. Around 0.06 is a thin, crisp page; 0.1 a soft paperback; above 0.15 heavy card rolling slowly.
now: 0.095
- Brandbrand · string
Brand token id, one of the keys of BRANDS. Sets the paper, the two print inks, the enamel and the tablecloth; the food is turned from the accent. Light brands read most like a printed book.
now: beacon
For developers · source, dependencies and provenance
Dependencies
No Tailwind, no CSS, no asset files. Inline styles only.
Source
Provenance
Prompt
A page turn transition that looks like a real book: the page lifts from the right edge and curls over, the underside catching a bit of warm light, with a soft shadow on the page underneath that moves with the curl. Put a recipe on the first page and a photo of the finished dish from above on the next one.
