Getting Started
Components
- Animated Beam
- Animated Circular Progress Bar
- Animated Gradient Text
- Animated Grid Pattern
- Animated List
- Animated Shiny Text
- Animated Theme Toggler
- Aurora Text
- Avatar Circles
- Bento Grid New
- Blur Fade
- Border Beam
- Cool Mode
- Dither Shader New
- Dock New
- Dot Pattern
- Dotted Map New
- File Tree
- Flickering Grid
- Grid Pattern
- Hero Video Dialog
- Hyper Text New
- Icon Cloud New
- Interactive Hover Button
- Lens New
- Light Rays New
- Line Shadow Text New
- Magic Card New
- Marquee
- Meteors New
- Morphing Text New
- Motion Grid New
- Neon Gradient Card New
- Number Ticker
- Orbiting Circles New
- Pixel Image New
- Pointer New
- Progressive Blur New
- Pulsating Button
- Rainbow Button
- Retro Grid New
- Ripple
- Ripple Button
- Scroll Progress
- Shimmer Button
- Shine Border New
- Smooth Cursor New
- Striped Pattern New
- Text Animate
- Typing Animation
- Video Text
- Warp Background
- Word Rotate Beta
Motion Grid
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. |