Browse components
Gradient Blinds
Venetian-blind strips refracting a drifting gradient, lit by a spotlight that follows the cursor.
Gradient Blinds
Installation
npx shadcn@latest add @glint-ui/gradient-blindsFirst 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/gradient-blinds.json
Usage
import { GradientBlinds } from "@/components/ui/gradient-blinds";
<div className="relative h-96">
<GradientBlinds stripes={16} angle={0} />
</div>Props
| Prop | Type | Default | Description |
|---|---|---|---|
| colors | string[] | ["#12092e","#6d28d9","#ec4899","#fdba74"] | Gradient colors (up to four). |
| stripes | number | 16 | Strips across the width. |
| angle | number | 0 | Strip angle in degrees. |
| distortion | number | 1 | How much each strip refracts the gradient. |
| spotlightColor | string | "#ffffff" | Spotlight color. |
| spotlightRadius | number | 0.45 | Spotlight radius (fraction of height). |
| speed | number | 1 | Gradient drift speed. |
| className | string | — | Extra classes for the root element. |