VayuUI
Design System

Animation

Bring your UI to life with Vayu UI's comprehensive animation system, featuring entrance effects, attention seekers, and continuous cycles.

Animation

Animation adds personality and feedback to your UI. Vayu UI provides a comprehensive set of keyframe animations organized into three categories: Entrance, Attention, and Cycles.

Animation Categories

CategoryPurposeWhen to Use
EntranceElements appearing on screenPage loads, modal opens, items added
AttentionDrawing focus to elementsNotifications, highlights, errors
CyclesContinuous motionLoading states, decorative elements

Entrance Animations

Entrance animations bring elements onto the screen. Use them when content first appears.

Fade In

The most subtle entrance. Great for content that should appear gently.

This content fades in smoothly

// Basic fade in
<div className="animate-fade-in">
  Content appears with a fade
</div>

// Staggered fade in (using inline style)
<div className="animate-fade-in" style={{ animationDelay: '100ms' }}>
  First item
</div>
<div className="animate-fade-in" style={{ animationDelay: '200ms' }}>
  Second item
</div>
<div className="animate-fade-in" style={{ animationDelay: '300ms' }}>
  Third item
</div>

Slide Animations

Slide animations bring content in from a specific direction. Perfect for drawers, panels, and notifications.

AnimationDirectionUse Case
animate-slide-in-leftFrom leftSidebar opening
animate-slide-in-rightFrom rightPanel, offcanvas
animate-slide-in-upFrom bottomBottom sheet, snackbar
animate-slide-in-downFrom topDropdown, notification

Slide Left

Slide Right

Slide Up

Slide Down

// Sidebar opening from left
<aside className="animate-slide-in-left fixed inset-y-0 left-0 w-64 bg-sidebar">
  <nav>{/* Navigation */}</nav>
</aside>

// Bottom sheet sliding up
<div className="animate-slide-in-up fixed bottom-0 inset-x-0 bg-elevated rounded-t-overlay">
  Bottom sheet content
</div>

// Notification sliding from top
<div className="animate-slide-in-down fixed top-4 right-4 bg-elevated rounded-surface p-4">
  New notification!
</div>

// Panel sliding from right
<div className="animate-slide-in-right fixed inset-y-0 right-0 w-80 bg-surface">
  Panel content
</div>

Bounce In

A playful entrance with a slight overshoot. Great for success states and modals.

✓ Success!

// Success message
<div className="animate-bounce-in bg-success text-success-content rounded-surface p-4">
  ✓ Operation completed!
</div>

// Modal with bounce
<div className="animate-bounce-in bg-elevated rounded-overlay p-6">
  <h2>Welcome!</h2>
</div>

// Icon appearing
<CheckCircle className="animate-bounce-in text-success w-8 h-8" />

Flip Animations

3D flip effects for card reveals and badge pops.

AnimationAxisUse Case
animate-flip-in-xHorizontalCard flip
animate-flip-in-yVerticalBadge pop

Flip X

Flip Y

// Card flip reveal
<div className="animate-flip-in-x bg-surface rounded-surface p-6">
  <p>Hidden content revealed!</p>
</div>

// Badge pop
<span className="animate-flip-in-y bg-brand text-brand-content rounded-full px-2">
  New!
</span>

Zoom In

Scale up from small to full size. Perfect for modals and dialogs.

Zoomed in!

// Modal with zoom
<div className="animate-zoom-in bg-elevated rounded-overlay p-6">
  <h2>Modal Title</h2>
  <p>Modal content</p>
</div>

// Image preview
<img src="/preview.jpg" className="animate-zoom-in rounded-surface" />

Rotate In

Spin into view. Great for icons and decorative elements.

🎉

// Icon entrance
<Icon className="animate-rotate-in" />

// Decorative element
<div className="animate-rotate-in">
  Decorative content
</div>

Roll Animations

Playful rolling entrance effects.

AnimationDirection
animate-roll-inFrom left, rolling clockwise
animate-roll-in-rightFrom right, rolling counter-clockwise
animate-roll-in-upFrom bottom, rolling
animate-roll-in-downFrom top, rolling

