FreeIn reviewv1.0.0

Infinity Ribbon

A glossy spectrum ribbon twisted into a figure-eight, with a travelling light pass; it bends toward the pointer.

npx shadcn@latest add @vibebox/infinity-ribbon

Content

About

An endless loop. A glossy ribbon closes into a figure-eight with a half twist, painted along the spectrum, while a light pass travels around it with no seam and small beads ride along the band. On hover the ribbon bulges toward the pointer. Ported from the VibeBox hero gallery.

Use it when

Subscriptions, support, "always on" services, and continuous improvement stories.
A calm hero where a busier piece would distract.

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/infinity-ribbon

3Use it:

import { InfinityRibbon } from "@/components/vibebox/infinity-ribbon";

<InfinityRibbon className="aspect-[16/9] w-full" />

Code

2 files

components/vibebox/infinity-ribbon/index.tsx

/**
 * VibeBox Motion · Infinity Ribbon
 * 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 { InfinityRibbon, type InfinityRibbonProps } from "./infinity-ribbon.client";

components/vibebox/infinity-ribbon/infinity-ribbon.client.tsx

/**
 * VibeBox Motion · Infinity Ribbon
 * 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/loop").then((module) => module.createLoop);

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

export function InfinityRibbon({ label = "A glossy ribbon twisted into a figure-eight with a light passing along it", poster, className }: InfinityRibbonProps) {
  return (
    <SculptureCanvas
      slug="infinity-ribbon"
      load={load}
      options={undefined}
      label={label}
      poster={poster}
      className={className}
    />
  );
}

Props

Prop	Type	Default	Description
label	string	"A glossy ribbon twisted into a figure-eight with a light passing along it"	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

A wide aspect ratio (16:9 or wider) suits the loop best.
Without hardware WebGL2 (software renderers included) the poster stays.

Equalizer Ring
Free
A crown of light bars pulsing like a visualizer around a floating glass box; bars rise 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