Setting the file. One moment.
Skill 18 · Hyperframes Animation
Subchapter 18.92
rules/press-release-spring.mdMarkdown7 KBView on GitHub
Separates input (linear compression) from output (spring recovery) to create tactile feel: the overshoot is a natural byproduct of the spring config, not manually coded, with secondary motion (shadow shrink, release burst, background glow) layered on the same trigger frame. This is a reaction on an element already resting on screen — an arrival that springs in from nothing is ; add a visible cursor actor and it becomes .
Two phases split at the release:
scale: 1 → PRESS_SCALE, shadow shrinks). Linear, not spring — the dip must read as instant/tactile, not squishy.back.out(BOUNCE_FACTOR) spring back to 1.0. Optional burst glow ring expands behind the button; optional environmental glow fades in.State continuity is critical: the release tween’s start value MUST equal the press tween’s end value, or the spring snaps to a different position. GSAP threads this automatically when both tweens target the same property at adjacent positions — RELEASE_START = PRESS_START + PRESS_DUR; a gap or overlap breaks it.
<div class="press-stage">
<div class="bg-glow" id="bg-glow"></div>
<!-- Burst sits BEHIND the button (z-index 1 vs 2), same footprint, blurred
radial gradient, opacity 0. bg-glow is a full-stage radial at negative
inset so it extends past the stage edges. -->
<div class="burst" id="burst"></div>
<button class="btn" id="btn">{buttonLabel}</button>
</div>// Phase 1 — press (linear compression)
tl.to(
"#btn",
{ scale: PRESS_SCALE, boxShadow: "{btnPressedShadow}", duration: PRESS_DUR, ease: "power1.in" },
PRESS_START,
);
// Phase 2 — release (spring back; start scale == PRESS_SCALE by adjacency)
tl.to(
"#btn",
{
scale: 1,
boxShadow: "{btnRestShadow}",
duration: RELEASE_DUR,
ease: `back.out(${BOUNCE_FACTOR})`,
},
RELEASE_START,
);
// Phase 3 — burst glow pops behind the button, then fades
tl.fromTo(
"#burst",
{ scale: 1, opacity: 0 },
{
scale: BURST_PEAK_SCALE,
opacity: BURST_PEAK_OPACITY,
duration: BURST_GROW_DUR,
ease: "power2.out",
},
RELEASE_START,
);
tl.to("#burst", { opacity: 0, duration: BURST_FADE_DUR, ease: "power2.in" }, BURST_FADE_START);
// Phase 4 — environmental glow fades in after release
tl.to(
"#bg-glow",
{ opacity: BG_GLOW_PEAK_OPACITY, duration: BG_GLOW_FADE_DUR, ease: "power2.out" },
RELEASE_START,
);PRESS_SCALE ~0.96, BOUNCE_FACTOR ~1.4, burst scale/opacity reduced.PRESS_SCALE ~0.88, BOUNCE_FACTOR ~2.5, burst maxed.backgroundColor at the same timeline positions as the scale tweens. Same state-continuity rule.{successColor} at RELEASE_START and pop a checkmark via a separate back.out(CHECK_BOUNCE) tween (1.4–2.0, firmer than the button’s bounce — a punctuating “stamp”; pop 0.3–0.6 s) at the same position. The button is now terminal — no further presses expected.| token | range | notes |
|---|---|---|
| button footprint | ≥ 3–5% of canvas area | a 320×68 button at 1080p is ~1% and the press reads as visually insignificant |
| PRESS_SCALE | 0.88 dramatic · 0.92 default · 0.96 subtle | never <0.85 (broken) or >0.98 (no perceptible dip) |
| PRESS_DUR | 0.10–0.30 s | shorter = snappier; must be shorter than RELEASE_DUR (input faster than spring recovery) |
| RELEASE_DUR | 0.40–0.90 s | shorter = tight pop; longer = loose, wobbly settle |
| BOUNCE_FACTOR | 1.4 soft · 2.0 firm · 2.8 cartoony | or elastic.out(amplitude, period) for a rubbery oscillation instead of one overshoot |
| RELEASE_START | = PRESS_START + PRESS_DUR | adjacency = automatic state continuity |
| BURST_PEAK_SCALE | 3 subtle · 6 default · 8 max | beyond ~8 the radial gradient pixelates visibly |
| BURST_PEAK_OPACITY | 0.4–1.0 | grow ≈ fade, 0.4–0.7 s each; blur 40–100 px (hard ring → ambient haze) |
| BG_GLOW_PEAK_OPACITY | 0.1 subtle · 0.25 default · 0.45 max | higher washes the whole composition; fade-in 0.6–1.0 s; inset −300…−500 px at 1080p |
Color tokens: pressed surface darker than rest; rest shadow large + diffuse, pressed small + tight (the button “sinks toward the surface”); burst gradient darker + more saturated than {btnBg} — same-color glow looks washed out; bg glow a low-opacity tint of the button’s hue family.
RELEASE_START = PRESS_START + PRESS_DUR.transform-origin: 50% 50%) or the button collapses asymmetrically.z-index: 1, button z-index: 2; in front it occludes the button at peak opacity.boxShadow and filter on the same element — they compete in the layout pipeline; shadow on the button, blur on the separate burst layer.t = DURATION − 0.2 s reads as “flashed and gone.”spring-pop-entrance (the ENTRANCE counterpart — arrival, not reaction) · physics-press-reaction (this press with a visible cursor actor) · cursor-click-ripple (the cursor click that triggers the press) · sine-wave-loop (idle micro-float BEFORE the press) · center-outward-expansion (badge burst synced to the release).