Motion / Effects
Kinetic Blur (whip-pan)
Velocity-driven directional motion blur that follows the underlying movement.
KineticBlur wraps any moving content and blurs it along its velocity vector — the canonical
whip-pan look. Drive it with a position source (from/to/startFrame/endFrame) or an explicit
velocity, and pick a technique: svg-directional (true one-axis blur), css-isotropic (cheap),
or smear-stack (offset copies). Velocity is computed by the useFrameVelocity hook.
Installation
npx shadcn@latest add @adv/kinetic-blurUsage
import { KineticBlur } from '@adv/motion';
<KineticBlur from={{ x: -180, y: 0 }} to={{ x: 180, y: 0 }} startFrame={0} endFrame={90} maxBlur={22}>
<YourMovingElement />
</KineticBlur>