Two marquee rows that react to scroll speed: the big outlined words lean, stretch and fill with light as you scroll faster, and both rows flip direction with the scroll. A speed gauge reads the velocity live.
npx shadcn@latest add https://hyperblur.dev/r/motion-skew-marquee.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/motion-skew-marquee.tsx.
import { MotionSkewMarquee } from "@/components/hyperblur/motion-skew-marquee"
<MotionSkewMarquee words={["Design", "Build", "Grow"]} chips={["Web", "Brand", "Film"]} />| Prop | Type | Default | Description |
|---|---|---|---|
| words | string[] | ["Strategy", "Identity", "Motion", "Product", "Launch"] | Large outlined words in the first row. |
| chips | string[] | 8 service chips | Pills in the second row. Empty array leaves the row empty. |
| speed | number | 60 | Resting speed in pixels per second. |
| skew | number | 14 | Maximum lean in degrees at full speed. |
| sensitivity | number | 1 | Multiplier for how strongly scroll velocity affects the rows. |
| showMeter | boolean | true | Shows the scroll speed gauge above the rows. |
| accent | string | "#2f7bff" | Color of the separators, gauge and fill tint. |
| progress | number | undefined | Controlled progress from 0 to 1. Its rate of change drives the velocity instead of the page scroll. |
| autoPlay | boolean | false | Plays bursts of simulated scroll so the effect shows without scrolling. |
| duration | number | 5 | Seconds for one cycle of simulated bursts in autoplay. |