Founding price: $35, then $99 after 23:59 UTC on 4 November, then $99
Get ProRun a callback on every animation frame with the elapsed time, and pause it with a flag, cleaning up its frame request on unmount.
This item has no props to tune. Use the lens above to change theme, density, direction and more.
Use it for canvas drawing, physics, smooth counters, spring simulations and anything that must stay in step with the screen's refresh.
Do not use it for work that is not tied to painting (use useInterval), and prefer CSS transitions for simple state changes.
import { useAnimationFrame } from "@/hooks/use-animation-frame"useAnimationFrame(
(delta, time) => {
angle.current += delta * 0.001
draw(angle.current)
},
{ paused: reduceMotion }
)useAnimationFrame(callback: (delta: number, time: number) => void, options?): void
| Name | Type | Description |
|---|---|---|
callback | (delta, time) => void | delta is ms since the last frame, time is the timestamp. The newest callback is used. |
paused | boolean (option, default false) | Stop requesting frames while true. |
The first frame has a delta of 0. A frame is requested only after the previous one ran, and the request is cancelled on pause and on unmount. Nothing runs on the server.
A hook has no markup. Respect reduced motion: pass paused from usePrefersReducedMotion() and draw a still frame. Offer a pause control for loops that run longer than five seconds (WCAG 2.2.2).
The hook ships with renderHook tests (use-animation-frame.test.ts) covering its behaviour, cleanup on unmount and server-safe defaults. It is safe to render on the server.