sub-pixel-inertia-scrolllisted

Give deep-scroll editorial pages and presentation layouts a weighted, "velvety" scroll feel — parallax planes drifting at reduced velocity factors (0.3 background / 1.0 foreground), scroll-cued arrivals with a heavy-tailed rest curve (cubic-bezier(0.1, 0.9, 0.2, 1), 800ms+), lerp-smoothed decorative layers, gentle scroll-snap decks — all on top of native scrolling, never replacing it. Use this whenever the user asks for parallax, "smooth scroll", "scroll animations", "reveal on scroll", "cinematic scrolling", "inertia", "Lenis/Locomotive-style" scrolling, watermark/background type that moves, a scroll-snap presentation, or says the page "feels flat/jerky when scrolling" — and whenever reviewing code that hijacks wheel events or moves the whole page with transforms.
fernandokylas/editorial-web-craft · ★ 2 · Web & Frontend · score 73

Install: claude install-skill fernandokylas/editorial-web-craft

# Sub-Pixel Inertia Scroll The premium scroll feel — content that glides to a stop, background layers that drift slower than the copy, sections that *arrive* rather than appear — comes from three things: layered velocity, heavy-tailed deceleration, and sub-pixel interpolation between scroll positions. None of them require taking over the scroll. The browser's own scroll is already interpolated at the compositor with the OS's inertia curve; anything that replaces it (wheel-event hijack, a `transform`-moved page canvas) loses find-in-page, space/PageDown, scroll restoration, anchor links, screen-reader navigation, and — on trackpads — fights the user's hand. So the rule: **native scroll stays the track; you add planes and arrivals on top of it.** ## Three mechanisms **1. Parallax planes on scroll-driven animations.** Background layers move at a fraction of scroll velocity — a watermark numeral at 0.3, a mid plane at 0.6, content at 1.0. CSS scroll-driven animations do this natively, on the compositor, with no scroll listener: ```css .parallax-meta-bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; font: 900 clamp(8rem, 20vw, 18rem)/1 var(--font-display); color: var(--text-main); opacity: 0.06; animation: plane-drift linear both; animation-timeline: view(); animation-range: entry 0% exit 100%; --drift: calc(-40vh * 0.3); } @keyframes plane-drift { from { transform: translateY(calc(var(--drift) * -1)); } to { transform: translateY(var(--d