Animation

A collection of pure CSS entrance animations with WCAG 2.2 accessibility support.

Installation

npx vayu-ui init

npx vayu-ui add animation

Usage

WCAG Compliant: Animations are automatically disabled if "Reduce Motion" is enabled in your OS settings.

Fade

Fade (Default)

Delay

Fade (Delay: Long)

Left

Slide Left

Right

Slide Right

Slide Up

Down

Slide Down

Zoom (Small)

Zoom (Medium)

Zoom (Large)

Bnc

Bounce (Small)

Bnc

Bounce (Large)

Flip

Flip Up (X-Axis)

Flip

Flip Left (Y-Axis)

180°

Rotate (180°)

-200°

Rotate (-200°)

Roll

Roll Left

Roll

Roll Right

Jack In

JackInTheBox

Hinge

Loop

Infinite Loop

<Animation.Fade>
  <div className="w-14 h-14 bg-indigo-500 rounded-md shadow-lg flex items-center justify-center text-white font-bold text-sm">
    Fade
  </div>
</Animation.Fade>

<Animation.Fade delay="long">
  <div className="w-14 h-14 bg-indigo-400 rounded-md shadow-lg flex items-center justify-center text-white font-bold text-sm">
    Delay
  </div>
</Animation.Fade>

<Animation.Slide direction="left">
  <div className="w-14 h-14 bg-blue-500 rounded-md shadow-lg flex items-center justify-center text-white font-bold text-xs">
    Left
  </div>
</Animation.Slide>

<Animation.Slide direction="right">
  <div className="w-14 h-14 bg-blue-500 rounded-md shadow-lg flex items-center justify-center text-white font-bold text-xs">
    Right
  </div>
</Animation.Slide>

<Animation.Slide direction="up">
  <div className="w-14 h-14 bg-blue-600 rounded-md shadow-lg flex items-center justify-center text-white font-bold text-xs">
    Up
  </div>
</Animation.Slide>

<Animation.Slide direction="down">
  <div className="w-14 h-14 bg-blue-600 rounded-md shadow-lg flex items-center justify-center text-white font-bold text-xs">
    Down
  </div>
</Animation.Slide>

<Animation.Zoom scale="small">
  <div className="w-14 h-14 bg-green-500 rounded-full shadow-lg flex items-center justify-center text-white font-bold text-xs">
    Sm
  </div>
</Animation.Zoom>

<Animation.Zoom scale="medium">
  <div className="w-14 h-14 bg-green-500 rounded-full shadow-lg flex items-center justify-center text-white font-bold text-xs">
    Md
  </div>
</Animation.Zoom>

<Animation.Zoom scale="large">
  <div className="w-14 h-14 bg-green-500 rounded-full shadow-lg flex items-center justify-center text-white font-bold text-xs">
    Lg
  </div>
</Animation.Zoom>

<Animation.Bounce scale="small">
  <div className="w-14 h-14 bg-yellow-500 rounded-md shadow-lg flex items-center justify-center text-black font-bold text-xs">
    Bnc
  </div>
</Animation.Bounce>

<Animation.Bounce scale="large">
  <div className="w-14 h-14 bg-yellow-500 rounded-md shadow-lg flex items-center justify-center text-black font-bold text-xs">
    Bnc
  </div>
</Animation.Bounce>

<Animation.Flip direction="up">
  <div className="w-14 h-14 bg-purple-500 rounded-md shadow-lg flex items-center justify-center text-white font-bold text-xs">
    Flip
  </div>
</Animation.Flip>

<Animation.Flip direction="left">
  <div className="w-14 h-14 bg-purple-600 rounded-md shadow-lg flex items-center justify-center text-white font-bold text-xs">
    Flip
  </div>
</Animation.Flip>

<Animation.Rotate degrees={180}>
  <div className="w-14 h-14 bg-red-500 rounded-md shadow-lg flex items-center justify-center text-white font-bold text-xs">
    180
  </div>
</Animation.Rotate>

<Animation.Rotate degrees={-200}>
  <div className="w-14 h-14 bg-red-600 rounded-md shadow-lg flex items-center justify-center text-white font-bold text-xs">
    -200
  </div>
</Animation.Rotate>

<Animation.Roll direction="left">
  <div className="w-14 h-14 bg-pink-500 rounded-md shadow-lg flex items-center justify-center text-white font-bold text-xs">
    Roll
  </div>
</Animation.Roll>

<Animation.Roll direction="right">
  <div className="w-14 h-14 bg-pink-600 rounded-md shadow-lg flex items-center justify-center text-white font-bold text-xs">
    Roll
  </div>
</Animation.Roll>

<Animation.JackInTheBox>
  <div className="w-14 h-14 bg-teal-500 rounded-md shadow-lg flex items-center justify-center text-white font-bold text-[8px] text-center leading-tight">
    Jack In
  </div>
</Animation.JackInTheBox>

<Animation.Hinge duration="slower">
  <div className="w-14 h-14 bg-orange-500 rounded-md shadow-lg flex items-center justify-center text-white font-bold text-xs">
    Hinge
  </div>
</Animation.Hinge>

