[Dvi-Rayal]

What

Adds playground/sneaker/, a standalone static demo of Lenis driving a product-launch style page (a fictional sneaker brand, "KODO Pulse 01"). It's three files (index.html, style.css, main.js) with no build step and no image assets. The sneaker is an inline SVG built in main.js, so it can be recoloured through CSS custom properties.

Why

The existing playground pages test individual features one at a time. This one shows the patterns people actually build on top of Lenis, all working together in one realistic page:

• Pinned exploded view: a position: sticky section where scroll progress separates the shoe's SVG layers and steps through a spec list.
• Vertical → horizontal track: a pinned colorway carousel. Section height is derived from the track width.
• Velocity-reactive marquees: speed, direction and skew come from lenis.velocity / lenis.direction.
• Word-by-word reveal, hero parallax driven by one CSS variable (--hp), and a nav that hides on scroll down.
• Lenis APIs used: anchors: true for in-page links, lenis.stop() / start() around the intro, and lenis.scrollTo() for "back to top", the bag button and keyboard focus inside the horizontal track.

Every scroll-linked effect reads lenis.scroll inside a single RAF loop. Section offsets are cached on resize, so the loop doesn't trigger layout reads.

Notes for reviewers

• Lenis comes from the CDN, not the local build: lenis@1.3.26 is loaded from jsDelivr with SRI hashes, so the page opens without a build. The other static.html demos point at ../../dist/lenis.min.js. I can switch to that if you'd rather it exercise the local build.
• Not an Astro page: it's not wired into the Astro playground nav. Open playground/sneaker/index.html directly or serve the folder.
• Accessibility: reduced motion turns off the autonomous animations (marquee drift, float, intro, count-up); Lenis's own respectReducedMotion default handles scrolling. Focus moves to the anchor target, and tabbing into an off-screen colorway card scrolls it into view.
• Overflow: main uses overflow-x: clip rather than hidden (on body it gets propagated to the viewport), so sticky keeps working and mobile Chrome doesn't widen the layout viewport.
• Checks: biome check playground/sneaker passes. Manually tested in Chromium at 1280×800, 758×960 and 375×812, with no console errors and no horizontal overflow at any scroll depth.

🤖 Generated with Claude Code

[vercel]

@Dvi-Rayal is attempting to deploy a commit to the Darkroom Team on Vercel.

A member of the Team first needs to authorize it.