# ContainerScroll

> Scroll-driven animation that rotates and scales a card from tilted to flat.

- Package: `fancy-ui-svelte` (Svelte 5 + Tailwind CSS v4)
- Category: Layout
- Tags: layout, scroll, animation, 3d, perspective
- Docs: https://fancy-ui.rama.app/docs/components/container-scroll
- Source: https://github.com/RamaHerbin/fancy-ui/tree/main/src/lib/fancy-ui/container-scroll

## Import

```svelte
<script lang="ts">
  import { ContainerScroll } from 'fancy-ui-svelte';
</script>
```

Setup (once per project): `npm install fancy-ui-svelte`, then add `@import "fancy-ui-svelte/tailwind.css";` after `@import "tailwindcss";` in your main CSS file. Full guide: https://fancy-ui.rama.app/llms.txt

React: `import { ContainerScroll } from 'fancy-ui-react';` (same prop names; `class` becomes `className`, snippets become `ReactNode`).

## Snippets

| Snippet | Description |
| --- | --- |
| `titleContent` | Header/title content that translates upward on scroll |
| `cardContent` | Content inside the animated card that tilts flat on scroll |

## Examples

### Basic Usage

```svelte
<script lang="ts">
	import { ContainerScroll } from "fancy-ui-svelte";
</script>

<ContainerScroll>
	{#snippet titleContent()}
		<h2 class="text-foreground text-4xl font-semibold dark:text-white">
			Unleash the power of <br />
			<span class="mt-1 text-4xl leading-none font-bold md:text-[6rem]">Scroll Animations</span>
		</h2>
	{/snippet}
	{#snippet cardContent()}
		<div
			class="flex size-full flex-col items-center justify-center bg-gradient-to-br from-violet-500 to-purple-700 p-8 text-white"
		>
			<h3 class="text-3xl font-bold">Your Content Here</h3>
			<p class="mt-4 max-w-md text-center text-lg text-white/80">
				This card rotates from 20 degrees to 0 as you scroll. It also scales smoothly to create a
				dramatic reveal effect.
			</p>
		</div>
	{/snippet}
</ContainerScroll>
```