⚡ Volt UI

100+ stunning React animation components for modern web experiences

Documentation • Components • npm

---

🚀 What is Volt UI?

Volt UI is a modern React component library built for developers who want stunning animations without the hassle. Born from countless hours of experimentation, Volt UI brings together the best of Framer Motion, GSAP, and Three.js into one cohesive package.

100+ production-ready components including:

• 🎨 16 Text Animations - Wave, Glitch, Typewriter, Matrix, and more
• 🔘 10 Button Animations - Magnetic, Ripple, Liquid Fill, Shimmer
• 🃏 15 Card Effects - Tilt, Glass, Holographic, Flip, Portal
• 🖱️ 10 Cursor Effects - Trail, Magnetic, Ripple, Spotlight, Gravity
• ⏳ 17 Loaders - Pulse, Orbit, DNA, Morph, Infinity
• 🌌 16 Background Effects - Aurora, Mesh Gradient, Neural Fabric, Vortex

---

✨ Quick Start

Installation

npm install @volt-ui/react
# or
yarn add @volt-ui/react
# or
pnpm add @volt-ui/react

Peer Dependencies

npm install react react-dom framer-motion gsap three @react-three/fiber @react-three/drei

Basic Usage

import { WaveText, MagneticButton, SpotlightCard } from '@volt-ui/react';

export default function App() {
  return (
    <div>
      <WaveText text="Hello Volt UI" />
      
      <MagneticButton onClick={() => alert('Clicked!')}>
        Click Me
      </MagneticButton>
      
      <SpotlightCard>
        <h2>Amazing Card</h2>
        <p>With spotlight effect!</p>
      </SpotlightCard>
    </div>
  );
}

---

📚 Documentation

Visit our interactive documentation to:

• 👀 Preview all 100+ components live
• 🎛️ Customize props in real-time
• 📋 Copy ready-to-use code snippets
• 📖 View full source code

---

🎯 Features

• ⚡ 100+ Components - Text, buttons, cards, cursors, loaders, backgrounds
• 🎨 Fully Customizable - Every component comes with extensive props
• 📱 Responsive - Works seamlessly on all screen sizes
• 🎭 Smooth Animations - Built with Framer Motion, GSAP, and Three.js
• 🔧 TypeScript Ready - Full type definitions included
• 🪶 Tree-shakable - Import only what you need
• 🎁 Free Forever - MIT licensed, no paywalls, no limits

---

📦 Component Categories

Text Animations

import { 
  WaveText, GlitchText, TypewriterText, ShatterText,
  NeonText, SplitText, MatrixText, BounceText,
  FlipText, GradientText, ScrambleText, PulseText,
  ScatterAssemble, SpotlightText, LiquidText, MagneticText
} from '@volt-ui/react';

Button Animations

import {
  RippleButton, MagneticButton, LiquidFillButton,
  ShimmerButton, GlowPulseButton, PressButton,
  SplitRevealButton, ParticleButton, BorderGlowButton,
  ExpandButton
} from '@volt-ui/react';

Card Effects

import {
  TiltCard, GlassCard, HolographicCard, FlipCard,
  ParticleCard, SpotlightCard, MorphCard, ExpandCard,
  NeonCard, StackCard, LiquidCard, ShatterCard,
  PortalCard, MagneticCard, RippleCard
} from '@volt-ui/react';

Cursor Effects

import {
  TrailCursor, MagneticCursor, RippleCursor,
  SpotlightCursor, EmojiCursor, StringCursor,
  WebCursor, GravityCursor, InkCursor, BlackHoleCursor
} from '@volt-ui/react';

Loaders

import {
  PulseLoader, OrbitLoader, MorphLoader, DNALoader,
  ProgressLoader, RingLoader, SkeletonLoader, WaveLoader,
  GridLoader, ChasingDotsLoader, InfinityLoader,
  TypewriterLoader, ParticleRingLoader, BouncingBarLoader,
  GlitchLoader, SpiralLoader, FlipCardLoader
} from '@volt-ui/react';

Background Effects

import {
  GradientWaves, DotMatrix, AuroraBeam,
  ParticleConstellationBackground, MeshGradientBackground,
  MatrixRainBackground, VortexBackground, NeuralFabric,
  DepthField, AcidBath, Silk, Halo, Arc, Dune,
  Monsoon, WormHoleVortex
} from '@volt-ui/react';

---

🌟 Example Projects

// Landing Page Hero
import { WaveText, ParticleConstellationBackground } from '@volt-ui/react';

export default function Hero() {
  return (
    <div className="relative h-screen">
      <ParticleConstellationBackground />
      <div className="absolute inset-0 flex items-center justify-center">
        <WaveText 
          text="Welcome to the Future" 
          fontSize={72}
          waveSpeed={2}
        />
      </div>
    </div>
  );
}

// Animated Dashboard Card
import { SpotlightCard, TypewriterText } from '@volt-ui/react';

export default function DashboardCard() {
  return (
    <SpotlightCard className="p-8">
      <TypewriterText 
        text="Your stats are looking good!"
        speed={50}
      />
      <p className="mt-4">Revenue: $12,345</p>
    </SpotlightCard>
  );
}

---

🛠️ Requirements

• React 18.0.0 or higher
• React DOM 18.0.0 or higher
• Framer Motion 12.0.0 or higher
• GSAP 3.0.0 or higher
• Three.js (for 3D components)
• Tailwind CSS (optional, for some components)

---

💚 Free & Open Source

Volt UI is completely free. No paywalls, no "pro" tiers, no credit card required. Use it in your side projects, your startup, or your Fortune 500 company - we don't care. It's yours.

Why? Because we've been there. We've paid $300 for component libraries we used twice. We've dealt with licensing headaches. We've rage-quit after hitting feature limits.

Our promise: Volt UI will always be free, MIT licensed, and available to everyone. No strings attached. No rug pulls. Just good components.

If Volt UI helps you ship faster, consider:

• ⭐ Starring us on GitHub
• 🐦 Sharing on Twitter (coming soon!)
• 📝 Writing about your experience

---

🤝 Contributing

We welcome contributions! Whether it's:

• 🐛 Bug reports
• 💡 Feature requests
• 📝 Documentation improvements
• 🎨 New components

See our Contributing Guide to get started.

---

📄 License

MIT © Mahmoud

---

🔗 Links

• Documentation
• Component Gallery
• npm Package
• GitHub Repository
• Report Issues

---

Made with ⚡ by Mahmoud

Website • npm • GitHub