Stagger Animations
Animated Block with orchestrated stagger animations, for your motion components, the animations are triggered by view.
Beautiful animated components, easy to change and adapt to your design.
A modern component library built on top of Shadcn registry. Designed for flexibility, built for customization, and crafted to scale across variants and use cases.
Installation
Usage
<ContainerStagger className="flex flex-col text-center items-center space-y-5 p-6">
<motion.h1
className="font-serif text-5xl font-extralight"
variants={animationVariants}
>
Your{' '}
<span className=" font-serif font-extralight text-primary">
animated & reusuble
</span>{' '}
<br />
blocks for your designs
</motion.h1>
<motion.p
variants={animationVariants}
className="leading-normal tracking-tight text-muted-foreground"
>
Crafting exceptional digital experiences through innovative design
solutions.
<br /> From concept to creation, we transform your vision into reality.
</motion.p>
<MotionButton size="sm" variants={animationVariants}>
Book free call <VideoIcon className="size-4 " />
</MotionButton>
</ContainerStagger>Examples
Increased stagger delay
Scroll to see the animation 👇🏻
the stagger value should not be greater than 500ms, as it will take longer so it is bad user experience, use increased delays for heavy UI elements like cards, and decrease it for light UI elements like text, set it to 0 for reduced motion.
Props
| Prop | Type | Default |
|---|---|---|
staggerChildren? | number | 0.2 |
delayChildren? | number | 0.2 |