FreeIn reviewv1.0.0

Equalizer Ring

A crown of light bars pulsing like a visualizer around a floating glass box; bars rise toward the pointer.

npx shadcn@latest add @vibebox/equalizer-ring

Content

About

A musical centrepiece. Sixty capsule bars stand in a ring and pulse in travelling waves, like an audio visualizer, around a floating glass box that turns slowly over a pool of light. On hover the bars nearest the pointer rise to meet it and the box leans toward it. Ported from the VibeBox hero gallery, where it echoes the logo's equalizer bars.

Use it when

Music, events, audio, nightlife, or any brand with rhythm.
A hero that should feel alive without a story.

Skip it when

A page already has a 3D centrepiece.
Motion level 0 or 1 sites.

Install

1Add the VibeBox registry to components.json:

{
  "registries": {
    "@vibebox": "https://motion.vibeboxph.com/r/{name}.json"
  }
}

2Add the component with the shadcn CLI:
npx shadcn@latest add @vibebox/equalizer-ring

3Use it:

import { EqualizerRing } from "@/components/vibebox/equalizer-ring";

<EqualizerRing className="aspect-[4/3] w-full" />

Code

2 files

components/vibebox/equalizer-ring/equalizer-ring.client.tsx

/**
 * VibeBox Motion · Equalizer Ring
 * Copyright (c) 2026 VibeBox. Licensed under the VibeBox Motion Free License:
 * https://motion.vibeboxph.com/license
 * Use it in unlimited personal, commercial and client projects.
 * Do not sell or redistribute it as a component, kit, template or builder.
 */
"use client";

import type { ReactNode } from "react";
import { SculptureCanvas } from "@/lib/vibebox/sculpture-canvas";

/* Loaded only when the canvas nears the viewport; module scope keeps the loader's identity stable. */
const load = () => import("@/lib/vibebox/engine/three/sculptures/ring").then((module) => module.createRing);

export type EqualizerRingProps = {
  /** Accessible name for the artwork. */
  label?: string;
  /** Shown until the first frame and on devices without hardware WebGL2. */
  poster?: ReactNode;
  className?: string;
};

export function EqualizerRing({ label = "A ring of light bars pulsing around a floating glass box", poster, className }: EqualizerRingProps) {
  return (
    <SculptureCanvas
      slug="equalizer-ring"
      load={load}
      options={undefined}
      label={label}
      poster={poster}
      className={className}
    />
  );
}

components/vibebox/equalizer-ring/index.tsx

/**
 * VibeBox Motion · Equalizer Ring
 * Copyright (c) 2026 VibeBox. Licensed under the VibeBox Motion Free License:
 * https://motion.vibeboxph.com/license
 * Use it in unlimited personal, commercial and client projects.
 * Do not sell or redistribute it as a component, kit, template or builder.
 */
export { EqualizerRing, type EqualizerRingProps } from "./equalizer-ring.client";

Props

Prop	Type	Default	Description
label	string	"A ring of light bars pulsing around a floating glass box"	Accessible name for the artwork.
poster	ReactNode	—	Shown until the first frame and without hardware WebGL2.
className	string	—	Merged with cn(); give it a size or aspect ratio.

Accessibility and motion

Keyboard: Not focusable; the artwork has no actions.
Screen readers: role="img" with a descriptive label; the live caption is hidden.
Touch: A touch on the artwork makes it react like a hover; it never blocks scrolling.
Reduced motion: A composed still frame of the finished piece; no idle motion or hover response.

Edge cases and limits

Below about 280 px wide the bars blur together.
Without hardware WebGL2 (software renderers included) the poster stays.

Infinity Ribbon
Free
A glossy spectrum ribbon twisted into a figure-eight, with a travelling light pass; it bends toward the pointer.
3D · three.js
Launch Stack
Free
A website taken apart into four glass layers: data, logic, design and the live site, with light rising through them.
3D · three.js
Logo Sculpture
Pro
Any SVG logo extruded into a glossy 3D object that builds in, sways at rest and leans toward the pointer.
3D · three.js