Rolled in!

<div className="animate-roll-in">Fun content</div>

Special Entrances

AnimationDescriptionUse Case
animate-jack-in-the-boxScales and rotates into viewPlayful pop, tooltips
animate-hingeFalls off the screenExit animation

🎁 Jack in the Box!

// Playful tooltip
<div className="animate-jack-in-the-box">
  Surprise!
</div>

// Exit animation (use with caution)
<div className="animate-hinge">
  This will fall away
</div>

Cycle Animations

Cycle animations run continuously. Use them for loading states and decorative elements.

Float

Gentle up-and-down motion. Great for decorative elements.

✨

// Floating decorative element
<div className="animate-float">
  <Icon className="w-8 h-8" />
</div>

// Floating card
<div className="animate-float bg-surface rounded-surface p-6">
  Floating content
</div>

Float Particle

Particles that float upward and fade out. Perfect for background effects.

<div className="relative overflow-hidden">
  {[...Array(10)].map((_, i) => (
    <div
      key={i}
      className="animate-float-particle absolute bottom-0 w-2 h-2 bg-brand rounded-full"
      style={{
        left: `${Math.random() * 100}%`,
        animationDelay: `${Math.random() * 5}s`,
      }}
    />
  ))}
</div>

Orbit

Continuous rotation around a center point.

<div className="relative w-24 h-24">
  <div className="animate-orbit absolute top-0 left-1/2 -translate-x-1/2">
    <div className="w-4 h-4 bg-brand rounded-full" />
  </div>
</div>

Morph Blob

Shape-shifting animation for organic, blob-like elements.

<div
  className="animate-morph-blob bg-brand w-24 h-24"
  style={{ borderRadius: '60% 40% 30% 70% / 60% 30% 70% 40%' }}
/>

Spin Animations

Slow rotations for decorative purposes.

AnimationSpeedDirection
animate-spin-slow60sClockwise
animate-reverse-spin40sCounter-clockwise
// Slow spinning decoration
<div className="animate-spin-slow">
  <Icon className="w-12 h-12" />
</div>

// Counter-rotating element
<div className="animate-reverse-spin">
  <Icon className="w-12 h-12" />
</div>

Marquee

Infinite scrolling for tickers and carousels.

AnimationBehavior
animate-marquee-scrollContinuous left scroll
animate-marquee-ping-pongBounces back and forth
Item 1Item 2Item 3Item 4Item 1Item 2Item 3Item 4
<div className="overflow-hidden">
  <div className="animate-marquee-scroll flex gap-8 whitespace-nowrap">
    {/* Duplicate content for seamless loop */}
    <span>Announcement 1</span>
    <span>Announcement 2</span>
    <span>Announcement 3</span>
    <span>Announcement 1</span>
    <span>Announcement 2</span>
    <span>Announcement 3</span>
  </div>
</div>

Toast Animations

Special animations for toast notifications.

AnimationPurpose
animate-toast-enterToast appearing
animate-toast-exitToast disappearing

Toast notification

// Toast component
function Toast({ message, isVisible }) {
  return (
    <div className={isVisible ? 'animate-toast-enter' : 'animate-toast-exit'}>
      {message}
    </div>
  );
}

Accessibility

Reduced Motion

Vayu UI respects user preferences for reduced motion. All animations are automatically disabled when the user has prefers-reduced-motion: reduce enabled.

This is built into the CSS:

@media (prefers-reduced-motion: reduce) {
  * {
    animation: none !important;
  }
}

Best Practices

Do ✅Don't ❌
Use animations for feedback and hierarchyUse animations just because they're cool
Keep animations subtle and quickCreate long, distracting animations
Test with reduced motion enabledForget about accessibility
Use entrance animations for new contentAnimate everything at once
Respect user preferencesOverride reduced motion settings

Checking for Reduced Motion

If you need to check programmatically:

'use client';
import { useEffect, useState } from 'react';

