hero-infinite-marquee-stack

Installation
SKILL.md

Layered Counter-Rotating Marquee Hero

What this builds

A full-viewport hero section composed of 3-5 horizontal marquee rows stacked vertically. Each row scrolls in the opposite direction of its neighbor (left, right, left, right). Scroll velocity and pointer proximity modulate the marquee speed in real time, creating an organic, reactive typographic surface. At rest, the rows drift at their base speed. On scroll, they accelerate proportionally. When the pointer enters, nearby rows speed up while distant rows slow down.

  • 3-5 stacked marquee rows filling 100vh, each with independent base speed and direction.
  • Counter-rotation: alternating left/right scroll direction per row.
  • Scroll velocity coupling: marquee speed multiplies by a factor of current scroll velocity.
  • Pointer proximity coupling: rows near the cursor accelerate, rows far from it decelerate.
  • Content duplication: enough copies to fill the viewport width with no gaps at any speed.
  • Smooth deceleration on scroll stop and pointer leave (exponential decay, not instant).
  • Graceful fallback to static text layout when prefers-reduced-motion is active.
Installs
2
First Seen
Aug 30, 2026
hero-infinite-marquee-stack — avnehsbhatia/ultraui