awesome-coverflow-carousel 0.1.0

package/LICENSE

@@ -0,0 +1,22 @@
+MIT License
+
+Copyright (c) 2024 AwesomeCoverflowCarousel Contributors
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+

package/LICENSE.txt

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) [2026-27] [Pravinkumar Dabade]
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,437 @@
+# AwesomeCoverflowCarousel
+
+A beautiful, interactive 3D Coverflowcarousel component for React with smooth animations, multiple themes, and flexible data handling. Perfect for showcasing products, portfolios, or any collection of items in an eye-catching carousel format.
+
+## Features
+
+- **3D CoverflowCarousel** - Visually stunning 3D perspective effects
+- **4 Built-in Themes** - Dark, Light, Neon, and Glass themes
+- **Multiple Control Methods** - Mouse drag, keyboard arrows, touch & programmatic
+- **Auto-Rotate** - Automatic carousel rotation with customizable speed
+- **Responsive** - Works seamlessly on different screen sizes
+- **Smooth Physics** - Realistic inertia and friction animations
+- **Glow Effects** - Beautiful focus glow for the active item
+- **Highly Customizable** - Full control over speed, friction, perspective, and more
+
+## Installation
+
+```bash
+npm install awesome-coverflow-carousel
+```
+
+Or with pnpm:
+
+```bash
+pnpm add awesome-coverflow-carousel
+```
+
+Or with yarn:
+
+```bash
+yarn add awesome-coverflow-carousel
+```
+
+## Quick Start
+
+```jsx
+import { AwesomeCoverflowCarousel } from 'awesome-coverflow-carousel';
+import 'awesome-coverflow-carousel/dist/style.css';
+
+const slides = [
+  { title: 'Slide 1', description: 'First slide', image: 'url1.jpg' },
+  { title: 'Slide 2', description: 'Second slide', image: 'url2.jpg' },
+];
+
+export default function App() {
+  return (
+    <div
+      style={{
+        minHeight: '100vh',
+        padding: '48px 20px 64px',
+        background:
+          'radial-gradient(70% 50% at 50% 35%, rgba(0,245,255,0.18) 0%, rgba(0,0,0,0) 60%), linear-gradient(180deg, #05070f 0%, #060b1a 55%, #070b12 100%)',
+        color: '#e6f0ff',
+        display: 'flex',
+        flexDirection: 'column',
+        alignItems: 'center',
+        justifyContent: 'center',
+        gap: '18px',
+      }}
+    >
+      <h1 style={{ margin: 0, fontSize: 'clamp(28px, 5vw, 56px)', letterSpacing: '-0.02em' }}>
+        Explore the Universe of <span style={{ color: '#00f5ff' }}>Possibilities</span>
+      </h1>
+      <p style={{ margin: 0, opacity: 0.7 }}>
+        Explore the full spectrum of products by clicking on any card
+      </p>
+
+      <div style={{ width: '100%', maxWidth: 980, height: '60vh', minHeight: 420 }}>
+        <AwesomeCoverflowCarousel data={slides} theme="dark" />
+      </div>
+    </div>
+  );
+}
+```
+
+## Data Format
+
+Each item in the carousel requires the following structure:
+
+```js
+const slide = {
+  title: 'Slide 1',            // Required: Title displayed on the card
+  description: 'First slide',  // Optional: Subtitle or description
+  image: 'url1.jpg',           // Optional: Image URL
+  tag: 'Featured',             // Optional: Tag label
+  color: '#ff6b6b',            // Optional: Background color (hex)
+  onClick: () => {},           // Optional: Click handler
+};
+```
+
+For TypeScript users, this object shape maps directly to the `SlideData` type exported by the package.
+
+## Component Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `data` | `SlideData[]` | **Required** | Array of slide objects to display in the carousel |
+| `autoRotate` | `boolean` | `true` | Enable automatic carousel rotation |
+| `rotationSpeed` | `number` | `2800` | Time in milliseconds between auto-rotations |
+| `friction` | `number` | `0.88` | Friction coefficient for inertia animations (0-1). Higher = more damping |
+| `focusGlow` | `boolean` | `true` | Enable glow effect on the focused card |
+| `theme` | `'dark' \| 'light' \| 'neon' \| 'glass'` | `'dark'` | Visual theme for the carousel |
+| `perspective` | `number` | `1100` | 3D perspective depth in pixels |
+| `onFocusChange` | `(index: number) => void` | `undefined` | Callback fired when the focused item changes |
+| `className` | `string` | `undefined` | Custom CSS class for the carousel container |
+
+## Available Themes
+
+### Dark Theme
+Modern dark theme with cyan accents. Perfect for tech products and modern designs.
+
+```jsx
+<AwesomeCoverflowCarousel data={slides} theme="dark" />
+```
+
+### Light Theme
+Clean light theme with violet accents. Great for portfolios and creative showcases.
+
+```jsx
+<AwesomeCoverflowCarousel data={slides} theme="light" />
+```
+
+### Neon Theme
+Vibrant neon magenta and cyan theme. Bold and eye-catching for entertainment and gaming.
+
+```jsx
+<AwesomeCoverflowCarousel data={slides} theme="neon" />
+```
+
+### Glass Theme
+Frosted glass effect with semi-transparent cards. Modern and elegant for premium brands.
+
+```jsx
+<AwesomeCoverflowCarousel data={slides} theme="glass" />
+```
+
+## Usage Examples
+
+### Example 1: Static Data Source
+
+Use hardcoded data directly in your component:
+
+```jsx
+import { AwesomeCoverflowCarousel } from 'awesome-coverflow-carousel';
+import 'awesome-coverflow-carousel/dist/style.css';
+
+export default function StaticDataExample() {
+  const staticSlides = [
+    {
+      title: 'Product A',
+      description: 'Premium quality product',
+      image: 'https://images.unsplash.com/photo-1505740420928-5e560c06d30e?w=500&h=300&fit=crop',
+      tag: 'Featured',
+      onClick: () => console.log('Product A clicked')
+    },
+    {
+      title: 'Product B',
+      description: 'Best seller item',
+      image: 'https://images.unsplash.com/photo-1523275335684-37898b6baf30?w=500&h=300&fit=crop',
+      tag: 'Sale',
+      onClick: () => console.log('Product B clicked')
+    },
+    {
+      title: 'Product C',
+      description: 'New arrival',
+      image: 'https://images.unsplash.com/photo-1505740420928-5e560c06d30e?w=500&h=300&fit=crop',
+      tag: 'New',
+      onClick: () => console.log('Product C clicked')
+    },
+    {
+      title: 'Product D',
+      description: 'Limited edition',
+      image: 'https://images.unsplash.com/photo-1517457373614-b7152f800fd1?w=500&h=300&fit=crop',
+      tag: 'Limited',
+      onClick: () => console.log('Product D clicked')
+    },
+  ];
+
+  return (
+    <div style={{ width: '100%', height: '100vh', display: 'flex', flexDirection: 'column' }}>
+      <h1 style={{ textAlign: 'center', padding: '20px' }}>Static Data Example</h1>
+      <div style={{ flex: 1 }}>
+        <AwesomeCoverflowCarousel
+          data={staticSlides}
+          theme="dark"
+          onFocusChange={(index) => console.log('Focused item:', index)}
+        />
+      </div>
+    </div>
+  );
+}
+```
+
+### Example 2: JSON File Data Source
+
+Load carousel data from a JSON file:
+
+```jsx
+import { useEffect, useState } from 'react';
+import { AwesomeCoverflowCarousel } from 'awesome-coverflow-carousel';
+import 'awesome-coverflow-carousel/dist/style.css';
+
+export default function JSONDataExample() {
+  const [slides, setSlides] = useState([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState(null);
+
+  useEffect(() => {
+    // Load slides from JSON file in public folder
+    fetch('/carousel-data.json')
+      .then((response) => {
+        if (!response.ok) throw new Error('Failed to load data');
+        return response.json();
+      })
+      .then((data) => {
+        setSlides(data);
+        setLoading(false);
+      })
+      .catch((err) => {
+        setError(err.message);
+        setLoading(false);
+      });
+  }, []);
+
+  if (loading) return <div style={{ textAlign: 'center', padding: '20px' }}>Loading...</div>;
+  if (error) return <div style={{ textAlign: 'center', padding: '20px', color: 'red' }}>Error: {error}</div>;
+
+  return (
+    <div style={{ width: '100%', height: '100vh', display: 'flex', flexDirection: 'column' }}>
+      <h1 style={{ textAlign: 'center', padding: '20px' }}>JSON File Data Example</h1>
+      <div style={{ flex: 1 }}>
+        <AwesomeCoverflowCarousel
+          data={slides}
+          theme="light"
+          autoRotate={true}
+          rotationSpeed={3000}
+          onFocusChange={(index) => console.log('Focused item:', index)}
+        />
+      </div>
+    </div>
+  );
+}
+```
+
+**Sample `carousel-data.json` (place in `public` folder):**
+
+```json
+[
+  {
+    "title": "Portfolio Project 1",
+    "description": "Award-winning design system",
+    "image": "https://images.unsplash.com/photo-1561070791-2526d30994b5?w=500&h=300&fit=crop",
+    "tag": "Design",
+    "color": "#1e3a8a"
+  },
+  {
+    "title": "Portfolio Project 2",
+    "description": "Enterprise web application",
+    "image": "https://images.unsplash.com/photo-1517694712202-14dd9538aa97?w=500&h=300&fit=crop",
+    "tag": "Development",
+    "color": "#064e3b"
+  },
+  {
+    "title": "Portfolio Project 3",
+    "description": "Mobile app with 10M+ downloads",
+    "image": "https://images.unsplash.com/photo-1560807707-38cc612d91b3?w=500&h=300&fit=crop",
+    "tag": "Mobile",
+    "color": "#5b1f39"
+  },
+  {
+    "title": "Portfolio Project 4",
+    "description": "Real-time data visualization",
+    "image": "https://images.unsplash.com/photo-1516321295223-4f2d3f2cf1e1?w=500&h=300&fit=crop",
+    "tag": "Analytics",
+    "color": "#78350f"
+  }
+]
+```
+
+### Example 3: REST API Data Source
+
+Fetch carousel data from a REST API:
+
+```jsx
+import { useEffect, useState } from 'react';
+import { AwesomeCoverflowCarousel } from 'awesome-coverflow-carousel';
+import 'awesome-coverflow-carousel/dist/style.css';
+
+export default function RESTAPIExample() {
+  const [slides, setSlides] = useState([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState(null);
+  const [focusedItem, setFocusedItem] = useState(null);
+
+  useEffect(() => {
+    // Fetch from a REST API endpoint
+    fetch('https://api.example.com/carousel-items')
+      .then((response) => {
+        if (!response.ok) throw new Error(`HTTP ${response.status}`);
+        return response.json();
+      })
+      .then((data) => {
+        // Transform API response to match SlideData format
+        const transformedData = data.map((item) => ({
+          title: item.name || item.title,
+          description: item.summary || item.description,
+          image: item.thumbnail || item.image,
+          tag: item.category || item.type,
+          color: item.accentColor,
+          onClick: () => console.log(`Clicked: ${item.id}`)
+        }));
+        setSlides(transformedData);
+        setLoading(false);
+      })
+      .catch((err) => {
+        setError(err.message);
+        setLoading(false);
+      });
+  }, []);
+
+  const handleFocusChange = (index) => {
+    setFocusedItem(slides[index] || null);
+    console.log(`Focused on: ${slides[index]?.title}`);
+  };
+
+  if (loading) {
+    return (
+      <div style={{ textAlign: 'center', padding: '20px', color: '#999' }}>
+        Loading carousel data...
+      </div>
+    );
+  }
+
+  if (error) {
+    return (
+      <div style={{ textAlign: 'center', padding: '20px', color: 'red' }}>
+        Error loading data: {error}
+      </div>
+    );
+  }
+
+  return (
+    <div style={{ width: '100%', height: '100vh', display: 'flex', flexDirection: 'column' }}>
+      <h1 style={{ textAlign: 'center', padding: '20px' }}>REST API Data Example</h1>
+      
+      {focusedItem && (
+        <div style={{
+          textAlign: 'center',
+          padding: '10px 20px',
+          backgroundColor: 'rgba(0, 245, 255, 0.1)',
+          borderBottom: '1px solid rgba(0, 245, 255, 0.2)',
+        }}>
+          <p>Currently viewing: <strong>{focusedItem.title}</strong></p>
+          {focusedItem.description && <p style={{ fontSize: '0.9em', color: '#aaa' }}>{focusedItem.description}</p>}
+        </div>
+      )}
+
+      <div style={{ flex: 1 }}>
+        <AwesomeCoverflowCarousel
+          data={slides}
+          theme="neon"
+          autoRotate={false}
+          friction={0.85}
+          perspective={1200}
+          focusGlow={true}
+          onFocusChange={handleFocusChange}
+        />
+      </div>
+
+      <div style={{
+        textAlign: 'center',
+        padding: '15px',
+        fontSize: '0.85em',
+        color: '#888',
+        borderTop: '1px solid rgba(255, 255, 255, 0.1)',
+      }}>
+        Use arrow keys or drag to navigate • Current count: {slides.length} items
+      </div>
+    </div>
+  );
+}
+```
+
+## Interaction Methods
+
+### Mouse Interactions
+- **Drag**: Click and drag left/right to rotate the carousel
+- **Click**: Click on a side item to bring it to center
+
+### Keyboard Interactions
+- **Arrow Left**: Rotate to previous item
+- **Arrow Right**: Rotate to next item
+
+### Mouse Events
+- **Hover**: Pauses auto-rotation when hovering over the carousel
+- **Leave**: Resumes auto-rotation when mouse leaves
+
+## Performance Tips
+
+1. **Optimize Images**: Use optimized image URLs for better performance
+2. **Lazy Loading**: Load large datasets progressively
+3. **Memoize Callbacks**: Use `useCallback` for `onFocusChange` handlers
+4. **Responsive Container**: Set appropriate dimensions for different screen sizes
+
+```jsx
+// Example with responsive sizing
+<div style={{
+  width: '100%',
+  height: window.innerWidth < 768 ? '60vh' : '100vh'
+}}>
+  <AwesomeCoverflowCarousel data={slides} />
+</div>
+```
+
+## Styling
+
+The component comes with built-in styles. Import the CSS file:
+
+```jsx
+import 'awesome-coverflow-carousel/dist/style.css';
+```
+
+All theme colors and styles are defined in the included CSS. You can override default styles with custom CSS classes:
+
+```css
+/* Override carousel styles */
+.custom-carousel {
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+}
+```
+
+```jsx
+<AwesomeCoverflowCarousel
+  data={slides}
+  className="custom-carousel"
+/>
+```

