Ripple

Luminous orbs that drift slowly across the viewport — a liquid nebula hero background with warm, organic colour blooms.

UniqueUI CLI

npx uniqueui add ripple

shadcn CLI

npx shadcn@latest add https://uniqueui.com/r/ripple.json -y

shadcn path expects @/lib/utils (run shadcn init first). Same source file is installed to components/ui/.

Preview

Maison de Parfum

Aurore.

A scent composed at the edge of dawn — rose, oud, and liquid amber woven into silence.

Usage

"use client";
import { Ripple } from "@/components/ui/ripple";

export default function Hero() {
  return (
    <section className="relative h-[500px] w-full flex items-center justify-center overflow-hidden bg-[#0c0608]">
      {/* Animated nebula background */}
      <Ripple mainCircleSize={90} mainCircleOpacity={0.55} numCircles={7} duration={10} />

      {/* Radial vignette so centre text stays readable */}
      <div
        className="absolute inset-0 pointer-events-none"
        style={{
          background:
            "radial-gradient(ellipse 55% 60% at 50% 50%, transparent 0%, rgba(12,6,8,0.75) 60%, rgba(12,6,8,0.97) 100%)",
        }}
      />

      {/* Hero content sits above the orbs */}
      <div className="relative z-10 flex flex-col items-center gap-4 px-6 text-center max-w-sm">
        <p className="text-[10px] uppercase tracking-[0.35em] text-rose-300/70">
          Maison de Parfum
        </p>
        <h1 className="text-6xl font-light italic text-white" style={{ fontFamily: "Georgia, serif" }}>
          Aurore.
        </h1>
        <p className="text-xs leading-relaxed tracking-wide text-stone-400">
          A scent composed at the edge of dawn — rose, oud, and amber woven into silence.
        </p>
        <button className="mt-1 border border-rose-300/30 px-7 py-2.5 text-xs tracking-[0.18em] uppercase text-rose-200/80 transition-colors hover:border-rose-300/70 hover:text-rose-100">
          Discover the collection
        </button>
      </div>
    </section>
  );
}

Props

Prop	Type	Description
`mainCircleSize`	`number`	Controls orb diameter — each orb renders at mainCircleSize × 4.5 px.
`mainCircleOpacity`	`number`	Peak opacity for every orb (0–1). Individual orbs shimmer around this value.
`numCircles`	`number`	Number of orbs to render. Capped at 8.
`color`	`string`	Pin all orbs to one colour (hex or rgba). Omit to use the built-in warm palette.
`duration`	`number`	Base drift-cycle length in seconds. Each orb is staggered so they never move in sync.
`className`	`string`	Extra classes on the wrapper div.