Wrapped Drag Index
An endless list built from exactly as many rows as it shows. Nothing is cloned or appended: every row is placed at its index times the row height plus the scroll offset, and a GSAP modifier wraps that value back into a single row-height window, so a row leaving the bottom reappears at the top in the same frame. Scroll velocity is derived by differencing the smoothed offset and fed straight into scale and rotation, so the rows squash and tilt in proportion to how hard you throw them and settle flat on their own as the interpolation catches up. Wheel and drag both write to one target eased at 0.1 a frame, over a radial-vignetted backdrop.
npx shadcn@latest add https://ui.aryank.space/r/wrapped-drag-index.jsonInstalls from ui.aryank.space. To add it by hand, copy the files in Usage below, or register the @compronents namespace via the docs.
| Prop | Type | Default | Description |
|---|---|---|---|
| entries | WrappedDragEntry[] | 10 BLANK entries | Category and name per row. The wrap window is derived from the count, so any number loops correctly. |
| dragSpeed / ease | number | 3 / 0.1 | Drag multiplier and per-frame easing. Raising ease tightens tracking and reduces the squash, since velocity is the frame delta. |
| backgroundImage | string | BLANK backdrop | Sits behind the list under a radial vignette. |
dragSpeedtextMultiplier applied to drag distance.
easetextEasing factor per frame toward the scroll target.
gsap