# scroll rotate animation device Demo

> Demo showing how to use scroll rotate animations.

A shadcn/ui block from the [@systaliko-ui](https://systaliko-ui.vercel.app) registry, listed on [shadcn.exchange](https://shadcn.exchange/r/systaliko-ui/scroll-animation-rotate-x-demo).

- Page, with a live preview: https://shadcn.exchange/r/systaliko-ui/scroll-animation-rotate-x-demo
- Screenshot: https://abzjhwgwpdpz7ua5.public.blob.vercel-storage.com/shots/systaliko-ui/scroll-animation-rotate-x-demo-light-108584ed2293e919.png
- Registry item: https://systaliko-ui.vercel.app/r/scroll-animation-rotate-x-demo.json
- Listed: 2026-10-13, source last changed 2026-10-13

## Install

```bash
npx shadcn@latest add https://systaliko-ui.vercel.app/r/scroll-animation-rotate-x-demo.json
```

Run it in a project that has shadcn/ui set up. It adds the files below and installs what they depend on.

## Dependencies

- Registry items: `https://systaliko-ui.vercel.app/r/scroll-animation-rotate`

## Files

### `registry/demo/scroll-animations/scroll-animation-rotate-x/index.tsx`

```tsx
import {
  ScrollAnimationRotate,
  ScrollAnimationRotateContainer,
} from '@/components/systaliko-ui/scroll-animations/scroll-animation-rotate';

export const ScrollAnimationRotateXDemo = () => {
  return (
    <ScrollAnimationRotate>
      <ScrollAnimationRotateContainer
        rotationDirection="y"
        rotateRange={[0, 180]}
        className="h-96 w-2/6 mx-auto"
      >
        <div className="absolute inset-0 z-20 size-full">
          <img
            width={1015}
            height={678}
            src="https://images.unsplash.com/photo-1655853548169-646b6e0f15ca?q=80&w=2487&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
            alt="nike air jordan"
            className="size-full object-cover"
          />
        </div>
      </ScrollAnimationRotateContainer>
    </ScrollAnimationRotate>
  );
};
```