Crush · the bag of tricks · production motion recipes
One token system. Seven tricks. Copy, re-skin, ship.
Every effect on this page consumes the same
--ease/--dur/--spring tokens — that shared rhythm is
what reads as "designed by one hand." Lift the token block once per build, re-skin the four
brand colors, then paste any trick. Each block is fenced with
▼ BEGIN COPY / ▲ END COPY in this file's source.
This headline is Trick 02 — the masked line rise you just watched.
Trick 01 · the background melt
No section owns a background. The page melts.
Keep scrolling — cream became forest became night without a single hard
seam. The body owns one background-color with a 950ms transition; a 14-line
IntersectionObserver hands it each section's data-bg/data-ink as
that section crosses the viewport center. Works in every browser. The 2024 GSAP flex is
now a paste.
Trick 01 · continued
Ink melts with it, so contrast never breaks.
data-ink rides along on the same transition — light text
arrives exactly as the ground darkens. Use 3–5 zones max per page; the melt is a
narrative device (day→night, summer→winter, calm→urgent), not wallpaper.
Trick 03 · spring physics · Trick 05 · :has() yield
Buttons press in. Cards spring.
House physics: hover firms the button — the press has already begun — and :active seats it home. Cards spring via the linear() token. Then hover one card:
its siblings yield via :has(), zero JavaScript.
Hover any of us.
The others step back.
No JS involved.
Trick 04 · entrance choreography · Trick 06 · svg draw
Everything arrives on one rhythm.
These blocks entered staggered on the shared curve —
--i declares the order, the tokens do the rest. And this underline is the
pencil-class SVG draw, firing when the scene enters view:
Trick 08 · count-up · Trick 09 · reveal wipe · Trick 10 · parallax
0 countries, counted on arrival.
The number eased in when this scene hit the viewport. The image below wiped
open on the same trigger, and inside its frame the photo drifts on native CSS
animation-timeline: view() — scroll and watch it move against its crop.
Trick 11 · sticky-stack cards
Cards that pin and stack.
Each card sticks at the same offset; the next slides over it. Plain
position:sticky — normal scrolling, no jacking, big agency energy.
Trick 12 · blend-mode knockout
The type is a window — the photo lives inside the letters. The move from the Gemini coast build, one CSS property.
BIG SKY
COUNTRY.
Trick 13 · hover-reveal index · Trick 14 · duotone rescue
Hover the index. Then see an ordinary photo become brand material.
- Mowing 01
- Snow 02
- The neighbourhood 03
Trick 15 · before / after slider
Drag the seam. Trades gold.
One range input drives a clip-path — keyboard and touch work for free. Roofs, cleans, renos, snow contracts: show the work, don't claim it.
Summer
Winter
Trick 16 · marquee · Trick 17 · micro-craft
And the three one-liners nobody notices but everybody feels: select this text (brand selection color), look at the scrollbar (tinted), open this:
A smoothly-animating accordion, no JS
Native details + interpolate-size. FAQs for law and trades earn their keep.
Trick 07 · below — the mega-footer scaffold
The finale is structure + one brand idea.
The scaffold below is the bones (brand column leads, edge-hugging, legal bar closes). The finale idea — the drawn shortlist, the closing aphorism, the orbit — comes from the brand. Peak-end: it's the last thing they see, so it's never a link dump.