Motion Library Animation Test
This page tests the Motion library integration for UI/UX animations.
Scroll down to see various animations in action!
Sacred Animations (Data Attributes)
These elements use data-motion attributes for declarative animations.
Sacred Rhythm
Heartbeat pattern (2s loop)
Consciousness Pulse
Pulsing glow (2s loop)
Transcendence Spiral
Rotating spiral (8s loop)
Gentle Spiral
Slow rotation (20s loop)
Sacred Glow
Glowing effect (3s loop)
Bounce
Scroll indicator (2s loop)
Card Hover Effects
Hover over these cards to see Motion-powered transitions.
Card 1
Hover to lift with shadow
Card 2
Smooth Motion transitions
Card 3
Respects reduced motion
Button Hover Effects
Hover over these buttons to see pulse animations.
Sacred Interactive
Hover to see lift with sacred glow effect.
Interactive 1
Lift with golden glow
Interactive 2
Motion-powered effects
Parallax Scroll Effect
Scroll to see parallax motion (speed: 0.3).
Scroll Reveal Animation
Scroll down to reveal these items one by one.
Reveal Item 1
Fades in from bottom with stagger delay
Reveal Item 2
Each item appears after the previous
Reveal Item 3
Stagger creates a cascading effect
Reveal Item 4
All powered by Motion library
Reveal Item 5
Respects prefers-reduced-motion
Performance & Accessibility
- Motion Library Size: ~5KB (minified + gzipped)
- Reduced Motion: Automatically respects user preferences
- GPU Acceleration: Uses Web Animations API for optimal performance
- Three.js: Continues to handle 3D graphics (futuristic-effects.js)
- Declarative Usage: Use data-motion attributes for easy integration