Ribbons

Silky, twisting ribbons that chase the cursor on springs and fan out as they lag behind.

Ribbons

Open

colors

thickness22

length40

spring0.05

twist

idle

Installation

npx shadcn@latest add @glint-ui/ribbons

First time using @glint-ui? Add the registry to components.json once, or install by URL: npx shadcn@latest add https://glint-ui-seven.vercel.app/r/ribbons.json

Usage

import { Ribbons } from "@/components/ui/ribbons";

<div className="relative h-96">
  <Ribbons colors={["#c6ff3d", "#22d3ee"]} />
</div>

Props

Prop	Type	Default	Description
colors	string[]	["#c6ff3d","#22d3ee","#a78bfa","#f472b6"]	One ribbon per color, front to back.
thickness	number	22	Head width in px.
length	number	40	Points per ribbon; longer tails at higher values.
spring	number	0.05	Pull toward the cursor. Lower lags more.
twist	boolean	true	Width ripples like a twisting ribbon.
idle	boolean	true	Ribbons wander on their own while the cursor is away.
className	string	—	Extra classes for the root element.