# 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-y-demo).

- Page, with a live preview: https://shadcn.exchange/r/systaliko-ui/scroll-animation-rotate-y-demo
- Screenshot: https://abzjhwgwpdpz7ua5.public.blob.vercel-storage.com/shots/systaliko-ui/scroll-animation-rotate-y-demo-light-45741ac3b23eac44.png
- Registry item: https://systaliko-ui.vercel.app/r/scroll-animation-rotate-y-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-y-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-y/index.tsx`

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

export const ScrollAnimationRotateYDemo = () => {
  return (
    <ScrollAnimationRotate>
      <ScrollAnimationRotateContainer
        className={`
        w-4/5 aspect-video mx-auto bg-border relative border-[20px] rounded-xl shadow-2xl
        after:block after:absolute after:top-[3%] after:left-[36%] after:h-[0.5%] after:w-[28%] after:rounded-full after:shadow-[0_0_3px_0_white] after:z-20
        `}
        rotateRange={[65, 0]}
      >
        <div className="rounded-md size-full overflow-hidden">
          <video
            className="relative z-10  size-full object-cover"
            src="https://videos.pexels.com/video-files/8084614/8084614-uhd_2560_1440_25fps.mp4"
            autoPlay
            muted
            loop
            playsInline
          />
        </div>
      </ScrollAnimationRotateContainer>
    </ScrollAnimationRotate>
  );
};
```