Scroll Spin

Examples are the tab where the component is shown doing a job, not demonstrating a prop. The API tab already lists the props.

Press Compare. The frames are real viewports, so a layout that breaks at 320 breaks here too rather than in somebody's hands.

In a page

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

export function Hero() {
	return (
		<div className="hero-split">
			<ScrollSpin revolutions={3} tilt={6}>
				<img src="/mark.svg" alt="" width={240} height={240} />
			</ScrollSpin>
			<div>
				<h1 className="h1">Every visible element is a component.</h1>
			</div>
		</div>
	);
}

What this example is not

The site's own hero. The real one turns a three.js model through the same scroll measurement (useScrollTurnuseScrollTurnScroll position as a rotation, delivered once per frame. Drives a CSS transform or a three.js object, never React state.@sushindustries/ui · motion) rather than a flat image - ScrollSpin is the CSS-only version, for a mark that's actually an image or SVG.