package/dist/carousel-data.json

@@ -0,0 +1,37 @@
+[
+  {
+    "title": "Portfolio Project 1",
+    "description": "Award-winning design system",
+    "image": "https://images.unsplash.com/photo-1561070791-2526d30994b5?w=500&h=300&fit=crop",
+    "tag": "Design",
+    "color": "#1e3a8a"
+  },
+  {
+    "title": "Portfolio Project 2",
+    "description": "Enterprise web application",
+    "image": "https://images.unsplash.com/photo-1517694712202-14dd9538aa97?w=500&h=300&fit=crop",
+    "tag": "Development",
+    "color": "#064e3b"
+  },
+  {
+    "title": "Portfolio Project 3",
+    "description": "Mobile app with 10M+ downloads",
+    "image": "https://images.unsplash.com/photo-1560807707-38cc612d91b3?w=500&h=300&fit=crop",
+    "tag": "Mobile",
+    "color": "#5b1f39"
+  },
+  {
+    "title": "Portfolio Project 4",
+    "description": "Real-time data visualization",
+    "image": "https://images.unsplash.com/photo-1516321295223-4f2d3f2cf1e1?w=500&h=300&fit=crop",
+    "tag": "Analytics",
+    "color": "#78350f"
+  },
+  {
+    "title": "E-Commerce Platform",
+    "description": "Full-stack shopping experience",
+    "image": "https://images.unsplash.com/photo-1460925895917-adf4e565e6c1?w=500&h=300&fit=crop",
+    "tag": "Commerce",
+    "color": "#4c0519"
+  }
+]

