loveui

Gradient Blinds

An animated gradient blinds background built with OGL WebGL.

Customize
Tweak animation parameters and instantly preview the result.
20
0.50
16
60
0.50
0
0.15

Installation

npx love-ui@latest add gradient-blinds

Usage

import GradientBlinds from "@/components/gradient-blinds"
<GradientBlinds
  gradientColors={["#FF9FFC", "#5227FF"]}
  angle={20}
  blindCount={16}
/>

Props

gradientColors

An array of hex color strings for the gradient. Maximum 8 colors.

  • Type: string[]
  • Default: ["#FF9FFC", "#5227FF"]
<GradientBlinds gradientColors={["#FF6FD8", "#7C4DFF", "#1FB6FF"]} />

angle

The rotation angle of the gradient in degrees.

  • Type: number
  • Default: 0
<GradientBlinds angle={45} />

blindCount

The number of vertical blinds to render.

  • Type: number
  • Default: 16
<GradientBlinds blindCount={24} />

blindMinWidth

The minimum width of each blind in pixels. Adjusts blindCount based on container width.

  • Type: number
  • Default: 60
<GradientBlinds blindMinWidth={80} />

noise

The amount of noise/grain to add to the effect.

  • Type: number
  • Default: 0.3
<GradientBlinds noise={0.5} />

spotlightRadius

The radius of the mouse spotlight effect.

  • Type: number
  • Default: 0.5
<GradientBlinds spotlightRadius={1.0} />

spotlightSoftness

The softness/falloff of the spotlight effect.

  • Type: number
  • Default: 1
<GradientBlinds spotlightSoftness={2} />

spotlightOpacity

The opacity of the spotlight effect.

  • Type: number
  • Default: 1
<GradientBlinds spotlightOpacity={0.5} />

distortAmount

The amount of wave distortion to apply.

  • Type: number
  • Default: 0
<GradientBlinds distortAmount={2} />

shineDirection

The direction of the shine/light effect on the blinds.

  • Type: "left" | "right"
  • Default: "left"
<GradientBlinds shineDirection="right" />

mirrorGradient

Whether to mirror the gradient pattern.

  • Type: boolean
  • Default: false
<GradientBlinds mirrorGradient={true} />

mouseDampening

The smoothness of mouse tracking (higher = smoother/slower).

  • Type: number
  • Default: 0.15
<GradientBlinds mouseDampening={0.3} />

mixBlendMode

The CSS blend mode to apply to the background.

  • Type: string
  • Default: "normal"
<GradientBlinds mixBlendMode="lighten" />

paused

Whether to pause the animation.

  • Type: boolean
  • Default: false
<GradientBlinds paused={true} />

dpr

Device pixel ratio override.

  • Type: number
  • Default: window.devicePixelRatio
<GradientBlinds dpr={2} />

className

Additional CSS classes to apply to the container.

  • Type: string
<GradientBlinds className="rounded-lg" />