Svelte Animations
Command Palette
Search for a command to run

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

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.

NameTypeDefaultDescription
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.

NameTypeDefaultDescription
activeProps
MotionGridCellMotionProps - Props merged into active cells.
inactiveProps
MotionGridCellMotionProps - Props merged into inactive cells.
class
string "" Base class applied to all cells.