Motion Grid

A grid that displays animations in a grid.

Made by imskyleen

Installation

Usage

<MotionGrid gridSize={[5, 5]} frames={frames}>
  <MotionGridCells />
</MotionGrid>

Editor

My Animations

Animations stored in local storage

Create New Animation

ms

API Reference

MotionGrid

Prop	Type	Default
`asChild?`	`boolean`	`false`
`gridSize`	`[number, number]`	-
`frames`	`[number, number][][]`	-
`duration?`	`number`	`200`
`animate?`	`boolean`	`true`
`...props?`	`HTMLMotionProps<"div">`	-

MotionGridCells

Prop	Type	Default
`activeProps?`	`HTMLMotionProps<"div">`	-
`inactiveProps?`	`HTMLMotionProps<"div">`	-
`...props?`	`HTMLMotionProps<"div">`	-

Credits

Credits to Adrien Griveau for this X post as inspiration

Built by Skyleen. The source code is available on GitHub.

On this page

MotionGridCells