package/dist/index.js

@@ -0,0 +1,310 @@
+import { jsx as c, jsxs as A } from "react/jsx-runtime";
+import { useRef as d, useState as tt, useCallback as v, useEffect as z, useMemo as rt } from "react";
+const et = {
+  name: "dark",
+  background: "transparent",
+  cardBg: "rgba(10, 15, 30, 0.85)",
+  cardBorder: "rgba(0, 245, 255, 0.2)",
+  cardText: "#f1f5f9",
+  cardSubtext: "#94a3b8",
+  focusGlow: "0 0 40px rgba(0, 245, 255, 0.5), 0 0 80px rgba(0, 245, 255, 0.2)",
+  navBg: "rgba(0, 245, 255, 0.1)",
+  navText: "#00f5ff",
+  indicatorActive: "#00f5ff",
+  indicatorInactive: "rgba(0, 245, 255, 0.25)"
+}, nt = {
+  name: "light",
+  background: "transparent",
+  cardBg: "rgba(255, 255, 255, 0.92)",
+  cardBorder: "rgba(124, 58, 237, 0.25)",
+  cardText: "#1e293b",
+  cardSubtext: "#64748b",
+  focusGlow: "0 0 40px rgba(124, 58, 237, 0.35), 0 8px 32px rgba(0,0,0,0.15)",
+  navBg: "rgba(124, 58, 237, 0.1)",
+  navText: "#7c3aed",
+  indicatorActive: "#7c3aed",
+  indicatorInactive: "rgba(124, 58, 237, 0.2)"
+}, at = {
+  name: "neon",
+  background: "transparent",
+  cardBg: "rgba(5, 0, 20, 0.9)",
+  cardBorder: "rgba(255, 0, 255, 0.4)",
+  cardText: "#fff",
+  cardSubtext: "#f0abfc",
+  focusGlow: "0 0 50px rgba(255,0,255,0.6), 0 0 100px rgba(0,255,255,0.3)",
+  navBg: "rgba(255, 0, 255, 0.1)",
+  navText: "#ff00ff",
+  indicatorActive: "#ff00ff",
+  indicatorInactive: "rgba(255,0,255,0.2)"
+}, ot = {
+  name: "glass",
+  background: "transparent",
+  cardBg: "rgba(255, 255, 255, 0.08)",
+  cardBorder: "rgba(255, 255, 255, 0.2)",
+  cardText: "#ffffff",
+  cardSubtext: "rgba(255,255,255,0.65)",
+  focusGlow: "0 8px 32px rgba(255,255,255,0.15), inset 0 1px 0 rgba(255,255,255,0.3)",
+  navBg: "rgba(255,255,255,0.1)",
+  navText: "#ffffff",
+  indicatorActive: "#ffffff",
+  indicatorInactive: "rgba(255,255,255,0.3)"
+}, W = {
+  dark: et,
+  light: nt,
+  neon: at,
+  glass: ot
+}, j = 220, H = 300, X = 155, it = 55, Y = 0.8, ct = 0.64, st = 0.72, dt = 0.4, lt = 3.4;
+function bt({
+  data: e,
+  autoRotate: s = !0,
+  rotationSpeed: l = 2800,
+  friction: n = 0.88,
+  focusGlow: h = !0,
+  theme: q = "dark",
+  perspective: F = 1100,
+  onFocusChange: f,
+  className: U
+}) {
+  const o = e.length, Z = W[q] || W.dark, p = d(0), g = d(0), b = d(0), m = d(0), u = d(!1), G = d(0), L = d(0), k = d(null), S = d(!1), [T, I] = tt(0), M = v(() => {
+    if (u.current) return;
+    const t = p.current, a = g.current, i = a - t;
+    b.current = b.current * n + i * (1 - n) * 0.28;
+    const r = t + b.current;
+    if (p.current = r, I(r), Math.abs(i) < 8e-4 && Math.abs(b.current) < 8e-4) {
+      p.current = a, I(a);
+      return;
+    }
+    m.current = requestAnimationFrame(M);
+  }, [n]), y = v(() => {
+    cancelAnimationFrame(m.current), m.current = requestAnimationFrame(M);
+  }, [M]), x = v((t) => {
+    g.current += t, b.current = 0, y();
+    const a = (Math.round(g.current) % o + o) % o;
+    f == null || f(a);
+  }, [o, y, f]);
+  z(() => {
+    if (!s) return;
+    const t = () => {
+      k.current = setTimeout(() => {
+        !u.current && !S.current && x(1), t();
+      }, l);
+    };
+    return t(), () => {
+      k.current && clearTimeout(k.current);
+    };
+  }, [s, l, x]);
+  const K = v((t) => {
+    u.current = !0, G.current = t.clientX, L.current = p.current, b.current = 0, cancelAnimationFrame(m.current), t.target.setPointerCapture(t.pointerId);
+  }, []), N = v((t) => {
+    if (!u.current) return;
+    const i = -((t.clientX - G.current) / X), r = L.current + i;
+    p.current = r, g.current = r, I(r);
+  }, []), V = v((t) => {
+    if (!u.current) return;
+    u.current = !1, g.current = Math.round(p.current), y();
+    const a = (Math.round(g.current) % o + o) % o;
+    f == null || f(a);
+  }, [o, y, f]);
+  z(() => {
+    const t = (a) => {
+      a.key === "ArrowLeft" && x(-1), a.key === "ArrowRight" && x(1);
+    };
+    return window.addEventListener("keydown", t), () => window.removeEventListener("keydown", t);
+  }, [x]), z(() => () => cancelAnimationFrame(m.current), []);
+  const J = (Math.round(T) % o + o) % o, Q = rt(() => e.map((t, a) => {
+    let i = a - T;
+    i = i - Math.round(i / o) * o;
+    const r = Math.abs(i), R = i >= 0 ? 1 : -1, B = r < lt, E = R * Math.min(it + r * 8, 85), $ = i * X, C = Math.max(0, 100 - r * 70), w = r < 0.05 ? 1 : r < 1.5 ? 1 - (1 - Y) * r : Math.max(ct, Y - (r - 1) * 0.1), D = r < 0.05 ? 1 : r < 1.5 ? 1 - (1 - st) * r : Math.max(0, dt - (r - 2) * 0.25), _ = Math.round(100 - r * 20);
+    return { slide: t, i: a, visible: B, rotY: r < 0.05 ? 0 : E, translateX: $, translateZ: C, scale: w, opacity: D, zIndex: _, dist: i };
+  }), [e, T, o]);
+  return /* @__PURE__ */ c(
+    "div",
+    {
+      className: U,
+      style: {
+        position: "relative",
+        width: "100%",
+        height: "100%",
+        cursor: u.current ? "grabbing" : "grab",
+        userSelect: "none",
+        outline: "none",
+        overflow: "hidden"
+      },
+      onPointerDown: K,
+      onPointerMove: N,
+      onPointerUp: V,
+      onMouseEnter: () => {
+        S.current = !0;
+      },
+      onMouseLeave: () => {
+        S.current = !1;
+      },
+      tabIndex: 0,
+      role: "region",
+      "aria-label": "Coverflow Carousel",
+      children: /* @__PURE__ */ c("div", { style: {
+        position: "absolute",
+        inset: 0,
+        perspective: `${F}px`,
+        perspectiveOrigin: "50% 50%",
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center"
+      }, children: /* @__PURE__ */ c("div", { style: { position: "relative", width: 0, height: 0, transformStyle: "preserve-3d" }, children: Q.map(({ slide: t, i: a, visible: i, rotY: r, translateX: R, translateZ: B, scale: E, opacity: $, zIndex: C, dist: w }) => {
+        if (!i) return null;
+        const D = a === J, _ = Math.abs(w);
+        return /* @__PURE__ */ c(
+          "div",
+          {
+            style: {
+              position: "absolute",
+              width: `${j}px`,
+              height: `${H}px`,
+              left: `${-j / 2}px`,
+              top: `${-H / 2}px`,
+              transform: `translateX(${R}px) translateZ(${B}px) rotateY(${r}deg) scale(${E})`,
+              opacity: $,
+              zIndex: C,
+              transition: u.current ? "none" : "transform 0.55s cubic-bezier(0.25,0.46,0.45,0.94), opacity 0.5s ease",
+              willChange: "transform, opacity",
+              cursor: "pointer"
+            },
+            onClick: () => {
+              var P, O;
+              _ > 0.3 ? x(Math.round(w)) : ((P = t.onClick) == null || P.call(t), (O = t.imageClick) == null || O.call(t));
+            },
+            children: /* @__PURE__ */ c(
+              ft,
+              {
+                slide: t,
+                isFocused: D,
+                focusGlow: h,
+                theme: Z
+              }
+            )
+          },
+          a
+        );
+      }) }) })
+    }
+  );
+}
+function ft({ slide: e, isFocused: s, focusGlow: l, theme: n }) {
+  const h = s && l ? n.focusGlow : void 0;
+  return /* @__PURE__ */ A("div", { style: {
+    width: "100%",
+    height: "100%",
+    borderRadius: "18px",
+    overflow: "hidden",
+    position: "relative",
+    background: n.cardBg,
+    border: `1.5px solid ${s ? n.indicatorActive : n.cardBorder}`,
+    boxShadow: h || (s ? "0 24px 64px rgba(0,0,0,0.65), 0 8px 24px rgba(0,0,0,0.4)" : "0 8px 32px rgba(0,0,0,0.4)"),
+    backdropFilter: "blur(12px)",
+    WebkitBackdropFilter: "blur(12px)",
+    transition: "border-color 0.4s, box-shadow 0.4s",
+    display: "flex",
+    flexDirection: "column"
+  }, children: [
+    /* @__PURE__ */ A("div", { style: { flex: "0 0 65%", position: "relative", overflow: "hidden" }, children: [
+      e.image ? /* @__PURE__ */ c(
+        "img",
+        {
+          src: e.image,
+          alt: e.title,
+          style: { width: "100%", height: "100%", objectFit: "cover", display: "block" }
+        }
+      ) : /* @__PURE__ */ c(ut, { title: e.title, color: e.color, accent: n.indicatorActive }),
+      e.tag && /* @__PURE__ */ c("span", { style: {
+        position: "absolute",
+        top: 10,
+        right: 10,
+        background: n.indicatorActive,
+        color: "#000",
+        fontSize: "9px",
+        fontWeight: 800,
+        letterSpacing: "0.08em",
+        padding: "3px 9px",
+        borderRadius: "100px",
+        fontFamily: "var(--font-display)",
+        textTransform: "uppercase"
+      }, children: e.tag }),
+      /* @__PURE__ */ c("div", { style: {
+        position: "absolute",
+        bottom: 0,
+        left: 0,
+        right: 0,
+        height: "50%",
+        background: `linear-gradient(to bottom, transparent, ${n.cardBg})`
+      } })
+    ] }),
+    /* @__PURE__ */ A("div", { style: {
+      flex: 1,
+      padding: "12px 16px 16px",
+      display: "flex",
+      flexDirection: "column",
+      justifyContent: "center",
+      gap: "5px"
+    }, children: [
+      /* @__PURE__ */ c("div", { style: {
+        fontFamily: "var(--font-display)",
+        fontWeight: 800,
+        fontSize: "15px",
+        color: n.cardText,
+        lineHeight: 1.25,
+        letterSpacing: "-0.02em"
+      }, children: e.title }),
+      e.description && /* @__PURE__ */ c("div", { style: {
+        fontFamily: "var(--font-body)",
+        fontSize: "11px",
+        color: n.cardSubtext,
+        lineHeight: 1.5,
+        fontWeight: 300
+      }, children: e.description }),
+      s && /* @__PURE__ */ c("div", { style: {
+        marginTop: "6px",
+        padding: "7px 16px",
+        borderRadius: "100px",
+        background: n.indicatorActive,
+        color: "#000",
+        fontSize: "10px",
+        fontWeight: 800,
+        fontFamily: "var(--font-display)",
+        letterSpacing: "0.05em",
+        textTransform: "uppercase",
+        cursor: "pointer",
+        alignSelf: "flex-start"
+      }, children: "Learn More →" })
+    ] })
+  ] });
+}
+function ut({ title: e, color: s, accent: l }) {
+  const n = ["#020d2e", "#1e1b4b", "#0c1445", "#1a0533", "#0d2137", "#1f1235", "#0a1400", "#1a1000", "#001820", "#160028"], h = s || n[e.charCodeAt(0) % n.length];
+  return /* @__PURE__ */ A("div", { style: {
+    width: "100%",
+    height: "100%",
+    background: `linear-gradient(145deg, ${h} 0%, ${l}22 100%)`,
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    position: "relative"
+  }, children: [
+    /* @__PURE__ */ c("div", { style: {
+      position: "absolute",
+      inset: 0,
+      background: `radial-gradient(circle at 60% 40%, ${l}38, transparent 65%)`
+    } }),
+    /* @__PURE__ */ c("span", { style: {
+      fontFamily: "var(--font-display)",
+      fontWeight: 900,
+      fontSize: "52px",
+      color: l,
+      opacity: 0.88,
+      position: "relative",
+      zIndex: 1
+    }, children: e.slice(0, 2).toUpperCase() })
+  ] });
+}
+export {
+  bt as AwesomeCoverflowCarousel
+};

