Beta

Stagger Animations

Animated Block with orchestrated stagger animations, for your motion components, the animations are triggered by view.

Your animated & reusuble
blocks for your designs

Crafting exceptional digital experiences through innovative design solutions.
From concept to creation, we transform your vision into reality.

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

Scroll to see the animation 👇🏻

Props

PropTypeDefault
staggerChildren?
number
0.2
delayChildren?
number
0.2