Vue Magic UI 2.0 🎨✨

A modern Vue 3 animation library with spring physics, gesture recognition, and advanced animations that rivals Framer Motion and React Spring. Build stunning, production-ready user interfaces with physics-based animations and interactive components.

🌟 Live Demo

✨ View Live Demo ✨

See all components in action with interactive examples and code snippets!

✨ What's New in 2.0

🚀 Spring Physics System

Realistic spring animations with configurable tension, friction, and mass
Velocity-based physics that feels natural and responsive
Auto-stop detection for performance optimization

👆 Advanced Gesture Recognition

Multi-touch drag support with velocity tracking
Bounds constraints and elastic resistance
Cross-platform compatibility (mouse + touch)

📜 Scroll-Triggered Animations

Intersection Observer integration for performance
Parallax effects with customizable speed
Advanced triggers for complex scroll interactions

⚡ Performance Optimization

Reduced motion detection for accessibility compliance
Device capability assessment (GPU acceleration, battery)
Smart animation degradation based on device performance

🎯 React Feature Parity

Spring physics (react-spring equivalent)
Gesture system (react-use-gesture equivalent)
Declarative animations (Framer Motion equivalent)
Performance optimizations beyond most React libraries

🔧 Installation & Setup

# Install the library
npm install @yousefkadah/vue-magic-ui

# Import styles (required)
import '@yousefkadah/vue-magic-ui/dist/style.css'

Tree-Shakeable Imports

// Import only what you need
import { useSpring, useGesture } from '@yousefkadah/vue-magic-ui/composables'
import { easings } from '@yousefkadah/vue-magic-ui/utils'
import { Motion, FadeIn } from '@yousefkadah/vue-magic-ui'

🎯 Demo & Documentation

🌐 Live Demo: https://yousefkadah.github.io/vue-animation-libarary/

The live demo includes a comprehensive showcase with two main pages:

🏠 Home Page (Demo Home)

Beautiful landing page showcasing the library
Hero section with interactive animations
Feature highlights and statistics
Call-to-action sections

📚 Components Page (Demo Components)

Complete component documentation
Live demos for each component
Code examples and usage instructions
Props documentation and customization options
Component categories: Animations, Effects, UI Elements, Backgrounds

📦 Component Categories

🎭 Professional Effects

Meteors - Animated meteor shower effect
Aurora - Northern lights background animation
RetroGrid - 80s-style animated grid background
GridPattern - Subtle grid overlay pattern
RippleEffect - Expanding ripple animations
BorderBeam - Animated border beam effect

🔄 Interactive Components

OrbitingCircles - Elements orbiting around a center
AnimatedBeam - Animated connection lines
FloatingCard - 3D floating cards with mouse tracking
MagicButton - Professional button with multiple variants
ShimmerButton - Shimmer effect on hover

📝 Text Animations

SparkleText - Text with sparkle effects
TypewriterText - Typewriter effect with multiple texts
GradientText - Animated gradient text effects
TextReveal - Character-by-character reveal animation
NumberTicker - Smooth number counting animation
Marquee - Scrolling text marquee

🎯 Entrance Animations

FadeIn - Smooth fade-in with intersection observer
SlideIn - Slide from any direction

⚡ Loaders & Effects

PulseLoader - Pulsing dots animation
WaveLoader - Wave bars animation
ParticleEffect - Interactive particle system
MorphingShape - SVG shape morphing
GlowCard - Cards with glow effects

🎯 Usage Examples

Professional Landing Page Hero

<template>
  <div class="hero">
    <Aurora :size="1200" :colors="['#42b883', '#369870', '#2a9d8f']">
      <div class="hero-content">
        <h1>
          <SparkleText :auto-sparkle="true">
            Welcome to the Future
          </SparkleText>
        </h1>
        
        <TypewriterText 
          :text="['Innovation starts here', 'Build amazing experiences']"
          :loop="true"
          :speed="60"
        />
        
        <BorderBeam :size="300" :duration="8">
          <MagicButton variant="gradient">
            Get Started
          </MagicButton>
        </BorderBeam>
      </div>
    </Aurora>
  </div>
</template>

Interactive Dashboard

<template>
  <div class="dashboard">
    <!-- Animated metrics -->
    <div class="metrics">
      <div class="metric-card">
        <NumberTicker :value="1234567" :duration="2000" />
        <p>Total Users</p>
      </div>
      
      <div class="metric-card">
        <NumberTicker :value="99.9" :decimal-places="1" suffix="%" />
        <p>Uptime</p>
      </div>
    </div>
    
    <!-- Orbiting indicators -->
    <OrbitingCircles 
      :items="['Vue', 'React', 'Angular', 'Svelte']"
      :radius="100"
      :duration="20"
    >
      <template #center>
        <div class="orbit-center">Frameworks</div>
      </template>
    </OrbitingCircles>
    
    <!-- Animated connections -->
    <AnimatedBeam 
      :width="300"
      :height="100"
      path-color="#00D4FF"
      :curvature="0.5"
    />
  </div>
</template>

Modern Background Effects

