Motion
AI Skills for Reaviz Projects
npx -y skills add reaviz/skills --skill motionAssembled from the repository path, not quoted from the project. Check it against their README if it does not work.
2 things to look at
- no licenseNo license file was found in the repository. Code published without one is not open source by default, so using it at work is a question for whoever answers licensing questions where you are.
- 4 stars4 stars. Stars are a popularity signal and not a quality one, but at this level it is likely that nobody has read this closely except its author, and you would be relying on your own review.
SKILL.md
1.4 KB, as published. Nobody here has run it
Motion
Animation wrapper components using Framer Motion for staggered group animations. Provides MotionGroup (parent) and MotionItem (child) with pre-configured variants.
Import
import { MotionGroup, MotionItem } from 'reablocks';
MotionGroup
Container that staggers children animations.
MotionGroup Props
Extends Framer Motion HTMLMotionProps<'div'>, plus:
| Prop | Type | Default | Description |
|---|---|---|---|
children | ReactNode | — | MotionItem children |
Pre-configured variants: stagger children 0.07s delay, 0.2s initial delay.
MotionItem
Individual animated item within a MotionGroup.
MotionItem Props
Extends Framer Motion HTMLMotionProps<'div'>, plus:
| Prop | Type | Default | Description |
|---|---|---|---|
direction | 'horizontal' | 'vertical' | 'vertical' | Animation direction |
children | ReactNode | — | Content |
- vertical: Animates y: -20→0 with opacity 0→1
- horizontal: Animates x: -100%→0% with opacity 0→1
Basic Usage
<MotionGroup>
<MotionItem>First item</MotionItem>
<MotionItem>Second item (staggered)</MotionItem>
<MotionItem>Third item (staggered)</MotionItem>
</MotionGroup>
Horizontal Animation
<MotionGroup>
<MotionItem direction="horizontal">Slides in from left</MotionItem>
</MotionGroup>