aura-ui-library 1.0.19 → 1.0.23

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.
Files changed (4) hide show
  1. package/README.md +107 -93
  2. package/dist/index.js +1147 -538
  3. package/dist/index.mjs +1155 -541
  4. package/package.json +1 -1
package/README.md CHANGED
@@ -1,121 +1,135 @@
1
- # Aura UI Library 🌌
1
+ # Aura UI Library
2
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.
3
+ A premium React UI component library with cinematic interactions, "quiet luxury" aesthetics, and inline-style-first customization.
4
4
 
5
- ---
5
+ Aura UI focuses on:
6
6
 
7
- ## ✨ Features
7
+ - Motion-rich components powered by GSAP and Framer Motion
8
+ - Easy drop-in usage with no external CSS requirement
9
+ - Theme-aware building blocks for modern marketing and product interfaces
8
10
 
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:
11
+ ## Installation
20
12
 
21
13
  ```bash
22
14
  npm install aura-ui-library
23
15
  ```
24
16
 
25
- Or via yarn:
26
-
27
- ```bash
28
- yarn add aura-ui-library
29
- ```
17
+ ## Peer Dependencies
30
18
 
31
- ### Peer Dependencies
32
- Ensure you have the required peer dependencies installed in your React project:
19
+ Install peer dependencies in your app:
33
20
 
34
21
  ```bash
35
- npm install gsap react-icons react-router-dom framer-motion
22
+ npm install react react-dom gsap framer-motion react-icons react-router-dom
36
23
  ```
37
24
 
38
- ---
25
+ Minimum React version: `18.0.0`
39
26
 
40
- ## 🛠 Usage
41
-
42
- ### 1. Magnetic Button
43
- A physics-based button with parallax content motion.
27
+ ## Quick Start
44
28
 
45
29
  ```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
- );
30
+ import { Button, Grid, ParallaxImage } from "aura-ui-library";
31
+
32
+ export default function App() {
33
+ return (
34
+ <>
35
+ <ParallaxImage
36
+ title="Build The Future"
37
+ subtitle="Precision React components for modern startups."
38
+ theme="dark"
39
+ accentColor="#f43f5e"
40
+ style={{ minHeight: "80vh" }}
41
+ />
42
+
43
+ <Grid
44
+ theme="light"
45
+ columns="repeat(3, 1fr)"
46
+ gap="24px"
47
+ items={[
48
+ {
49
+ id: 1,
50
+ title: "Speed",
51
+ description: "120fps animations",
52
+ span: "col-2",
53
+ },
54
+ {
55
+ id: 2,
56
+ title: "Quality",
57
+ description: "Editorial grade",
58
+ span: "normal",
59
+ },
60
+ ]}
61
+ />
62
+
63
+ <Button
64
+ variant="primary"
65
+ theme="dark"
66
+ onClick={() => console.log("Clicked")}
67
+ >
68
+ Get Started
69
+ </Button>
70
+ </>
71
+ );
72
+ }
57
73
  ```
58
74
 
59
- ### 2. Spotlight Hero
60
- A dynamic hero section with a mouse-following spotlight effect.
75
+ ## Customization
61
76
 
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
- ```
77
+ Most components support:
78
+
79
+ - `theme`: Usually `dark` or `light` (component dependent)
80
+ - `style`: Inline style object merged into the root element
73
81
 
74
- ### 3. Pinterest Grid
75
- A cinematic masonry layout with staggered entrance animations.
82
+ Example:
76
83
 
77
84
  ```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
- );
85
+ <Grid
86
+ theme="dark"
87
+ style={{
88
+ padding: "120px 20px",
89
+ backgroundColor: "#0a0a0a",
90
+ }}
91
+ />
90
92
  ```
91
93
 
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. |
94
+ ## Exported Components
95
+
96
+ The library currently exports the following components:
97
+
98
+ - `Button`
99
+ - `Navbar`
100
+ - `Spotlight`
101
+ - `Carousel`
102
+ - `ProductCard`
103
+ - `Image`
104
+ - `TextWriting`
105
+ - `SideBar`
106
+ - `ProjectShowCase`
107
+ - `Skills`
108
+ - `PinterestGrid`
109
+ - `TextImage`
110
+ - `Grid`
111
+ - `Testimonials`
112
+ - `Footer`
113
+ - `Canvas`
114
+ - `ParallaxImage`
115
+ - `SVGPathAnimation`
116
+ - `Hero`
117
+ - `HorizontalScrollSection`
118
+
119
+ ## Design Philosophy
120
+
121
+ Aura UI is built for teams that care about the feel of interfaces as much as functionality.
122
+
123
+ - Performance: Motion patterns prioritize transforms and opacity for smooth rendering.
124
+ - Portability: Components are designed to work without Tailwind, SASS, or CSS module setup.
125
+ - Customizability: Root style passthrough makes brand adaptation straightforward.
126
+
127
+ ## Build (Library)
109
128
 
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.
129
+ ```bash
130
+ npm run build
131
+ ```
117
132
 
118
- ---
133
+ ## License
119
134
 
120
- ## 📄 License
121
- ISC © [Ritik](https://github.com/RitikWeb22)
135
+ ISC © [RitikWeb22](https://github.com/RitikWeb22)