PRO

Drifting Card Marquee

A pinned section that pans an oversized wordmark sideways while cards drift across it on hand-authored paths. Each card gets its own four point tracks for vertical position and rotation, and its progress is a delayed, doubled slice of the section progress, so the cards start in sequence and each finishes early rather than all sharing one clock. The card is placed by walking those tracks: progress times three picks the segment and the remainder interpolates within it, which is what makes a card arc and tumble instead of travelling in a straight line. GSAP ScrollTrigger and Lenis.

Component

Nebulon Does it again.

Immersive Training Simulations

Revolutionize hands-on learning with lifelike training environments, enhancing skill development and retention.

Virtual Design Collaboration

Enable remote teams to co-create in 3D spaces, speeding up design iterations and boosting innovation.

Immersive Product Demos

Showcase products in a fully interactive, 360-degree experience, making presentations more engaging and memorable.

Remote Healthcare Solutions

Empower healthcare professionals with virtual consultations and remote diagnostics in immersive 3D environments.

Interactive Entertainment

Deliver a new dimension of gaming and entertainment with fully immersive and interactive virtual experiences.

(Your next section goes here)

Install
npx shadcn@latest add https://ui.aryank.space/r/drifting-card-marquee.json

Installs from ui.aryank.space. To add it by hand, copy the files in Usage below, or register the @compronents namespace via the docs.

Files

API
PropTypeDefaultDescription
cardsDriftingCard[]5 BLANK cardsTitle, description, and image per drifting card.
transforms[number[], number[]][]5 authored routesPer card, four y-percent stops and four rotation stops. Must have one entry per card.
embeddedbooleantrueOwn the scroll container. Set false to drive it from the window scroll.
Customize
headingtext

The oversized wordmark that pans.

outroCopytext

Copy in the section after the pin.

Dependencies
gsaplenis