Rotates whatever you put inside it as the page scrolls. Drag the viewport buttons to see it at three widths - the amount of rotation per screen scrolled is the same at every one.
tanstacktanstack add https://adamjurek.com/r/tanstack/scroll-spin.json
shadcnpnpm dlx shadcn@latest add https://adamjurek.com/r/shadcn/scroll-spin.jsonThe rotation is written straight onto the node in a requestAnimationFrame
callback, never through React state. At 60fps a state-driven version re-renders
the subtree on every frame of every scroll, which is the one thing guaranteed
to make a light page feel heavy.
Reduced motion
Anyone with reduced motion set gets a still image. The effect never starts, rather than starting and being cancelled.
Install
tanstack add https://adamjurek.com/r/tanstack/scroll-spin.jsonshell
pnpm dlx shadcn@latest add https://adamjurek.com/r/shadcn/scroll-spin.jsonshell
pnpm add @sushindustries/ui @sushindustries/atomsshell
What you get
| Version | 0.1.0 |
| Category | motion · Scroll effects |
| Files | scroll-spin.tsx, use-scroll-turn.ts |
| Dependencies | None |
| Also installs | use-scroll-turnuseScrollTurnScroll position as a rotation, delivered once per frame. Drives a CSS transform or a three.js object, never React state.@sushindustries/ui · motion |
| Tags | scroll, transform, no-deps |
No runtime dependencies
It brings nothing with it beyond the stylesheet.