Getting Started
Components
Special Effects
Animations
Text Animations
Backgrounds
A frame-based 2D grid animation primitive with active/inactive cell states.
motion-sv
Installation
pnpm dlx shadcn-svelte@latest add https://sv-animations.vercel.app/r/motion-grid.json
Install dependencies
Install the required packages for this component:
pnpm add motion-sv
Copy the Source Code
Copy and paste the following code into your project:
motion-grid.svelte
motion-grid-cells.svelte
use-motion-grid-context.svelte.ts
types.ts
index.ts
Folder Structure
Folder Structure
Examples
Manual State Switcher
Importing
Custom Cell Props
Use activeProps and inactiveProps to style and animate cell states without
changing frame data.
Child Render Prop
This uses the child render-prop to customize the outer wrapper.
Props
MotionGrid
Grid container that provides frame state and layout context.
| Name | Type | Default | Description |
|---|---|---|---|
gridSize | [number, number] | required | Grid dimensions as [columns, rows]. |
frames | Frames | required | Frame sequence of active [x, y] cells. |
duration | number | 200 | Frame interval in milliseconds. |
animate | boolean | true | Toggles automatic frame cycling. |
child | Snippet<[ { props: MotionGridCellMotionProps } ]> | - | Render-prop wrapper for custom root rendering. |
class | string | "" | Additional classes for the grid root. |
MotionGridCells
Renders all cells and applies active/inactive presentation.
| Name | Type | Default | Description |
|---|---|---|---|
activeProps | MotionGridCellMotionProps | - | Props merged into active cells. |
inactiveProps | MotionGridCellMotionProps | - | Props merged into inactive cells. |
class | string | "" | Base class applied to all cells. |