Scroll Spin

@sushindustries/ui

Rotates its children with the page scroll.

2 min read
View as Markdown

Install commands are on Home, attached from the registry. This tab starts after the install worked.

Use it

import { ScrollSpin } from "@sushindustries/ui";

export function Hero() {
	return (
		<ScrollSpin revolutions={2} tilt={8}>
			<img src="/mark.svg" alt="" />
		</ScrollSpin>
	);
}
tsx

The component emits class names from @sushindustries/atoms@sushindustries/atomsThe design tokens and the atomic utilities built on them. One stylesheet, no build step, no framework.package, so import that stylesheet once at your root:

import "@sushindustries/atoms/atoms.css";
ts
UsesuseScrollTurnuseScrollTurnScroll position as a rotation, delivered once per frame. Drives a CSS transform or a three.js object, never React state.@sushindustries/ui · motion