ScrollVelocity

Distorts the wrapped element while the user scrolls — skews on one axis and slightly scales the other. Reads ScrollTrigger.getVelocity() each tick and lerps the transform back to rest the moment scrolling stops. Pairs with oversized headlines, gradient text, and marquees.

Scroll the outer page — the headline skews with scroll velocity and lerps back to rest the moment you stop.

Ride the scroll

skew=10 · scale=1.04 · ease=0.4s

Usage

import { ScrollVelocity } from '@bwo-ui/react';

<ScrollVelocity skew={8} scale={1.04}>
  <h1>Ride the scroll</h1>
</ScrollVelocity>

// On a horizontal marquee
<ScrollVelocity axis="x" skew={6}>
  <Marquee>…</Marquee>
</ScrollVelocity>

Props

Prop	Type	Default	Description
`skew`	`number`	`8`	Max absolute skew in degrees reached at peak scroll velocity.
`scale`	`number`	`1.04`	Max scale boost on the opposite axis at peak velocity (1.0 disables scaling).
`saturate`	`number`	`1200`	Velocity (px / tick) at which the effect reaches its skew/scale ceiling.
`ease`	`number`	`0.4`	Seconds to smooth back to rest after scrolling stops.
`axis`	`'x' \| 'y'`	`'y'`	Axis to skew along. The opposite axis receives the scale boost.
`as`	`ElementType`	`'div'`	HTML tag or component to render the wrapping element as.