aura-ui-library 1.0.7 → 1.0.9
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 +121 -0
- package/dist/index.js +2447 -4167
- package/dist/index.mjs +2472 -4180
- package/package.json +1 -1
package/README.md
ADDED
|
@@ -0,0 +1,121 @@
|
|
|
1
|
+
# Aura UI Library 🌌
|
|
2
|
+
|
|
3
|
+
A premium, high-end React UI library focused on **"Quiet Luxury"** and editorial-grade aesthetics. Every component is powered by **GSAP** for GPU-accelerated, cinematic animations and uses strictly **inline styles** for zero-config, portable integration.
|
|
4
|
+
|
|
5
|
+
---
|
|
6
|
+
|
|
7
|
+
## ✨ Features
|
|
8
|
+
|
|
9
|
+
- **Kinetic Animations**: Smooth, physics-based motion with GSAP.
|
|
10
|
+
- **Magnetic Interactions**: Components that react organically to cursor proximity.
|
|
11
|
+
- **Glassmorphism**: Modern, translucent interfaces using backdrop filters.
|
|
12
|
+
- **No CSS Overload**: Zero external CSS files or utility-class dependencies.
|
|
13
|
+
- **Fully Customizable**: Control every aspect via props (colors, easing, timing).
|
|
14
|
+
|
|
15
|
+
---
|
|
16
|
+
|
|
17
|
+
## 🚀 Installation
|
|
18
|
+
|
|
19
|
+
Install the package via npm:
|
|
20
|
+
|
|
21
|
+
```bash
|
|
22
|
+
npm install aura-ui-library
|
|
23
|
+
```
|
|
24
|
+
|
|
25
|
+
Or via yarn:
|
|
26
|
+
|
|
27
|
+
```bash
|
|
28
|
+
yarn add aura-ui-library
|
|
29
|
+
```
|
|
30
|
+
|
|
31
|
+
### Peer Dependencies
|
|
32
|
+
Ensure you have the required peer dependencies installed in your React project:
|
|
33
|
+
|
|
34
|
+
```bash
|
|
35
|
+
npm install gsap react-icons react-router-dom framer-motion
|
|
36
|
+
```
|
|
37
|
+
|
|
38
|
+
---
|
|
39
|
+
|
|
40
|
+
## 🛠 Usage
|
|
41
|
+
|
|
42
|
+
### 1. Magnetic Button
|
|
43
|
+
A physics-based button with parallax content motion.
|
|
44
|
+
|
|
45
|
+
```jsx
|
|
46
|
+
import { MagneticButton } from 'aura-ui-library';
|
|
47
|
+
|
|
48
|
+
const App = () => (
|
|
49
|
+
<MagneticButton
|
|
50
|
+
variant="primary"
|
|
51
|
+
accentColor="#6366f1"
|
|
52
|
+
onClick={() => console.log('Clicked!')}
|
|
53
|
+
>
|
|
54
|
+
Get Started
|
|
55
|
+
</MagneticButton>
|
|
56
|
+
);
|
|
57
|
+
```
|
|
58
|
+
|
|
59
|
+
### 2. Spotlight Hero
|
|
60
|
+
A dynamic hero section with a mouse-following spotlight effect.
|
|
61
|
+
|
|
62
|
+
```jsx
|
|
63
|
+
import { Spotlight } from 'aura-ui-library';
|
|
64
|
+
|
|
65
|
+
const Hero = () => (
|
|
66
|
+
<Spotlight
|
|
67
|
+
title="Design the Future"
|
|
68
|
+
subtitle="Build high-performance interfaces with cinematic motion."
|
|
69
|
+
accentColor="#f43f5e"
|
|
70
|
+
/>
|
|
71
|
+
);
|
|
72
|
+
```
|
|
73
|
+
|
|
74
|
+
### 3. Pinterest Grid
|
|
75
|
+
A cinematic masonry layout with staggered entrance animations.
|
|
76
|
+
|
|
77
|
+
```jsx
|
|
78
|
+
import { PinterestGrid } from 'aura-ui-library';
|
|
79
|
+
|
|
80
|
+
const Gallery = () => (
|
|
81
|
+
<PinterestGrid
|
|
82
|
+
items={[
|
|
83
|
+
{ id: 1, src: "image1.jpg", title: "Project A" },
|
|
84
|
+
{ id: 2, src: "image2.jpg", title: "Project B" }
|
|
85
|
+
]}
|
|
86
|
+
columns={3}
|
|
87
|
+
gap={24}
|
|
88
|
+
/>
|
|
89
|
+
);
|
|
90
|
+
```
|
|
91
|
+
|
|
92
|
+
---
|
|
93
|
+
|
|
94
|
+
## 📦 Components Included
|
|
95
|
+
|
|
96
|
+
| Component | Description |
|
|
97
|
+
| :--- | :--- |
|
|
98
|
+
| `Navbar` | Liquid-morph navigation with magnetic links. |
|
|
99
|
+
| `Carousel` | Editorial-grade cinematic slider with auto-play. |
|
|
100
|
+
| `Spotlight` | Interactive hero section with radial lighting. |
|
|
101
|
+
| `MagneticButton` | Parallax button with proximity-based attraction. |
|
|
102
|
+
| `ProductCard` | Glassmorphism-based e-commerce card with action overlays. |
|
|
103
|
+
| `SideBar` | Retractable navigation with liquid indicators. |
|
|
104
|
+
| `ProjectShowCase`| Vertical timeline with staggered reveal cards. |
|
|
105
|
+
| `Skills` | Animated proficiency grid with liquid progress fills. |
|
|
106
|
+
| `TextWriting` | Terminal-style typing with character scrambling. |
|
|
107
|
+
| `Image` | 3D-tilt image container with cinematic reveal. |
|
|
108
|
+
| `PinterestGrid` | Masonry layout with magnetic action nodes. |
|
|
109
|
+
|
|
110
|
+
---
|
|
111
|
+
|
|
112
|
+
## 🎨 Design Philosophy
|
|
113
|
+
Aura UI is built for developers who care about the "soul" of an interface. We prioritize:
|
|
114
|
+
- **Performance**: GSAP ensures all animations run at 60fps.
|
|
115
|
+
- **Subtlety**: Micro-animations that enhance rather than distract.
|
|
116
|
+
- **Portability**: Drop a component into any codebase without setting up PostCSS, Tailwind, or SASS.
|
|
117
|
+
|
|
118
|
+
---
|
|
119
|
+
|
|
120
|
+
## 📄 License
|
|
121
|
+
ISC © [Ritik](https://github.com/RitikWeb22)
|