<Animation.Bounce iteration="infinite">
  <div className="w-14 h-14 bg-cyan-500 rounded-full shadow-lg flex items-center justify-center text-white font-bold text-xs">
    Loop
  </div>
</Animation.Bounce>

Anatomy

<Animation.Fade duration="normal" delay="none" iteration={1} fillMode="none">
  {/* Content to animate */}
</Animation.Fade>

<Animation.Slide direction="left" duration="normal" delay="none">
  {/* Content to animate */}
</Animation.Slide>

<Animation.Bounce scale="medium" duration="normal">
  {/* Content to animate */}
</Animation.Bounce>

<Animation.Flip direction="up" duration="normal">
  {/* Content to animate */}
</Animation.Flip>

<Animation.Rotate degrees={-200} duration="normal">
  {/* Content to animate */}
</Animation.Rotate>

<Animation.Zoom scale="medium" duration="normal">
  {/* Content to animate */}
</Animation.Zoom>

<Animation.Roll direction="left" duration="normal">
  {/* Content to animate */}
</Animation.Roll>

<Animation.JackInTheBox duration="normal">
  {/* Content to animate */}
</Animation.JackInTheBox>

<Animation.Hinge duration="normal" fillMode="forwards">
  {/* Content to animate */}
</Animation.Hinge>

Accessibility

Reduced Motion: All animation components detect the prefers-reduced-motion: reduce media query via the usePrefersReducedMotion hook. When enabled, animations are replaced with opacity-100 so content appears instantly without motion.
Keyboard Support: Animation wrappers are standard <div> elements. They do not trap focus or intercept keyboard events.
Focus Behavior: Animations do not affect focus management. The animated wrapper is transparent to focus order.
ARIA Attributes: No ARIA attributes are added by the animation wrapper. Consumers should add appropriate roles and labels to the content inside.

Screen readers are not affected by CSS animations. Content inside animation wrappers is announced normally as soon as it enters the DOM, regardless of the visual animation state. When prefers-reduced-motion is active, the element renders with opacity-100, ensuring no delay in content accessibility for assistive technologies.

Component Folder Structure

Animation/
├── Animation.tsx              # Root compound component and sub-component composition
├── FadeAnimation.tsx          # Fade-in animation
├── SlideAnimation.tsx         # Slide-in animation (directional)
├── BounceAnimation.tsx        # Bounce-in animation (scale variants)
├── FlipAnimation.tsx          # Flip-in animation (X/Y axis)
├── RotateAnimation.tsx        # Rotate-in animation (custom degrees)
├── ZoomAnimation.tsx          # Zoom-in animation (scale variants)
├── RollAnimation.tsx          # Roll-in animation (directional)
├── JackInTheBoxAnimation.tsx  # Pop-up animation
├── HingeAnimation.tsx         # Swing-and-drop exit animation
├── hooks.ts                   # usePrefersReducedMotion hook
├── utils.ts                   # buildAnimationClasses utility
├── types.ts                   # TypeScript types and mapping objects
├── index.ts                   # Public API exports
└── README.md                  # Internal documentation

Props

Base Props

All animation sub-components accept these props:

Prop	Type	Default	Description
`children`	`ReactNode`	—	Content to animate
`duration`	`"slower"` \| `"slow"` \| `"normal"` \| `"fast"` \| `"faster"`	`"normal"`	Animation speed
`delay`	`"none"` \| `"short"` \| `"medium"` \| `"long"`	`"none"`	Delay before the animation starts
`iteration`	`1` \| `2` \| `3` \| `"infinite"`	`1`	Number of times the animation repeats
`fillMode`	`"none"` \| `"forwards"` \| `"backwards"` \| `"both"`	`"none"`	How styles persist before/after animation
`className`	`string`	—	Additional CSS classes
`onAnimationEnd`	`AnimationEventHandler<HTMLDivElement>`	—	Fires when the animation completes
`onAnimationStart`	`AnimationEventHandler<HTMLDivElement>`	—	Fires when the animation starts

Animation.Slide

Prop	Type	Default	Description
`direction`	`"up"` \| `"down"` \| `"left"` \| `"right"`	`"left"`	Direction the content slides in from

Animation.Flip

Prop	Type	Default	Description
`direction`	`"up"` \| `"down"` \| `"left"` \| `"right"`	`"up"`	Flip axis and direction (`up`/`down` = X-axis, `left`/`right` = Y-axis)

Animation.Roll

Prop	Type	Default	Description
`direction`	`"up"` \| `"down"` \| `"left"` \| `"right"`	`"left"`	Direction the content rolls in from

Animation.Bounce

Prop	Type	Default	Description
`scale`	`"small"` \| `"medium"` \| `"large"`	`"medium"`	Starting scale intensity

Animation.Zoom

Prop	Type	Default	Description
`scale`	`"small"` \| `"medium"` \| `"large"`	`"medium"`	Starting scale intensity

Animation.Rotate

Prop	Type	Default	Description
`degrees`	`number`	`-200`	Starting rotation angle in degrees

Duration Values

Value	Duration
`slower`	2000ms
`slow`	1500ms
`normal`	1000ms
`fast`	700ms
`faster`	500ms

Delay Values

Value	Delay
`none`	0ms
`short`	150ms
`medium`	300ms
`long`	500ms

Animation

On this page