Glass Coin Carousel

A raymarched orbit of glass coins with fresnel edges and dual-tone fill. Runs on WebGL 2; theme follows .dark on html.

Default

Nine glass coins orbit a center label. Needs WebGL 2. Colors and speed are props.

Loading…

Installation

CLI

npx @sonojs/ui@latest add glass-coin-carousel

Usage

page.tsx

"use client"

import { GlassCoinCarousel } from "@/components/3d/glass-coin-carousel"

export default function Page() {
  return (
    <div className="relative h-[500px] w-full">
      <GlassCoinCarousel
        color1="#2DD4BF"
        color2="#818CF8"
        centerText="SonoJS"
      />
    </div>
  )
}

Props

Prop	Type	Default	Description
coinsCount	number	9	Orbiting coins (clamped 1–9).
radius	number	2.3	Orbit radius in scene units.
coinRadius	number	0.65	Individual coin radius.
coinThickness	number	0.12	Individual coin thickness.
speed	number	0.8	Orbit speed. Frozen under reduced motion.
color1	string	"#2DD4BF"	First glass tint (aqua).
color2	string	"#818CF8"	Second glass tint (soft violet) for iridescence.
maxOpacity	number	0.88	Maximum glass opacity.
centerText	string	"SonoJS"	Center overlay label. Empty string hides it.
centerTextClassName	string	-	Classes on the center text.
className	string	-	Classes on the root stage.