Theme Invert Section
A dark editorial page flips to a warm paper-white theme while the Daylight chapter is on screen: five CSS design tokens tween on the body, the artwork inverts and a fixed difference-blend logo stays legible through the flip.
- Scroll
- scroll · color-background
- gsap
- scrolltrigger
- intermediate
- light perf
- mobile: full
- reduced-motion ✓
AI prompt
Recreate this effect with any AI tool
Paste into Claude, Cursor, v0, Lovable or Bolt. 1538 words of exact values — rewritten live as you tune the Playground.
Prompts are for subscribers
Subscribe to copy this prompt in every format, rewritten live to match your Playground settings.
Loading prompt…
Couldn’t load the prompt
Check your connection and try again.
Source
Full source code
Source code is for subscribers
Subscribe to read, copy and download the full HTML, CSS and JavaScript of this demo.
Loading source code…
Couldn’t load the source code
Check your connection and try again.
Featured light Fullscreen Section Snap
GSAP Observer turns every wheel tick, swipe or arrow key into one full-height section change — a 1s expo.inOut scroll, a staggered content reveal on arrival, a rolling '03 / 06' counter — and refuses to over-scroll past the ends.
- gsap
- scrolltrigger
light Header Style Transition
A transparent header floats over a full-bleed fjord hero; once 120px of content has slid under it, a blurred solid bar fades in, a hairline draws across, the CTA turns accent and the bar compacts — switched at a threshold, scrubbed, or at the hero edge.
- gsap
- scrolltrigger
light Section Dot Indicator
A fixed column of six dots tracks six full-height chapters: the active dot grows, turns accent and reveals its chapter name; hovering shows any label; clicking scrolls smoothly to that section with ScrollToPlugin.
- gsap
- scrolltrigger
light Headline to Logo Scale
A viewport-filling serif wordmark shrinks and travels into the header's logo slot as you scroll a pinned hero — Flip.fit measures the exact transform — while the header background and nav links fade in behind it.
- gsap
- scrolltrigger
- flip