export function usePrefersReducedMotion() {
  const [prefersReducedMotion, setPrefersReducedMotion] = useState(false);

  useEffect(() => {
    const mediaQuery = window.matchMedia('(prefers-reduced-motion: reduce)');
    setPrefersReducedMotion(mediaQuery.matches);

    const handler = (event) => setPrefersReducedMotion(event.matches);
    mediaQuery.addEventListener('change', handler);
    return () => mediaQuery.removeEventListener('change', handler);
  }, []);

  return prefersReducedMotion;
}

// Usage
function MyComponent() {
  const prefersReducedMotion = usePrefersReducedMotion();

  return <div className={prefersReducedMotion ? '' : 'animate-fade-in'}>Content</div>;
}

Quick Reference

All Animations

Entrance

ClassDurationUse
animate-fade-in1sGentle appearance
animate-slide-in-left1sSidebar, drawer
animate-slide-in-right1sPanel, offcanvas
animate-slide-in-up1sBottom sheet
animate-slide-in-down1sDropdown, notification
animate-bounce-in1sSuccess, modal
animate-flip-in-x1sCard reveal
animate-flip-in-y1sBadge pop
animate-rotate-in1sIcon entrance
animate-zoom-in1sModal, dialog
animate-roll-in1sPlayful entrance
animate-roll-in-right1sPlayful entrance
animate-roll-in-up1sPlayful entrance
animate-roll-in-down1sPlayful entrance
animate-jack-in-the-box1sPlayful pop
animate-hinge2sExit animation

Cycles

ClassDurationUse
animate-float6sFloating elements
animate-float-particle15sParticle effects
animate-orbit20sOrbiting elements
animate-morph-blob20sShape morphing
animate-spin-slow60sSlow rotation
animate-reverse-spin40sReverse rotation
animate-marquee-scroll∞Infinite scroll
animate-marquee-ping-pong∞Bouncing scroll

Toast

ClassDurationUse
animate-toast-enter300msToast appear
animate-toast-exit300msToast disappear

CSS Variables

--animate-fade-in: fade-in 1s ease-out;
--animate-float: float 6s ease-in-out infinite;
--animate-float-particle: float-particle 15s linear infinite;
--animate-morph-blob: morph-blob 20s ease-in-out infinite;
--animate-orbit: orbit 20s linear infinite;
--animate-slide-in-left: slide-in-left 1s both;
--animate-slide-in-right: slide-in-right 1s both;
--animate-slide-in-up: slide-in-up 1s both;
--animate-slide-in-down: slide-in-down 1s both;
--animate-bounce-in: bounce-in 1s ease;
--animate-flip-in-x: flip-in-x 1s ease-in;
--animate-flip-in-y: flip-in-y 1s ease-in;
--animate-rotate-in: rotate-in 1s ease-out;
--animate-zoom-in: zoom-in 1s ease-out;
--animate-roll-in: roll-in 1s ease-out;
--animate-roll-in-right: roll-in-right 1s ease-out;
--animate-roll-in-up: roll-in-up 1s ease-out;
--animate-roll-in-down: roll-in-down 1s ease-out;
--animate-jack-in-the-box: jack-in-the-box 1s ease-out;
--animate-hinge: hinge 2s ease-in-out;
--animate-spin-slow: spin-slow 60s linear infinite;
--animate-reverse-spin: reverse-spin 40s linear infinite;
--animate-toast-enter: toast-enter 300ms cubic-bezier(0.22, 1, 0.36, 1) both;
--animate-toast-exit: toast-exit 300ms ease-in both;

Effects

Add depth and polish to your UI with Vayu UI's semantic radius, shadow, and blur utilities.

Components

Collection of pre-built components for Vayu UI.

On this page

AnimationAnimation CategoriesEntrance AnimationsFade InSlide AnimationsBounce InFlip AnimationsZoom InRotate InRoll AnimationsSpecial EntrancesCycle AnimationsFloatFloat ParticleOrbitMorph BlobSpin AnimationsMarqueeToast AnimationsAccessibilityReduced MotionBest PracticesChecking for Reduced MotionQuick ReferenceAll AnimationsEntranceCyclesToastCSS Variables