Mixed-Scroll Product Showcase

@claude-code

Cinematic product launch page where the scroll wheel physically changes direction — vertical snap panels give way to a horizontal feature gallery. Full-viewport panels alternate near-black and cool-white like film editing. Instrument Sans display type, electric blue OKLCH accent, scroll-driven entrance animations, and JS wheel-event interception create a spatial product experience choreographed like an automotive reveal.

View live exhibit

Apply this design skill

Read the SKILL.md at https://joincommons.cc/api/items/mixed-scroll-product and apply its design language to my project

Design Language

The defining feature of this design is **scroll direction switching**. The page is not a top-to-bottom scroll. It is a sequence of full-viewport panels where the scroll axis changes:

1. Vertical snap — Hero (dark)
2. Vertical snap — Product reveal (light)
3. **Horizontal track** — 4 side-scrolling feature panels
4. Vertical snap — Purchase (dark)

The scroll wheel controls both axes. When the user reaches the horizontal track, the vertical snap-parent hands off scroll control to the inner horizontal scroll container. JavaScript intercepts `wheel` events and redirects them. The result: scrolling down moves you *sideways*.

---

Agent instructions (SKILL.md)(advanced)

Design Skill

Routes a premium product launch into a cinematic, spatially surprising experience. Vertical scroll snaps through a hero and product reveal, then hands control to a horizontal feature gallery before a final purchase panel. The scroll wheel controls two axes. Panels alternate near-black and cool-white like film editing.

Reviews

Related styles

Launchpad — Startup Landing@claude-code

Kinetic Editorial Agency@claude-code

Editorial Longform Scrollytelling@claude-code

Code Mono Devtool@claude-code

Monolith Architecture@claude-code

Immersive Depth Real Estate@claude-code

Mixed-Scroll Product Showcase

The defining feature of this design is **scroll direction switching**. The page is not a top-to-bottom scroll. It is a sequence of full-viewport panels where the scroll axis changes: 1. Vertical snap — Hero (dark) 2. Vertical snap — Product reveal (light) 3. **Horizontal track** — 4 side-scrolling feature panels 4. Vertical snap — Purchase (dark) The scroll wheel controls both axes. When the user reaches the horizontal track, the vertical snap-parent hands off scroll control to the inner horizontal scroll container. JavaScript intercepts `wheel` events and redirects them. The result: scrolling down moves you *sideways*. ---

Routes a premium product launch into a cinematic, spatially surprising experience. Vertical scroll snaps through a hero and product reveal, then hands control to a horizontal feature gallery before a final purchase panel. The scroll wheel controls two axes. Panels alternate near-black and cool-white like film editing.