<template>
  <div class="page">
    <!-- Retro grid background -->
    <RetroGrid 
      :size="60"
      color="#00D4FF"
      :opacity="0.3"
      :rotate-x="45"
    >
      <div class="content">
        <h1>Retro Style Content</h1>
      </div>
    </RetroGrid>
    
    <!-- Meteor shower effect -->
    <Meteors 
      :number="30"
      :colors="['#42b883', '#369870', '#2a9d8f']"
    >
      <div class="meteor-content">
        <h2>Amazing Content</h2>
      </div>
    </Meteors>
    
    <!-- Ripple interaction -->
    <RippleEffect 
      :num-ripples="3"
      :duration="2"
      ripple-color="rgba(102, 126, 234, 0.4)"
    >
      <button>Click for Ripples</button>
    </RippleEffect>
  </div>
</template>

Scrolling Marquee

<template>
  <Marquee :speed="20" :pause-on-hover="true">
    <div class="marquee-item">🎉 Breaking News</div>
    <div class="marquee-item">✨ New Features</div>
    <div class="marquee-item">🚀 Performance Updates</div>
  </Marquee>
</template>

🎨 Advanced Customization

Theme Integration

<template>
  <div class="themed-app">
    <!-- Custom color schemes -->
    <Aurora 
      :colors="themeColors.aurora"
      :duration="8"
    />
    
    <BorderBeam 
      :color-from="themeColors.primary"
      :color-to="themeColors.secondary"
    />
    
    <GradientText 
      :colors="themeColors.gradient"
      :animated="true"
    >
      Themed Text
    </GradientText>
  </div>
</template>

<script setup>
const themeColors = {
  primary: '#42b883',
  secondary: '#369870', 
  aurora: ['#42b883', '#369870', '#2a9d8f'],
  gradient: ['#42b883', '#369870', '#2a9d8f']
}
</script>

Performance Optimization

<template>
  <div>
    <!-- Reduce particles for mobile -->
    <ParticleEffect 
      :particle-count="isMobile ? 20 : 50"
      :interactive="!isMobile"
    />
    
    <!-- Conditional animations -->
    <Meteors 
      v-if="!prefersReducedMotion"
      :number="30"
    />
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'

const isMobile = ref(false)
const prefersReducedMotion = ref(false)

onMounted(() => {
  isMobile.value = window.innerWidth < 768
  prefersReducedMotion.value = window.matchMedia('(prefers-reduced-motion: reduce)').matches
})
</script>

🛠️ Development

# Clone repository
git clone https://github.com/yousefkadah/vue-animation-libarary.git

# Install dependencies  
npm install

# Start development server
npm run dev

# Build library
npm run build:lib

# Build documentation
npm run docs:build

📋 Component API Reference

Aurora

interface AuroraProps {
  size?: number        // Size of aurora effect (default: 800)
  colors?: string[]    // Array of colors (default: ['#42b883', '#369870', '#2a9d8f'])
  duration?: number    // Animation duration in seconds (default: 8)
  opacity?: number     // Opacity of effect (default: 0.3)
  invert?: boolean     // Invert colors (default: false)
}

Meteors

interface MeteorsProps {
  number?: number      // Number of meteors (default: 30)
  width?: number       // Container width (default: 800)
  height?: number      // Container height (default: 400)
  colors?: string[]    // Meteor colors (default: ['#42b883', '#369870', '#2a9d8f'])
  speed?: number       // Animation speed multiplier (default: 1)
}

BorderBeam

interface BorderBeamProps {
  size?: number        // Beam size (default: 200)
  duration?: number    // Animation duration (default: 15)
  borderWidth?: number // Border width (default: 1.5)
  colorFrom?: string   // Start color (default: '#ffaa40')
  colorTo?: string     // End color (default: '#9c40ff')
  delay?: number       // Animation delay (default: 0)
}

NumberTicker

interface NumberTickerProps {
  value: number           // Target number to animate to
  duration?: number       // Animation duration in ms (default: 2000)
  decimalPlaces?: number  // Number of decimal places (default: 0)
}

OrbitingCircles

interface OrbitingCirclesProps {
  items: any[]         // Array of items to orbit
  radius?: number      // Orbit radius (default: 100)
  duration?: number    // Orbit duration in seconds (default: 20)
  reverse?: boolean    // Reverse direction (default: false)
}

🌟 Inspiration

This library draws inspiration from:

Magic UI - React component designs
Aceternity UI - Modern animations
Framer Motion - Animation patterns

🎯 Roadmap

📄 License

MIT License - see LICENSE for details.

Built with ❤️ for the Vue.js community

Name		Name	Last commit message	Last commit date
Latest commit History 18 Commits
.github/workflows		.github/workflows
cli		cli
public		public
src		src
.gitignore		.gitignore
.npmignore		.npmignore
EXAMPLES.md		EXAMPLES.md
LICENSE		LICENSE
README.md		README.md
UPGRADE-SUMMARY.md		UPGRADE-SUMMARY.md
index.html		index.html
package-lock.json		package-lock.json
package.json		package.json
tsconfig.json		tsconfig.json
vite.config.ts		vite.config.ts

License

yousefkadah/vue-animation-libarary

Folders and files

Latest commit

History

Repository files navigation