Getting Started
Components
Special Effects
Animations
Text Animations
Backgrounds
A shared animated background that smoothly moves between selected or hovered items.
motion-svruned
Installation
pnpm dlx shadcn-svelte@latest add http://sveltekit-prerender/r/animated-background.json
Install dependencies
Install the required packages for this component:
pnpm add motion-sv runed
Copy the Source Code
Copy and paste the following code into your project:
animated-background-context.svelte.ts
animated-background-item.svelte
animated-background.svelte
index.ts
Folder Structure
Folder Structure
Usage
Examples
Hover Tabs
Hover Cards
Dialog
Enhances modal presentations.
Popover
For small interactive overlays.
Accordion
Collapsible sections for more content.
Collapsible
Collapsible sections for more content.
Drag to Reorder
Reorder items with drag and drop.
Swipe to Delete
Delete items with swipe gestures.
Segmented Control
Props
AnimatedBackground
The root component that manages the active item and shared background animation.
| Name | Type | Default | Description |
|---|---|---|---|
children | Snippet | - | The animated background items to render. |
defaultValue | string | undefined | The ID of the initially active item. |
onValueChange | (newActiveId: string | null) => void | undefined | Called when the active item changes. |
class | string | "" | CSS classes applied to the animated background element. |
transition | Options["transition"] | undefined | Motion transition options for the shared background. |
enableHover | boolean | false | Activates items on hover instead of click. |
AnimatedBackgroundItem
An individual selectable item that participates in the shared background animation.
| Name | Type | Default | Description |
|---|---|---|---|
data-id | string | required | A unique ID used to track the active item. |
class | string | "" | Additional CSS classes applied to the item wrapper. |
children | Snippet | - | The item content to render. |