@volt-ui/react 0.1.1 → 0.1.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +240 -19
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,36 +1,257 @@
|
|
|
1
|
-
|
|
1
|
+
<div align="center">
|
|
2
|
+
|
|
3
|
+
# ⚡ Volt UI
|
|
4
|
+
|
|
5
|
+
**100+ stunning React animation components for modern web experiences**
|
|
6
|
+
|
|
7
|
+
[](https://www.npmjs.com/package/@volt-ui/react)
|
|
8
|
+
[](https://www.npmjs.com/package/@volt-ui/react)
|
|
9
|
+
[](https://opensource.org/licenses/MIT)
|
|
10
|
+
|
|
11
|
+
[Documentation](https://volt-ui-two.vercel.app/components?docs=true) • [Components](https://volt-ui-two.vercel.app/components) • [npm](https://www.npmjs.com/package/@volt-ui/react)
|
|
12
|
+
</div>
|
|
2
13
|
|
|
3
|
-
|
|
14
|
+
---
|
|
4
15
|
|
|
5
|
-
|
|
16
|
+
## 🚀 What is Volt UI?
|
|
6
17
|
|
|
18
|
+
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.
|
|
19
|
+
|
|
20
|
+
**100+ production-ready components** including:
|
|
21
|
+
- 🎨 **16 Text Animations** - Wave, Glitch, Typewriter, Matrix, and more
|
|
22
|
+
- 🔘 **10 Button Animations** - Magnetic, Ripple, Liquid Fill, Shimmer
|
|
23
|
+
- 🃏 **15 Card Effects** - Tilt, Glass, Holographic, Flip, Portal
|
|
24
|
+
- 🖱️ **10 Cursor Effects** - Trail, Magnetic, Ripple, Spotlight, Gravity
|
|
25
|
+
- ⏳ **17 Loaders** - Pulse, Orbit, DNA, Morph, Infinity
|
|
26
|
+
- 🌌 **16 Background Effects** - Aurora, Mesh Gradient, Neural Fabric, Vortex
|
|
27
|
+
|
|
28
|
+
---
|
|
29
|
+
|
|
30
|
+
## ✨ Quick Start
|
|
31
|
+
|
|
32
|
+
### Installation
|
|
7
33
|
```bash
|
|
8
|
-
npm
|
|
9
|
-
# or
|
|
10
|
-
yarn dev
|
|
34
|
+
npm install @volt-ui/react
|
|
11
35
|
# or
|
|
12
|
-
|
|
36
|
+
yarn add @volt-ui/react
|
|
13
37
|
# or
|
|
14
|
-
|
|
38
|
+
pnpm add @volt-ui/react
|
|
39
|
+
```
|
|
40
|
+
|
|
41
|
+
### Peer Dependencies
|
|
42
|
+
```bash
|
|
43
|
+
npm install react react-dom framer-motion gsap three @react-three/fiber @react-three/drei
|
|
44
|
+
```
|
|
45
|
+
|
|
46
|
+
### Basic Usage
|
|
47
|
+
```tsx
|
|
48
|
+
import { WaveText, MagneticButton, SpotlightCard } from '@volt-ui/react';
|
|
49
|
+
|
|
50
|
+
export default function App() {
|
|
51
|
+
return (
|
|
52
|
+
<div>
|
|
53
|
+
<WaveText text="Hello Volt UI" />
|
|
54
|
+
|
|
55
|
+
<MagneticButton onClick={() => alert('Clicked!')}>
|
|
56
|
+
Click Me
|
|
57
|
+
</MagneticButton>
|
|
58
|
+
|
|
59
|
+
<SpotlightCard>
|
|
60
|
+
<h2>Amazing Card</h2>
|
|
61
|
+
<p>With spotlight effect!</p>
|
|
62
|
+
</SpotlightCard>
|
|
63
|
+
</div>
|
|
64
|
+
);
|
|
65
|
+
}
|
|
66
|
+
```
|
|
67
|
+
|
|
68
|
+
---
|
|
69
|
+
|
|
70
|
+
## 📚 Documentation
|
|
71
|
+
|
|
72
|
+
Visit our [interactive documentation](https://volt-ui-two.vercel.app/components?docs=true) to:
|
|
73
|
+
- 👀 Preview all 100+ components live
|
|
74
|
+
- 🎛️ Customize props in real-time
|
|
75
|
+
- 📋 Copy ready-to-use code snippets
|
|
76
|
+
- 📖 View full source code
|
|
77
|
+
|
|
78
|
+
---
|
|
79
|
+
|
|
80
|
+
## 🎯 Features
|
|
81
|
+
|
|
82
|
+
- ⚡ **100+ Components** - Text, buttons, cards, cursors, loaders, backgrounds
|
|
83
|
+
- 🎨 **Fully Customizable** - Every component comes with extensive props
|
|
84
|
+
- 📱 **Responsive** - Works seamlessly on all screen sizes
|
|
85
|
+
- 🎭 **Smooth Animations** - Built with Framer Motion, GSAP, and Three.js
|
|
86
|
+
- 🔧 **TypeScript Ready** - Full type definitions included
|
|
87
|
+
- 🪶 **Tree-shakable** - Import only what you need
|
|
88
|
+
- 🎁 **Free Forever** - MIT licensed, no paywalls, no limits
|
|
89
|
+
|
|
90
|
+
---
|
|
91
|
+
|
|
92
|
+
## 📦 Component Categories
|
|
93
|
+
|
|
94
|
+
### Text Animations
|
|
95
|
+
```tsx
|
|
96
|
+
import {
|
|
97
|
+
WaveText, GlitchText, TypewriterText, ShatterText,
|
|
98
|
+
NeonText, SplitText, MatrixText, BounceText,
|
|
99
|
+
FlipText, GradientText, ScrambleText, PulseText,
|
|
100
|
+
ScatterAssemble, SpotlightText, LiquidText, MagneticText
|
|
101
|
+
} from '@volt-ui/react';
|
|
102
|
+
```
|
|
103
|
+
|
|
104
|
+
### Button Animations
|
|
105
|
+
```tsx
|
|
106
|
+
import {
|
|
107
|
+
RippleButton, MagneticButton, LiquidFillButton,
|
|
108
|
+
ShimmerButton, GlowPulseButton, PressButton,
|
|
109
|
+
SplitRevealButton, ParticleButton, BorderGlowButton,
|
|
110
|
+
ExpandButton
|
|
111
|
+
} from '@volt-ui/react';
|
|
112
|
+
```
|
|
113
|
+
|
|
114
|
+
### Card Effects
|
|
115
|
+
```tsx
|
|
116
|
+
import {
|
|
117
|
+
TiltCard, GlassCard, HolographicCard, FlipCard,
|
|
118
|
+
ParticleCard, SpotlightCard, MorphCard, ExpandCard,
|
|
119
|
+
NeonCard, StackCard, LiquidCard, ShatterCard,
|
|
120
|
+
PortalCard, MagneticCard, RippleCard
|
|
121
|
+
} from '@volt-ui/react';
|
|
122
|
+
```
|
|
123
|
+
|
|
124
|
+
### Cursor Effects
|
|
125
|
+
```tsx
|
|
126
|
+
import {
|
|
127
|
+
TrailCursor, MagneticCursor, RippleCursor,
|
|
128
|
+
SpotlightCursor, EmojiCursor, StringCursor,
|
|
129
|
+
WebCursor, GravityCursor, InkCursor, BlackHoleCursor
|
|
130
|
+
} from '@volt-ui/react';
|
|
131
|
+
```
|
|
132
|
+
|
|
133
|
+
### Loaders
|
|
134
|
+
```tsx
|
|
135
|
+
import {
|
|
136
|
+
PulseLoader, OrbitLoader, MorphLoader, DNALoader,
|
|
137
|
+
ProgressLoader, RingLoader, SkeletonLoader, WaveLoader,
|
|
138
|
+
GridLoader, ChasingDotsLoader, InfinityLoader,
|
|
139
|
+
TypewriterLoader, ParticleRingLoader, BouncingBarLoader,
|
|
140
|
+
GlitchLoader, SpiralLoader, FlipCardLoader
|
|
141
|
+
} from '@volt-ui/react';
|
|
142
|
+
```
|
|
143
|
+
|
|
144
|
+
### Background Effects
|
|
145
|
+
```tsx
|
|
146
|
+
import {
|
|
147
|
+
GradientWaves, DotMatrix, AuroraBeam,
|
|
148
|
+
ParticleConstellationBackground, MeshGradientBackground,
|
|
149
|
+
MatrixRainBackground, VortexBackground, NeuralFabric,
|
|
150
|
+
DepthField, AcidBath, Silk, Halo, Arc, Dune,
|
|
151
|
+
Monsoon, WormHoleVortex
|
|
152
|
+
} from '@volt-ui/react';
|
|
153
|
+
```
|
|
154
|
+
|
|
155
|
+
---
|
|
156
|
+
|
|
157
|
+
## 🌟 Example Projects
|
|
158
|
+
```tsx
|
|
159
|
+
// Landing Page Hero
|
|
160
|
+
import { WaveText, ParticleConstellationBackground } from '@volt-ui/react';
|
|
161
|
+
|
|
162
|
+
export default function Hero() {
|
|
163
|
+
return (
|
|
164
|
+
<div className="relative h-screen">
|
|
165
|
+
<ParticleConstellationBackground />
|
|
166
|
+
<div className="absolute inset-0 flex items-center justify-center">
|
|
167
|
+
<WaveText
|
|
168
|
+
text="Welcome to the Future"
|
|
169
|
+
fontSize={72}
|
|
170
|
+
waveSpeed={2}
|
|
171
|
+
/>
|
|
172
|
+
</div>
|
|
173
|
+
</div>
|
|
174
|
+
);
|
|
175
|
+
}
|
|
176
|
+
```
|
|
177
|
+
```tsx
|
|
178
|
+
// Animated Dashboard Card
|
|
179
|
+
import { SpotlightCard, TypewriterText } from '@volt-ui/react';
|
|
180
|
+
|
|
181
|
+
export default function DashboardCard() {
|
|
182
|
+
return (
|
|
183
|
+
<SpotlightCard className="p-8">
|
|
184
|
+
<TypewriterText
|
|
185
|
+
text="Your stats are looking good!"
|
|
186
|
+
speed={50}
|
|
187
|
+
/>
|
|
188
|
+
<p className="mt-4">Revenue: $12,345</p>
|
|
189
|
+
</SpotlightCard>
|
|
190
|
+
);
|
|
191
|
+
}
|
|
15
192
|
```
|
|
16
193
|
|
|
17
|
-
|
|
194
|
+
---
|
|
195
|
+
|
|
196
|
+
## 🛠️ Requirements
|
|
197
|
+
|
|
198
|
+
- React 18.0.0 or higher
|
|
199
|
+
- React DOM 18.0.0 or higher
|
|
200
|
+
- Framer Motion 12.0.0 or higher
|
|
201
|
+
- GSAP 3.0.0 or higher
|
|
202
|
+
- Three.js (for 3D components)
|
|
203
|
+
- Tailwind CSS (optional, for some components)
|
|
204
|
+
|
|
205
|
+
---
|
|
206
|
+
|
|
207
|
+
## 💚 Free & Open Source
|
|
208
|
+
|
|
209
|
+
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.
|
|
210
|
+
|
|
211
|
+
**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.
|
|
212
|
+
|
|
213
|
+
**Our promise:** Volt UI will always be free, MIT licensed, and available to everyone. No strings attached. No rug pulls. Just good components.
|
|
214
|
+
|
|
215
|
+
If Volt UI helps you ship faster, consider:
|
|
216
|
+
- ⭐ [Starring us on GitHub](https://github.com/Mahmoud-ctrl/volt-ui)
|
|
217
|
+
- 🐦 Sharing on Twitter (coming soon!)
|
|
218
|
+
- 📝 Writing about your experience
|
|
219
|
+
|
|
220
|
+
---
|
|
221
|
+
|
|
222
|
+
## 🤝 Contributing
|
|
223
|
+
|
|
224
|
+
We welcome contributions! Whether it's:
|
|
225
|
+
- 🐛 Bug reports
|
|
226
|
+
- 💡 Feature requests
|
|
227
|
+
- 📝 Documentation improvements
|
|
228
|
+
- 🎨 New components
|
|
18
229
|
|
|
19
|
-
|
|
230
|
+
See our [Contributing Guide](CONTRIBUTING.md) to get started.
|
|
20
231
|
|
|
21
|
-
|
|
232
|
+
---
|
|
22
233
|
|
|
23
|
-
##
|
|
234
|
+
## 📄 License
|
|
24
235
|
|
|
25
|
-
|
|
236
|
+
MIT © [Mahmoud](https://github.com/Mahmoud-ctrl)
|
|
26
237
|
|
|
27
|
-
|
|
28
|
-
- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
|
|
238
|
+
---
|
|
29
239
|
|
|
30
|
-
|
|
240
|
+
## 🔗 Links
|
|
31
241
|
|
|
32
|
-
|
|
242
|
+
- [Documentation](https://volt-ui-two.vercel.app/components?docs=true)
|
|
243
|
+
- [Component Gallery](https://volt-ui-two.vercel.app/components)
|
|
244
|
+
- [npm Package](https://www.npmjs.com/package/@volt-ui/react)
|
|
245
|
+
- [GitHub Repository](https://github.com/Mahmoud-ctrl/volt-ui)
|
|
246
|
+
- [Report Issues](https://github.com/Mahmoud-ctrl/volt-ui/issues)
|
|
33
247
|
|
|
34
|
-
|
|
248
|
+
---
|
|
35
249
|
|
|
36
|
-
|
|
250
|
+
<div align="center">
|
|
251
|
+
<p>Made with ⚡ by <a href="https://github.com/Mahmoud-ctrl">Mahmoud</a></p>
|
|
252
|
+
<p>
|
|
253
|
+
<a href="https://volt-ui-two.vercel.app">Website</a> •
|
|
254
|
+
<a href="https://www.npmjs.com/package/@volt-ui/react">npm</a> •
|
|
255
|
+
<a href="https://github.com/Mahmoud-ctrl/volt-ui">GitHub</a>
|
|
256
|
+
</p>
|
|
257
|
+
</div>
|