package/dist/index.umd.cjs

@@ -0,0 +1 @@
+(function(d,t){typeof exports=="object"&&typeof module<"u"?t(exports,require("react/jsx-runtime"),require("react")):typeof define=="function"&&define.amd?define(["exports","react/jsx-runtime","react"],t):(d=typeof globalThis<"u"?globalThis:d||self,t(d.AwesomeCoverflowCarousel={},d.jsxRuntime,d.React))})(this,(function(d,t,n){"use strict";const j={dark:{name:"dark",background:"transparent",cardBg:"rgba(10, 15, 30, 0.85)",cardBorder:"rgba(0, 245, 255, 0.2)",cardText:"#f1f5f9",cardSubtext:"#94a3b8",focusGlow:"0 0 40px rgba(0, 245, 255, 0.5), 0 0 80px rgba(0, 245, 255, 0.2)",navBg:"rgba(0, 245, 255, 0.1)",navText:"#00f5ff",indicatorActive:"#00f5ff",indicatorInactive:"rgba(0, 245, 255, 0.25)"},light:{name:"light",background:"transparent",cardBg:"rgba(255, 255, 255, 0.92)",cardBorder:"rgba(124, 58, 237, 0.25)",cardText:"#1e293b",cardSubtext:"#64748b",focusGlow:"0 0 40px rgba(124, 58, 237, 0.35), 0 8px 32px rgba(0,0,0,0.15)",navBg:"rgba(124, 58, 237, 0.1)",navText:"#7c3aed",indicatorActive:"#7c3aed",indicatorInactive:"rgba(124, 58, 237, 0.2)"},neon:{name:"neon",background:"transparent",cardBg:"rgba(5, 0, 20, 0.9)",cardBorder:"rgba(255, 0, 255, 0.4)",cardText:"#fff",cardSubtext:"#f0abfc",focusGlow:"0 0 50px rgba(255,0,255,0.6), 0 0 100px rgba(0,255,255,0.3)",navBg:"rgba(255, 0, 255, 0.1)",navText:"#ff00ff",indicatorActive:"#ff00ff",indicatorInactive:"rgba(255,0,255,0.2)"},glass:{name:"glass",background:"transparent",cardBg:"rgba(255, 255, 255, 0.08)",cardBorder:"rgba(255, 255, 255, 0.2)",cardText:"#ffffff",cardSubtext:"rgba(255,255,255,0.65)",focusGlow:"0 8px 32px rgba(255,255,255,0.15), inset 0 1px 0 rgba(255,255,255,0.3)",navBg:"rgba(255,255,255,0.1)",navText:"#ffffff",indicatorActive:"#ffffff",indicatorInactive:"rgba(255,255,255,0.3)"}},_=220,P=300,z=155,X=55,G=.8,Y=.64,q=.72,F=.4,U=3.4;function Z({data:o,autoRotate:l=!0,rotationSpeed:f=2800,friction:a=.88,focusGlow:v=!0,theme:V="dark",perspective:J=1100,onFocusChange:u,className:Q}){const c=o.length,ee=j[V]||j.dark,g=n.useRef(0),b=n.useRef(0),x=n.useRef(0),y=n.useRef(0),p=n.useRef(!1),L=n.useRef(0),O=n.useRef(0),w=n.useRef(null),A=n.useRef(!1),[T,S]=n.useState(0),C=n.useCallback(()=>{if(p.current)return;const e=g.current,i=b.current,s=i-e;x.current=x.current*a+s*(1-a)*.28;const r=e+x.current;if(g.current=r,S(r),Math.abs(s)<8e-4&&Math.abs(x.current)<8e-4){g.current=i,S(i);return}y.current=requestAnimationFrame(C)},[a]),m=n.useCallback(()=>{cancelAnimationFrame(y.current),y.current=requestAnimationFrame(C)},[C]),h=n.useCallback(e=>{b.current+=e,x.current=0,m();const i=(Math.round(b.current)%c+c)%c;u==null||u(i)},[c,m,u]);n.useEffect(()=>{if(!l)return;const e=()=>{w.current=setTimeout(()=>{!p.current&&!A.current&&h(1),e()},f)};return e(),()=>{w.current&&clearTimeout(w.current)}},[l,f,h]);const te=n.useCallback(e=>{p.current=!0,L.current=e.clientX,O.current=g.current,x.current=0,cancelAnimationFrame(y.current),e.target.setPointerCapture(e.pointerId)},[]),re=n.useCallback(e=>{if(!p.current)return;const s=-((e.clientX-L.current)/z),r=O.current+s;g.current=r,b.current=r,S(r)},[]),ne=n.useCallback(e=>{if(!p.current)return;p.current=!1,b.current=Math.round(g.current),m();const i=(Math.round(b.current)%c+c)%c;u==null||u(i)},[c,m,u]);n.useEffect(()=>{const e=i=>{i.key==="ArrowLeft"&&h(-1),i.key==="ArrowRight"&&h(1)};return window.addEventListener("keydown",e),()=>window.removeEventListener("keydown",e)},[h]),n.useEffect(()=>()=>cancelAnimationFrame(y.current),[]);const oe=(Math.round(T)%c+c)%c,ae=n.useMemo(()=>o.map((e,i)=>{let s=i-T;s=s-Math.round(s/c)*c;const r=Math.abs(s),I=s>=0?1:-1,M=r<U,B=I*Math.min(X+r*8,85),E=s*z,$=Math.max(0,100-r*70),k=r<.05?1:r<1.5?1-(1-G)*r:Math.max(Y,G-(r-1)*.1),D=r<.05?1:r<1.5?1-(1-q)*r:Math.max(0,F-(r-2)*.25),R=Math.round(100-r*20);return{slide:e,i,visible:M,rotY:r<.05?0:B,translateX:E,translateZ:$,scale:k,opacity:D,zIndex:R,dist:s}}),[o,T,c]);return t.jsx("div",{className:Q,style:{position:"relative",width:"100%",height:"100%",cursor:p.current?"grabbing":"grab",userSelect:"none",outline:"none",overflow:"hidden"},onPointerDown:te,onPointerMove:re,onPointerUp:ne,onMouseEnter:()=>{A.current=!0},onMouseLeave:()=>{A.current=!1},tabIndex:0,role:"region","aria-label":"Coverflow Carousel",children:t.jsx("div",{style:{position:"absolute",inset:0,perspective:`${J}px`,perspectiveOrigin:"50% 50%",display:"flex",alignItems:"center",justifyContent:"center"},children:t.jsx("div",{style:{position:"relative",width:0,height:0,transformStyle:"preserve-3d"},children:ae.map(({slide:e,i,visible:s,rotY:r,translateX:I,translateZ:M,scale:B,opacity:E,zIndex:$,dist:k})=>{if(!s)return null;const D=i===oe,R=Math.abs(k);return t.jsx("div",{style:{position:"absolute",width:`${_}px`,height:`${P}px`,left:`${-_/2}px`,top:`${-P/2}px`,transform:`translateX(${I}px) translateZ(${M}px) rotateY(${r}deg) scale(${B})`,opacity:E,zIndex:$,transition:p.current?"none":"transform 0.55s cubic-bezier(0.25,0.46,0.45,0.94), opacity 0.5s ease",willChange:"transform, opacity",cursor:"pointer"},onClick:()=>{var W,H;R>.3?h(Math.round(k)):((W=e.onClick)==null||W.call(e),(H=e.imageClick)==null||H.call(e))},children:t.jsx(K,{slide:e,isFocused:D,focusGlow:v,theme:ee})},i)})})})})}function K({slide:o,isFocused:l,focusGlow:f,theme:a}){const v=l&&f?a.focusGlow:void 0;return t.jsxs("div",{style:{width:"100%",height:"100%",borderRadius:"18px",overflow:"hidden",position:"relative",background:a.cardBg,border:`1.5px solid ${l?a.indicatorActive:a.cardBorder}`,boxShadow:v||(l?"0 24px 64px rgba(0,0,0,0.65), 0 8px 24px rgba(0,0,0,0.4)":"0 8px 32px rgba(0,0,0,0.4)"),backdropFilter:"blur(12px)",WebkitBackdropFilter:"blur(12px)",transition:"border-color 0.4s, box-shadow 0.4s",display:"flex",flexDirection:"column"},children:[t.jsxs("div",{style:{flex:"0 0 65%",position:"relative",overflow:"hidden"},children:[o.image?t.jsx("img",{src:o.image,alt:o.title,style:{width:"100%",height:"100%",objectFit:"cover",display:"block"}}):t.jsx(N,{title:o.title,color:o.color,accent:a.indicatorActive}),o.tag&&t.jsx("span",{style:{position:"absolute",top:10,right:10,background:a.indicatorActive,color:"#000",fontSize:"9px",fontWeight:800,letterSpacing:"0.08em",padding:"3px 9px",borderRadius:"100px",fontFamily:"var(--font-display)",textTransform:"uppercase"},children:o.tag}),t.jsx("div",{style:{position:"absolute",bottom:0,left:0,right:0,height:"50%",background:`linear-gradient(to bottom, transparent, ${a.cardBg})`}})]}),t.jsxs("div",{style:{flex:1,padding:"12px 16px 16px",display:"flex",flexDirection:"column",justifyContent:"center",gap:"5px"},children:[t.jsx("div",{style:{fontFamily:"var(--font-display)",fontWeight:800,fontSize:"15px",color:a.cardText,lineHeight:1.25,letterSpacing:"-0.02em"},children:o.title}),o.description&&t.jsx("div",{style:{fontFamily:"var(--font-body)",fontSize:"11px",color:a.cardSubtext,lineHeight:1.5,fontWeight:300},children:o.description}),l&&t.jsx("div",{style:{marginTop:"6px",padding:"7px 16px",borderRadius:"100px",background:a.indicatorActive,color:"#000",fontSize:"10px",fontWeight:800,fontFamily:"var(--font-display)",letterSpacing:"0.05em",textTransform:"uppercase",cursor:"pointer",alignSelf:"flex-start"},children:"Learn More →"})]})]})}function N({title:o,color:l,accent:f}){const a=["#020d2e","#1e1b4b","#0c1445","#1a0533","#0d2137","#1f1235","#0a1400","#1a1000","#001820","#160028"],v=l||a[o.charCodeAt(0)%a.length];return t.jsxs("div",{style:{width:"100%",height:"100%",background:`linear-gradient(145deg, ${v} 0%, ${f}22 100%)`,display:"flex",alignItems:"center",justifyContent:"center",position:"relative"},children:[t.jsx("div",{style:{position:"absolute",inset:0,background:`radial-gradient(circle at 60% 40%, ${f}38, transparent 65%)`}}),t.jsx("span",{style:{fontFamily:"var(--font-display)",fontWeight:900,fontSize:"52px",color:f,opacity:.88,position:"relative",zIndex:1},children:o.slice(0,2).toUpperCase()})]})}d.AwesomeCoverflowCarousel=Z,Object.defineProperty(d,Symbol.toStringTag,{value:"Module"})}));

