Motion blur
Blur along the direction of travel while something flies, measured from its velocity; at rest it is sharp.
Flight 204
Fling me. Departing 9:41.
Features
- Blur along the direction of travel, from the measured velocity, capped.
- Sharp the moment it stops.
Use it for
- Flung cards and sheets.
- Fast carousels.
Installation
- Get runets.
git clone https://github.com/ziyam-khan/runets - Copy this file into your project, keeping their folders.
- Install what it uses.
pnpm add react motion
Usage
import { MotionBlur } from 'runets'
const vx = useVelocity(x)
// blur along the travel: stdDeviation = speed / 140, capped at 18 pxAPI
| Prop | Type | What it does |
|---|---|---|
perPx | number | Pixels per second per pixel of blur (140). |
max | number | Largest blur in pixels (18). |
…MotionProps | | drag, transitions and the rest of motion’s props. |
Accessibility
- Nothing to announce; with reduced motion, avoid flinging.
Source
The code is in src/kit/motion-blur.tsx in runets, MIT licensed.