DocsSpectral Ribbon

Spectral Ribbon

A soft spectral light ribbon on pure black — slow liquid motion and rainbow fringe.

Installation

pnpm dlx shadcn@latest add @componentry/spectral-ribbon

Usage

API Reference

PropTypeDefault
childrenReactNode

Content composed over the ribbon.

—
speednumber

Animation speed, 0 to 2. Zero freezes the frame.

1
intensitynumber

Ribbon brightness, 0.25 to 2.

1
thicknessnumber

Ribbon thickness, 0.5 to 2.

1
grainnumber

Film grain amount, 0 to 1.

0.45
classNamestring

Additional classes for the root container.

—

Keep in mind

This component is inspired by various open-source projects and patterns. Please verify licenses and implementation details before using in production.

Need a custom component?

I build bespoke UI components & websites tailored to your brand.

DM me on X
PreviousSilk AuroraNextWebGL Liquid
import { SpectralRibbon } from "@/components/ui/spectral-ribbon"
 
<SpectralRibbon className="h-[560px] rounded-2xl" />