package/dist/style.css

@@ -0,0 +1 @@
+:root{--awesome-carousel-dark-bg: #030712;--awesome-carousel-light-text: #f1f5f9;--awesome-carousel-secondary-text: #94a3b8;--awesome-carousel-cyan: #00f5ff;--awesome-carousel-violet: #7c3aed;--awesome-carousel-amber: #f59e0b;--awesome-carousel-card-dark-bg: rgba(10, 15, 30, .85);--awesome-carousel-card-dark-border: rgba(0, 245, 255, .2);--awesome-carousel-glow-dark: 0 0 40px rgba(0, 245, 255, .5), 0 0 80px rgba(0, 245, 255, .2);--awesome-carousel-nav-dark-bg: rgba(0, 245, 255, .1);--awesome-carousel-nav-dark-text: #00f5ff;--awesome-carousel-indicator-active-dark: #00f5ff;--awesome-carousel-indicator-inactive-dark: rgba(0, 245, 255, .25)}@media(prefers-color-scheme:light){:root{--awesome-carousel-dark-bg: #f8fafc;--awesome-carousel-light-text: #1e293b;--awesome-carousel-secondary-text: #64748b}}.awesome-carousel-root *,.awesome-carousel-root *:before,.awesome-carousel-root *:after{box-sizing:border-box;margin:0;padding:0}.awesome-carousel-root{position:relative;width:100%;height:100%;font-family:DM Sans,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.awesome-coverflow-carousel{position:relative;width:100%;height:100%;overflow:hidden;background:transparent;cursor:grab;-webkit-user-select:none;user-select:none;outline:none}.awesome-coverflow-carousel:active{cursor:grabbing}.awesome-coverflow-carousel[role=region]{outline:none}.awesome-coverflow-carousel:focus-visible{outline:2px solid var(--awesome-carousel-cyan);outline-offset:4px}.awesome-carousel-stage{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;perspective:1100px;perspective-origin:50% 50%;transform-style:preserve-3d}.awesome-carousel-stage__inner{position:relative;width:0;height:0;transform-style:preserve-3d}.awesome-carousel-card{position:absolute;width:220px;height:300px;border-radius:18px;overflow:hidden;will-change:transform,opacity;transform-style:preserve-3d;backface-visibility:hidden}.awesome-carousel-card--transition{transition:transform .55s cubic-bezier(.25,.46,.45,.94),opacity .5s ease}.awesome-carousel-card--no-transition{transition:none}.awesome-carousel-card:hover{z-index:1000!important}.awesome-carousel-card__content{width:100%;height:100%;display:flex;flex-direction:column;border-radius:18px;overflow:hidden;position:relative;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);transition:border-color .4s,box-shadow .4s}.awesome-carousel-card__content--dark{background:var(--awesome-carousel-card-dark-bg);border:1.5px solid var(--awesome-carousel-card-dark-border);color:var(--awesome-carousel-light-text);box-shadow:0 8px 32px #0006}.awesome-carousel-card__content--dark.focused{border-color:var(--awesome-carousel-indicator-active-dark);box-shadow:var(--awesome-carousel-glow-dark)}.awesome-carousel-card__content--light{background:#ffffffeb;border:1.5px solid rgba(124,58,237,.25);color:#1e293b;box-shadow:0 8px 32px #00000026}.awesome-carousel-card__content--light.focused{border-color:var(--awesome-carousel-violet);box-shadow:0 0 40px #7c3aed59,0 8px 32px #00000026}.awesome-carousel-card__content--neon{background:#050014e6;border:1.5px solid rgba(255,0,255,.4);color:#fff;box-shadow:0 8px 32px #0006}.awesome-carousel-card__content--neon.focused{border-color:#f0f;box-shadow:0 0 50px #f0f9,0 0 100px #00ffff4d}.awesome-carousel-card__content--glass{background:#ffffff14;border:1.5px solid rgba(255,255,255,.2);color:#fff;box-shadow:0 8px 32px #ffffff26,inset 0 1px #ffffff4d}.awesome-carousel-card__content--glass.focused{border-color:#fff;box-shadow:0 8px 32px #fff3,inset 0 1px #fff6}.awesome-carousel-card__image-area{flex:0 0 65%;position:relative;overflow:hidden;background:#0000004d}.awesome-carousel-card__image{width:100%;height:100%;object-fit:cover;display:block;transition:transform .3s ease}.awesome-carousel-card:hover .awesome-carousel-card__image{transform:scale(1.05)}.awesome-carousel-card__image-placeholder{width:100%;height:100%;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#7c3aed33,#00f5ff33);color:#ffffff4d;font-size:2em}.awesome-carousel-card__text-area{flex:1;padding:16px 14px;display:flex;flex-direction:column;gap:6px;overflow:hidden}.awesome-carousel-card__title{font-size:14px;font-weight:600;line-height:1.4;text-transform:uppercase;letter-spacing:.5px;margin:0}.awesome-carousel-card__description{font-size:12px;line-height:1.3;margin:0;opacity:.8}.awesome-carousel-card__tag{display:inline-block;padding:4px 8px;border-radius:4px;font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.3px;width:fit-content;margin-top:auto}.awesome-carousel-card__content--dark .awesome-carousel-card__tag{background:var(--awesome-carousel-nav-dark-bg);color:var(--awesome-carousel-nav-dark-text)}.awesome-carousel-card__content--light .awesome-carousel-card__tag{background:#7c3aed1a;color:var(--awesome-carousel-violet)}.awesome-carousel-card__content--neon .awesome-carousel-card__tag{background:#ff00ff26;color:#f0f}.awesome-carousel-card__content--glass .awesome-carousel-card__tag{background:#ffffff26;color:#fff}.sphere-item{transition:transform .2s ease}.sphere-item--lift:hover{transform:translate(-50%,-52%)!important;filter:brightness(1.1)}.sphere-item--zoom:hover{transform:translate(-50%,-50%) scale(1.12)!important}.sphere-item--tilt:hover{transform:translate(-50%,-50%) rotateY(-5deg) rotateX(5deg)!important}.sphere-item:focus{outline:none}.sphere-item:focus-visible{outline:2px solid var(--awesome-carousel-cyan);outline-offset:4px;border-radius:16px}input[type=range]{-webkit-appearance:none;width:100%;height:4px;border-radius:2px;background:#ffffff1a;outline:none;cursor:pointer}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:14px;border-radius:50%;background:var(--awesome-carousel-cyan);cursor:pointer;transition:box-shadow .2s ease}input[type=range]::-webkit-slider-thumb:hover{box-shadow:0 0 10px var(--awesome-carousel-cyan)}input[type=range]::-moz-range-thumb{width:14px;height:14px;border-radius:50%;background:var(--awesome-carousel-cyan);cursor:pointer;border:none;transition:box-shadow .2s ease}input[type=range]::-moz-range-thumb:hover{box-shadow:0 0 10px var(--awesome-carousel-cyan)}input[type=range]::-moz-range-track{background:transparent;border:none}input[type=range]::-moz-range-progress{background:var(--awesome-carousel-cyan);height:4px;border-radius:2px}@keyframes starfield{0%{transform:translateY(0)}to{transform:translateY(-50%)}}@keyframes pulseGlow{0%,to{opacity:.4;transform:scale(1)}50%{opacity:.8;transform:scale(1.05)}}@keyframes fadeUp{0%{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}@keyframes rotate360{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes cardEntrance{0%{opacity:0;transform:scale(.9)}to{opacity:1;transform:scale(1)}}@keyframes slideIn{0%{transform:translate(-20px);opacity:0}to{transform:translate(0);opacity:1}}.awesome-carousel-nav{display:flex;gap:10px;justify-content:center;padding:20px;background:transparent}.awesome-carousel-nav__button{padding:8px 16px;border:1px solid currentColor;border-radius:6px;background:transparent;color:inherit;cursor:pointer;font-size:14px;font-weight:600;text-transform:uppercase;letter-spacing:.5px;transition:all .3s ease;outline:none}.awesome-carousel-nav__button:hover{transform:translateY(-2px);box-shadow:0 4px 12px #0003}.awesome-carousel-nav__button:active{transform:translateY(0)}.awesome-carousel-nav__button:focus-visible{outline:2px solid var(--awesome-carousel-cyan);outline-offset:2px}.awesome-carousel-nav--dark .awesome-carousel-nav__button{color:var(--awesome-carousel-nav-dark-text);border-color:var(--awesome-carousel-nav-dark-text)}.awesome-carousel-nav--dark .awesome-carousel-nav__button:hover{background:var(--awesome-carousel-nav-dark-bg)}.awesome-carousel-nav--light .awesome-carousel-nav__button{color:var(--awesome-carousel-violet);border-color:var(--awesome-carousel-violet)}.awesome-carousel-nav--light .awesome-carousel-nav__button:hover{background:#7c3aed1a}.awesome-carousel-indicators{display:flex;gap:8px;justify-content:center;padding:16px;background:transparent}.awesome-carousel-indicator{width:8px;height:8px;border-radius:50%;cursor:pointer;transition:all .3s ease;border:none;padding:0}.awesome-carousel-indicator:hover{transform:scale(1.3)}.awesome-carousel-indicator:focus-visible{outline:2px solid var(--awesome-carousel-cyan);outline-offset:2px}.awesome-carousel-indicators--dark .awesome-carousel-indicator{background:var(--awesome-carousel-indicator-inactive-dark)}.awesome-carousel-indicators--dark .awesome-carousel-indicator.active{background:var(--awesome-carousel-indicator-active-dark);box-shadow:0 0 10px var(--awesome-carousel-indicator-active-dark)}.awesome-carousel-indicators--light .awesome-carousel-indicator{background:#7c3aed33}.awesome-carousel-indicators--light .awesome-carousel-indicator.active{background:var(--awesome-carousel-violet);box-shadow:0 0 10px #7c3aed80}.awesome-carousel-indicators--neon .awesome-carousel-indicator{background:#f0f3}.awesome-carousel-indicators--neon .awesome-carousel-indicator.active{background:#f0f;box-shadow:0 0 10px #f0f}.awesome-carousel-indicators--glass .awesome-carousel-indicator{background:#ffffff4d}.awesome-carousel-indicators--glass .awesome-carousel-indicator.active{background:#fff;box-shadow:0 0 10px #fff9}.awesome-carousel-fade-enter{animation:fadeUp .3s ease-out}.awesome-carousel-card-entrance{animation:cardEntrance .4s cubic-bezier(.34,1.56,.64,1)}.awesome-carousel-slide-in{animation:slideIn .3s ease-out}@media(prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}.awesome-carousel-card--transition{transition:none}}@media(max-width:768px){.awesome-carousel-card{width:180px;height:240px}.awesome-carousel-card__title{font-size:13px}.awesome-carousel-card__description{font-size:11px}.awesome-carousel-nav{padding:15px;gap:8px}.awesome-carousel-nav__button{padding:6px 12px;font-size:12px}.awesome-carousel-indicators{gap:6px;padding:12px}.awesome-carousel-indicator{width:6px;height:6px}}@media(max-width:480px){.awesome-carousel-card{width:150px;height:200px}.awesome-carousel-card__image-area{flex:0 0 60%}.awesome-carousel-card__text-area{padding:12px 10px;gap:4px}.awesome-carousel-card__title{font-size:12px}.awesome-carousel-card__description{font-size:10px}.awesome-carousel-card__tag{font-size:9px;padding:3px 6px}}.awesome-carousel-a11y-skip{position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}.awesome-carousel-a11y-skip:focus{position:static;width:auto;height:auto;padding:10px;background:var(--awesome-carousel-cyan);color:var(--awesome-carousel-dark-bg);outline:2px solid var(--awesome-carousel-cyan)}@media(prefers-contrast:more){.awesome-carousel-card__content--dark{border-color:var(--awesome-carousel-indicator-active-dark)}.awesome-carousel-card__content--light{border-color:var(--awesome-carousel-violet)}.awesome-carousel-indicator{border:1px solid currentColor}}@media(forced-colors:active){.awesome-carousel-card__content,.awesome-carousel-nav__button,.awesome-carousel-indicator{border:1px solid}}

package/package.json

@@ -0,0 +1,63 @@
+{
+  "name": "awesome-coverflow-carousel",
+  "version": "0.1.0",
+  "description": "A beautiful, interactive 3D Coverflow carousel component for React with smooth animations, multiple themes, and flexible data handling",
+  "type": "module",
+  "main": "dist/index.js",
+  "module": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "files": [
+    "dist"
+  ],
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.umd.cjs"
+    },
+    "./dist/style.css": "./dist/style.css"
+  },
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc -b && vite build",
+    "preview": "vite preview",
+    "prepublishOnly": "npm run build"
+  },
+  "keywords": [
+    "react",
+    "carousel",
+    "coverflow",
+    "3d",
+    "Coverflow",
+    "component",
+    "interactive",
+    "animation",
+    "theme",
+    "ui"
+  ],
+  "author": "Pravinkumar Dabade",
+  "license": "MIT",
+  "peerDependenciesMeta": {
+    "react": {
+      "optional": false
+    },
+    "react-dom": {
+      "optional": false
+    }
+  },
+  "dependencies": {
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0"
+  },
+  "devDependencies": {
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0",
+    "@vitejs/plugin-react": "^4.3.4",
+    "typescript": "~5.6.2",
+    "vite": "^6.0.5"
+  },
+  "engines": {
+    "node": ">=14.0.0",
+    "npm": ">=6.0.0"
+  }
+}