āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā ā š shadcn/directory/imskyleen/animate-ui/primitives/animate/motion-grid ā āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā
āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā
ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā
import { MotionGridEditor } from '@/components/docs/motion-grid-editor';
<ComponentPreview name="demo-primitives-animate-motion-grid" /><MotionGrid gridSize={[5, 5]} frames={frames}>
<MotionGridCells />
</MotionGrid>
<TypeTable type={{ asChild: { description: 'Change the default rendered element for the one passed as a child, merging their props and behavior.', type: 'boolean', required: false, default: 'false', }, gridSize: { description: 'The size of the grid as [rows, columns].', type: '[number, number]', required: true, }, frames: { description: 'Array of frame data for the grid.', type: '[number, number][][]', required: true, }, duration: { description: 'The duration of the animation.', type: 'number', required: false, default: '200', }, animate: { description: 'Whether the grid should animate.', type: 'boolean', required: false, default: 'true', }, '...props': { description: 'The props of the MotionGrid', type: 'HTMLMotionProps<"div">', required: false, }, }} />
<TypeTable type={{ activeProps: { description: 'The props of the active cell.', type: 'HTMLMotionProps<"div">', required: false, }, inactiveProps: { description: 'The props of the inactive cell.', type: 'HTMLMotionProps<"div">', required: false, }, '...props': { description: 'The props of the MotionGridCells', type: 'HTMLMotionProps<"div">', required: false, }, }} />
ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā
āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā