awesome-glass-slider

A cinematic, glass-morphism product slider for React 19. Features a stacked 3-D card carousel, animated satellite orbit navigation, floating particles, blurred accent orbs, a swipe-to-drag interface, toast notifications, and full keyboard + touch support — with zero UI dependencies.

Installation

npm install awesome-glass-slider

yarn add awesome-glass-slider

pnpm add awesome-glass-slider

Quick Start

Always import the stylesheet alongside the component. It provides all glass-morphism styles, keyframe animations, and responsive breakpoints.

import AwesomeGlassSlider from 'awesome-glass-slider'
import 'awesome-glass-slider/style'

const ITEMS = [
  {
    id: 1,
    title: 'Acai Power Bowl',
    subtitle: 'Superfood Series',
    price: '$12.99',
    tag: 'BESTSELLER',
    description: 'Packed with antioxidants, topped with fresh berries and granola.',
    accent: '#a78bfa',
    emoji: '🫐',
  },
  {
    id: 2,
    title: 'Green Detox Smoothie',
    subtitle: 'Cleanse Range',
    price: '$8.49',
    tag: 'NEW',
    description: 'Spinach, cucumber, ginger and lemon — cold-pressed daily.',
    accent: '#34d399',
    emoji: '🥤',
  },
]

export default function App() {
  return <AwesomeGlassSlider data={ITEMS} />
}

The slider renders at 100vw × 100vh. Wrap it in a sized container when embedding within a larger layout.

Examples

1. Minimal — Static Array

Pass a data array with at least id, title, and emoji to get started.

import AwesomeGlassSlider from 'awesome-glass-slider'
import 'awesome-glass-slider/style'

const ITEMS = [
  {
    id: 1,
    title: 'Mango Smoothie',
    subtitle: 'Tropical Range',
    price: '$7.99',
    tag: 'NEW',
    description: 'Fresh mango blended with coconut milk and a hint of lime.',
    accent: '#fbbf24',
    emoji: '🥭',
  },
  {
    id: 2,
    title: 'Berry Blast Bowl',
    subtitle: 'Superfood Series',
    price: '$11.49',
    tag: 'POPULAR',
    description: 'Mixed berries, chia seeds, and almond butter on an acai base.',
    accent: '#f472b6',
    emoji: '🍓',
  },
]

export default function App() {
  return <AwesomeGlassSlider data={ITEMS} />
}

2. Remote API Endpoint

Pass a URL string to data. The component fetches on mount, shows a loading spinner, and auto-renders on success. The endpoint must return either a JSON array or an object with a data array field.

import AwesomeGlassSlider from 'awesome-glass-slider'
import 'awesome-glass-slider/style'

export default function App() {
  return (
    <AwesomeGlassSlider data="https://api.example.com/products" />
  )
}

3. Remote API — Authenticated Endpoint

Fetch from a protected route by building the URL with a query-string token, or use a proxy in your own backend.

import AwesomeGlassSlider from 'awesome-glass-slider'
import 'awesome-glass-slider/style'

const API = `https://api.example.com/menu?token=${process.env.REACT_APP_API_TOKEN}`

export default function App() {
  return <AwesomeGlassSlider data={API} />
}

4. Pre-fetched Data with useEffect

Fetch externally (with auth headers, error handling, etc.) and pass the resolved array once ready.

import { useState, useEffect } from 'react'
import AwesomeGlassSlider from 'awesome-glass-slider'
import 'awesome-glass-slider/style'

export default function App() {
  const [items, setItems] = useState(null)

  useEffect(() => {
    fetch('https://api.example.com/menu', {
      headers: { Authorization: 'Bearer MY_TOKEN' },
    })
      .then((r) => r.json())
      .then((json) => setItems(json.products))
  }, [])

  if (!items) return <p>Loading…</p>

  return <AwesomeGlassSlider data={items} />
}

5. Per-Item Accent Colours

Each item carries its own accent hex. The colour is applied to the card glow, price label, subtitle, satellite ring, progress bar, and background orbs — all driven from this single value.

import AwesomeGlassSlider from 'awesome-glass-slider'
import 'awesome-glass-slider/style'

const ITEMS = [
  { id: 1, title: 'Matcha Latte',      subtitle: 'Hot Drinks',   price: '$5.50', tag: 'ZEN',    description: 'Ceremonial grade matcha with oat milk.',         accent: '#86efac', emoji: '🍵' },
  { id: 2, title: 'Espresso Martini',  subtitle: 'Cocktails',    price: '$14.00', tag: 'NIGHT',  description: 'Double shot espresso, vodka, coffee liqueur.',   accent: '#c084fc', emoji: '🍸' },
  { id: 3, title: 'Watermelon Juice',  subtitle: 'Cold Press',   price: '$6.75', tag: 'SUMMER', description: 'Straight from the fruit. No sugar. No nonsense.', accent: '#fb7185', emoji: '🍉' },
  { id: 4, title: 'Golden Turmeric',   subtitle: 'Wellness',     price: '$7.25', tag: 'BOOST',  description: 'Turmeric, black pepper, ginger and coconut milk.', accent: '#fbbf24', emoji: '✨' },
]

export default function App() {
  return <AwesomeGlassSlider data={ITEMS} />
}

6. Minimal Items (Headline Mode)

Only id, title, emoji, and accent are required. Everything else renders gracefully as empty.

import AwesomeGlassSlider from 'awesome-glass-slider'
import 'awesome-glass-slider/style'

const ITEMS = [
  { id: 1, title: 'Launch Special',   emoji: '🚀', accent: '#60a5fa' },
  { id: 2, title: 'Customer Fave',    emoji: '❤️',  accent: '#f472b6' },
  { id: 3, title: 'New Arrival',      emoji: '✨',  accent: '#a78bfa' },
]

export default function App() {
  return <AwesomeGlassSlider data={ITEMS} />
}

7. E-Commerce Product Catalogue

Map your existing product objects to the slider's item shape with a transform function.

import AwesomeGlassSlider from 'awesome-glass-slider'
import 'awesome-glass-slider/style'

const ACCENT_PALETTE = ['#f472b6', '#60a5fa', '#34d399', '#fbbf24', '#a78bfa', '#fb7185']

function toSliderItem(product, index) {
  return {
    id: product.sku,
    title: product.name,
    subtitle: product.category,
    price: `$${product.price.toFixed(2)}`,
    tag: product.badge ?? 'IN STOCK',
    description: product.shortDescription,
    accent: ACCENT_PALETTE[index % ACCENT_PALETTE.length],
    emoji: product.icon ?? '🛍️',
  }
}

export default function ProductShowcase({ products }) {
  return <AwesomeGlassSlider data={products.map(toSliderItem)} />
}

8. Menu / Food Ordering App

Full restaurant menu with categories, prices, and dietary tags.

import AwesomeGlassSlider from 'awesome-glass-slider'
import 'awesome-glass-slider/style'

const MENU = [
  {
    id: 'bowl-01',
    title: 'Acai Power Bowl',
    subtitle: 'Superfood Series',
    price: '$12.99',
    tag: 'VEGAN',
    description: 'Organic acai, banana, granola, fresh blueberries and a drizzle of agave.',
    accent: '#a78bfa',
    emoji: '🫐',
  },
  {
    id: 'bowl-02',
    title: 'Poke Bowl',
    subtitle: 'Ocean Fresh',
    price: '$16.50',
    tag: 'SIGNATURE',
    description: 'Sushi-grade tuna, edamame, cucumber, sesame and ponzu dressing over sushi rice.',
    accent: '#22d3ee',
    emoji: '🐟',
  },
  {
    id: 'drink-01',
    title: 'Cold Brew',
    subtitle: 'Specialty Coffee',
    price: '$5.75',
    tag: 'DAILY',
    description: '20-hour slow-steeped Colombian beans, served over ice with oat milk.',
    accent: '#d97706',
    emoji: '☕',
  },
]

export default function MenuShowcase() {
  return <AwesomeGlassSlider data={MENU} />
}

9. Wellness & Supplement Store

Showcase health products with benefit-led descriptions and brand accent colours.

import AwesomeGlassSlider from 'awesome-glass-slider'
import 'awesome-glass-slider/style'

const SUPPLEMENTS = [
  {
    id: 'sup-01',
    title: 'Vitamin D3 + K2',
    subtitle: 'Bone & Immunity',
    price: '$24.99',
    tag: 'ESSENTIAL',
    description: 'High-dose D3 paired with K2 for optimal calcium absorption and heart health.',
    accent: '#fbbf24',
    emoji: '☀️',
  },
  {
    id: 'sup-02',
    title: 'Magnesium Glycinate',
    subtitle: 'Sleep & Recovery',
    price: '$19.99',
    tag: 'BESTSELLER',
    description: 'Chelated form for maximum absorption. Supports deep sleep and muscle recovery.',
    accent: '#818cf8',
    emoji: '🌙',
  },
  {
    id: 'sup-03',
    title: 'Omega-3 Fish Oil',
    subtitle: 'Heart & Brain',
    price: '$29.99',
    tag: 'PREMIUM',
    description: 'Wild-caught, molecularly distilled. 2000mg EPA/DHA per serving.',
    accent: '#38bdf8',
    emoji: '💧',
  },
]

export default function WellnessStore() {
  return <AwesomeGlassSlider data={SUPPLEMENTS} />
}

10. Fashion / Apparel Lookbook

Use emojis as placeholder visuals while showcasing collection items.

import AwesomeGlassSlider from 'awesome-glass-slider'
import 'awesome-glass-slider/style'

const COLLECTION = [
  {
    id: 'look-01',
    title: 'Oversized Linen Shirt',
    subtitle: 'SS25 Collection',
    price: '$89.00',
    tag: 'LIMITED',
    description: 'Breathable European linen. Relaxed drape, cropped boxy silhouette. Sizes XS–XXL.',
    accent: '#d4a27f',
    emoji: '👕',
  },
  {
    id: 'look-02',
    title: 'Wide-Leg Trousers',
    subtitle: 'Tailored Edit',
    price: '$129.00',
    tag: 'NEW IN',
    description: 'Lightweight crepe fabric with a fluid wide leg. Available in slate, ivory and black.',
    accent: '#94a3b8',
    emoji: '👖',
  },
  {
    id: 'look-03',
    title: 'Minimal Sneaker',
    subtitle: 'Footwear',
    price: '$165.00',
    tag: 'DROP',
    description: 'Vulcanised sole, unbleached canvas upper. Hand-finished in Portugal.',
    accent: '#f0f0e8',
    emoji: '👟',
  },
]

export default function Lookbook() {
  return <AwesomeGlassSlider data={COLLECTION} />
}

11. Tech / App Feature Showcase

Highlight product features or SaaS plan tiers with the slider.

import AwesomeGlassSlider from 'awesome-glass-slider'
import 'awesome-glass-slider/style'

const FEATURES = [
  {
    id: 'feat-01',
    title: 'Real-Time Sync',
    subtitle: 'Core Platform',
    price: 'Included',
    tag: 'LIVE',
    description: 'Changes propagate to all connected clients in under 50ms via WebSocket.',
    accent: '#60a5fa',
    emoji: '⚡',
  },
  {
    id: 'feat-02',
    title: 'AI Copilot',
    subtitle: 'Pro & Enterprise',
    price: 'From $49/mo',
    tag: 'AI',
    description: 'Context-aware suggestions trained on your own codebase and documentation.',
    accent: '#a78bfa',
    emoji: '🤖',
  },
  {
    id: 'feat-03',
    title: 'Zero-Trust Auth',
    subtitle: 'Security Suite',
    price: 'Enterprise',
    tag: 'SECURE',
    description: 'SAML 2.0, SCIM provisioning, hardware key support and full audit logging.',
    accent: '#34d399',
    emoji: '🔐',
  },
]

export default function FeaturesPage() {
  return <AwesomeGlassSlider data={FEATURES} />
}

12. Event / Experience Listings

Showcase events, workshops, or experiences with dates as the price field.

import AwesomeGlassSlider from 'awesome-glass-slider'
import 'awesome-glass-slider/style'

const EVENTS = [
  {
    id: 'evt-01',
    title: 'Sound Bath',
    subtitle: 'Wellness Events',
    price: '14 Jun',
    tag: 'SOLD OUT',
    description: '90-minute Himalayan singing bowl journey. Bring a mat and an open mind.',
    accent: '#c084fc',
    emoji: '🔔',
  },
  {
    id: 'evt-02',
    title: 'Rooftop Cinema',
    subtitle: 'Social Nights',
    price: '21 Jun',
    tag: 'FEW LEFT',
    description: 'Open-air screening of a cult classic with street food and craft beer.',
    accent: '#fb923c',
    emoji: '🎬',
  },
  {
    id: 'evt-03',
    title: 'Morning Yoga Flow',
    subtitle: 'Daily Classes',
    price: 'Every Sun',
    tag: 'FREE',
    description: 'Sunrise vinyasa on the waterfront. All levels welcome. Mats provided.',
    accent: '#f9a8d4',
    emoji: '🧘',
  },
]

export default function EventsPage() {
  return <AwesomeGlassSlider data={EVENTS} />
}

13. Dynamic Data from a State Manager

Feed items from Redux, Zustand, or any external store. The component re-renders automatically when data changes.

import AwesomeGlassSlider from 'awesome-glass-slider'
import 'awesome-glass-slider/style'
import { useProductStore } from './store/products'

export default function StorePage() {
  const { featuredItems, isLoading } = useProductStore()

  if (isLoading) return <p>Loading store…</p>

  return <AwesomeGlassSlider data={featuredItems} />
}

14. Next.js — Server Component Data Handoff

Fetch data server-side and pass it as a prop to the client component.

// app/menu/page.jsx  (Next.js App Router — Server Component)
import MenuSlider from './MenuSlider'

async function getMenuItems() {
  const res = await fetch('https://api.example.com/menu', { next: { revalidate: 60 } })
  return res.json()
}

export default async function MenuPage() {
  const items = await getMenuItems()
  return <MenuSlider items={items} />
}

// app/menu/MenuSlider.jsx  (Client Component)
'use client'

import AwesomeGlassSlider from 'awesome-glass-slider'
import 'awesome-glass-slider/style'

export default function MenuSlider({ items }) {
  return <AwesomeGlassSlider data={items} />
}

15. Full Production Setup

Remote API fetch, data transform, error boundary, and analytics on card click — wired together.

import { useState, useEffect } from 'react'
import AwesomeGlassSlider from 'awesome-glass-slider'
import 'awesome-glass-slider/style'

const ACCENT_MAP = {
  drinks:      '#34d399',
  bowls:       '#a78bfa',
  snacks:      '#fbbf24',
  supplements: '#60a5fa',
}

function transformMenuItems(raw) {
  return raw.map((item) => ({
    id: item.id,
    title: item.name,
    subtitle: item.categoryLabel,
    price: `$${item.priceUsd.toFixed(2)}`,
    tag: item.badge?.toUpperCase() ?? 'IN STOCK',
    description: item.shortDescription,
    accent: ACCENT_MAP[item.category] ?? '#60a5fa',
    emoji: item.emojiIcon ?? '🍽️',
  }))
}

export default function App() {
  const [items, setItems]   = useState([])
  const [error, setError]   = useState(null)

  useEffect(() => {
    fetch('https://api.example.com/featured-menu')
      .then((r) => { if (!r.ok) throw new Error(`HTTP ${r.status}`); return r.json() })
      .then((json) => setItems(transformMenuItems(json.products)))
      .catch((err) => setError(err.message))
  }, [])

  if (error) return <p>Failed to load: {error}</p>

  return <AwesomeGlassSlider data={items} />
}

Item Shape

Each object in the data array should conform to the following shape.

| Property | Type | Required | Description | |---------------|----------|:--------:|-------------| | id | string \| number | ✅ | Unique identifier used as the React key. | | title | string | ✅ | Primary product name displayed as the card heading. | | emoji | string | ✅ | Single emoji used as the hero visual and satellite icon. | | accent | string | ✅ | CSS hex colour applied to the card glow, price label, subtitle, satellite ring, progress bar, background orbs, and tagline dot. | | subtitle | string | — | Small uppercase label above the title (e.g. category or range name). | | price | string | — | Price string displayed in the card header (e.g. "$12.99", "From $49/mo", "Free"). Any string is accepted. | | tag | string | — | Short badge label shown in a pill in the top-left of the card (e.g. "BESTSELLER", "NEW"). | | description | string | — | Body copy displayed only on the active (centre) card. Hidden on adjacent and far cards. |

Component Props

| Prop | Type | Required | Default | Description | |--------|-----------------------------|:--------:|:-------:|-------------| | data | Item[] \| string | ✅ | — | Either a static array of item objects, or a URL string pointing to a JSON REST endpoint. When a URL is passed the component fetches on mount, shows a loading spinner, and auto-renders on success. The API must return a JSON array or an object with a data array field. |

Built-In Interactions

| Interaction | Behaviour | |------------------------|-----------| | Auto-play | Advances to the next slide every 4 seconds automatically. | | Hover to pause | Auto-play pauses when the cursor enters the component. | | Drag to navigate | Click-drag or touch-swipe left/right by more than 50 px to change slide. | | Satellite orbit | Click any satellite button around the orbit ring to jump directly to that slide. | | Keyboard | ArrowRight advances, ArrowLeft goes back. Handlers are attached to window. | | Card click / CTA | Clicking the active card or the "Order Now" button triggers a toast notification and logs the item to the console. Extend handleCardClick inside the component to add routing or cart logic. | | Toast | A glass-morphism toast slides up from the bottom for 2.8 seconds on card interaction, showing the item emoji, title, and price. |

Keyboard Navigation

| Key | Action | |--------------|------------------------| | ArrowRight | Jump to next slide | | ArrowLeft | Jump to previous slide |

Responsive Behaviour

On viewports narrower than 700px the satellite orbit and the side info panel are hidden automatically via CSS media query. The card stage narrows from 320 × 440px to 280 × 400px. No configuration is required.

License

MIT © 2026