Ribbon Tunnel React Component

LIVE PREVIEWInteract with the component

Just React. No extra dependencies.

Copy the component and its CSS module into your project.

CSS Modules

Usage

Matches your current playground settings.

import RibbonTunnel from "./RibbonTunnel";

export default function Example() {
  return (
    <RibbonTunnel
      color={"#b8a0e8"}
      background={"#100e18"}
      count={18}
      speed={16}
      twist={8}
      paused={false}
      height={420}
    />
  );
}

Using Ribbon Tunnel

Place Ribbon Tunnel behind a hero or editorial title using children. Give it an explicit height so the surrounding layout stays stable.

Use twist to change the depth pattern and speed to slow the rotation. The paused prop and reduced-motion preference both stop the animation.

Props

Name	Type	Required	Default	Description
color	string	No	"#b8a0e8"	Ribbon border colour.
background	string	No	"#100e18"	Surface behind the ribbons.
count	number	No	18	Number of nested ribbons, clamped to 3 through 40.
speed	number	No	16	Animation cycle duration in seconds.
twist	number	No	8	Rotation difference between successive ribbons in degrees.
children	ReactNode	No	undefined	Optional foreground content.
height	number \| string	No	420	Reserved height of the effect.
paused	boolean	No	false	Pause the decorative animation.
className	string	No	""	Additional classes on the root element.
style	CSSProperties	No	undefined	Inline styles for sizing, typography and appearance.