Delight: logo flaps, Patch, card tilt
Live demo
Section titled “Live demo”The page below is the real demo.html from the kit. Use its “Toggle dark” button for the dark theme.
Current rule (v2.0.1, 2026-11-13): Decorative demo loops start paused and have a Play/Pause control; reduced motion wins. Sprite trot uses a static frame translated on the compositor instead of animating background-position. Card flip remains available instantly with reduced motion, with no pointer tilt. React PatchMoment/NotFoundPatch accept an additive paused option. Existing artwork, exports and class names are retained. Supersedes the retained implementation/timing claims below; see docs/current-rules.md#cr-motion-01 and motion-flow.
The optional playful layer, shown only when interface effects (“delight”) are on and motion is allowed, never on kiosk, scanner, checkout or payment paths: the logo’s four flaps springing on hover or click, the 404 pet Patch (walk, nap, paw prints, a still moment that trots), a small companion walk, a glyph tilt and the member card that tilts with the pointer and flips.
Open demo.html in a browser (it links ../../tokens/tokens.css) and use “Toggle dark” to check both themes.
| File | What it is |
|---|---|
delight.css |
Logo flap spring and pop (logoUnfold.css), Patch (patch.css), companion walk and glyph tilt (delight.css) verbatim, plus the holographic card transition. |
demo.html |
A standalone page with the live animation in light and dark, replayable. |
react/ |
Copies of the real app files (see react/README.md for the imports to replace). |
previews/ |
Animated WebP and GIF previews, light and dark (regenerated by scripts/make-previews.mjs). |
Where the app uses it
Section titled “Where the app uses it”- Logo flaps:
components/delight/LogoDelight.tsx,logoUnfold.css(the real logo’sdata-logopaths; the demo uses a four-square stand-in). - Patch:
NotFoundPatch.tsx(the 404 pet, walks withrequestAnimationFrame),PatchMoment.tsx(a still frame that trots when scrolled into view),patch.css. - Companion walk, glyph tilt:
components/delight/Companion.tsx,delight.css. - Card tilt and flip:
features/members/wallet/HolographicCard.tsx.
Small human moments that make a workshop tool feel friendly, kept out of staff chrome and every flow where speed or trust matters. They carry no information; removing them loses nothing.
Timing, easing and distance
Section titled “Timing, easing and distance”Current rule (v2.0.1, 2026-11-13): The retained table/snippet below records the original app copy. Use the current executable files and the complete flow recipe for decision 399; see current rules.
| Animation | Value |
|---|---|
| Flap hover | 460 ms cubic-bezier(0.34,1.56,0.64,1); rotate 7, 7, 5, 5 deg |
| Flap pop (click) | 560 ms, same curve, overshoot 13, 13, 9, 9 deg at 40 % |
| Patch trot | 960 ms steps(8) x 2, then rests on frame 0 |
| Patch “z” | 2400 ms ease-in-out, loops (decorative) |
| Paw print | 1600 ms ease-out fade |
| Companion walk | 4 s ease-in-out, infinite, 16 px |
| Glyph tilt | 120 ms, -3 deg |
| Card tilt / flip | 650 ms cubic-bezier(0.32,0.72,0,1), rotate up to 9 deg, perspective 1200 px |
Trigger
Section titled “Trigger”Hover, focus-visible, click or pointer move, only with data-sw-delight on <html> and (for the pointer ones) a hover-capable device; the card tilts on pointer move (not touch) and device orientation (coarse pointer, permission asked).
Reduced motion
Section titled “Reduced motion”Not mounted or animation: none: the still mark, the still Patch frame and a flat card with an instant flip.
Dark theme
Section titled “Dark theme”Patch uses the -dark sprite sheets (never recoloured or mirrored by hand); the card and flaps read from tokens.
Do and don’t
Section titled “Do and don’t”- Do gate it on interface effects and motion allowed.
- Do keep Patch and the flaps rotation-only (never recolour, stretch or skew).
- Do not loop outside the two decorative exceptions (the “z” and the companion walk).
- Do not use it in staff chrome, kiosk, scanner, checkout or payment flows.
Copy-paste usage
Section titled “Copy-paste usage”Current rule (v2.0.1, 2026-11-13): The retained table/snippet below records the original app copy. Use the current executable files and the complete flow recipe for decision 399; see current rules.
<link rel="stylesheet" href="delight.css"><html data-sw-delight> … <a data-logo href="#"><svg>…<path class="sw-logo-flap sw-logo-flap-tl"/>…</svg></a>See demo.html for the flaps, the “z”, the companion walk and the tilting card.
Every other animation in the product, and the rules behind them: ../../docs/motion.md. Index of the kit: ../README.md.
Flow contract (decision 399)
Section titled “Flow contract (decision 399)”Decorative demo loops start paused and have a Play/Pause control; reduced motion wins. Sprite trot uses a static frame translated on the compositor instead of animating background-position. Card flip remains available instantly with reduced motion, with no pointer tilt. React PatchMoment/NotFoundPatch accept an additive paused option. Existing artwork, exports and class names are retained.
Complete rules, sequencing, keyboard and verification. The demo includes real static posters and explicit image Play/Pause controls.
Local token steps for batch 1B
Section titled “Local token steps for batch 1B”These aliases are local additions; global tokens are unchanged. Promote through the token batch when adopted.
| Local custom property | Definition |
|---|---|
--sw-local-duration-1600 |
calc(var(--sw-dur-slow) * 6.66666667) |
--sw-local-duration-2400 |
calc(var(--sw-dur-slow) * 10.00000000) |
--sw-local-duration-4000 |
calc(var(--sw-dur-slow) * 16.66666667) |
--sw-local-duration-460 |
calc(var(--sw-dur-slow) * 1.91666667) |
--sw-local-duration-560 |
calc(var(--sw-dur-slow) * 2.33333333) |
--sw-local-duration-650 |
calc(var(--sw-dur-slow) * 2.70833333) |
--sw-local-duration-960 |
calc(var(--sw-dur-slow) * 4.00000000) |
Source
Section titled “Source”Copied from motion/delight/ on every build: the stylesheet, demo.html, react/ copies of the app files and the previews/.