Chroma Blinds

Colorful diagonal stripes that bend toward your cursor

chroma-blinds-tw

Customize

Tweak the props live

Geometry & Motion

Line Count10

Line Thickness0.3

Line Sharpness0.5

Angle45

Zoom0.75

Speed1

Paused

Color

Color A

#510679

Color B

#E015B4

Color C

#9CA1F2

Radial Pulse Strength0.5

Radial Pulse Speed0.2

Contrast1.2

Cursor & Surface

Cursor Interaction

Cursor Angle Strength5

Cursor Lerp0.05

Click Burst Strength1.6

Background

#FFFFFF

Opacity1

Props

Name	Type	Default	Description
`width`	string \| number	`"100%"`	Container width
`height`	string \| number	`"100%"`	Container height
`className`	string	`""`	Additional CSS classes for the container
`children`	ReactNode	`undefined`	Content rendered above the canvas
`lineCount`	number	`10`	Number of diagonal stripes spanning the canvas (1–32)
`lineThickness`	number	`0.3`	Glow falloff numerator — fatter or thinner strokes (0.05–1)
`lineSharpness`	number	`0.5`	Glow falloff exponent — lower is sharper, higher is softer (0.2–1.5)
`speed`	number	`1`	Drift speed multiplier of the diagonal pattern (0–4)
`angle`	number	`45`	Stripe rotation in degrees (0–180)
`zoom`	number	`0.75`	Magnification — larger numbers crop the field tighter (0.2–3)
`radialPulseStrength`	number	`0.5`	Strength of the radial color drift across the canvas (0–2)
`radialPulseSpeed`	number	`0.2`	Time-driven rate of the radial color drift (0–2)
`contrast`	number	`1.2`	Smoothstep upper-bound — lower is punchier, higher is softer (0.4–3)
`colorA`	string	`"#510679"`	First hex color in the cycle (lands at t=0).
`colorB`	string	`"#E015B4"`	Second hex color in the cycle (lands at t=1/3).
`colorC`	string	`"#9CA1F2"`	Third hex color in the cycle (lands at t=2/3).
`backgroundColor`	string	`"#000000"`	Background fill color in hex format
`opacity`	number	`1`	Master alpha (0–1)
`dpr`	number	`1.5`	Maximum device pixel ratio (caps GPU work)
`paused`	boolean	`false`	Freeze the animation in place
`cursorInteraction`	boolean	`true`	Allow the cursor to bend the stripe direction toward it
`cursorAngleStrength`	number	`5`	Maximum angle deviation in degrees applied at the cursor
`cursorLerp`	number	`0.05`	Per-frame lerp toward the cursor-driven angle (0–1)
`clickBurstStrength`	number	`1.6`	Click contrast multiplier (>= 1)
`clickBurstDecay`	number	`2.5`	Per-second decay rate for the click burst

widthstring | number

Container width

Default:"100%"

heightstring | number

Container height

Default:"100%"

classNamestring

Additional CSS classes for the container

Default:""

childrenReactNode

Content rendered above the canvas

Default:undefined

lineCountnumber

Number of diagonal stripes spanning the canvas (1–32)

Default:10

lineThicknessnumber

Glow falloff numerator — fatter or thinner strokes (0.05–1)

Default:0.3

lineSharpnessnumber

Glow falloff exponent — lower is sharper, higher is softer (0.2–1.5)

Default:0.5

speednumber

Drift speed multiplier of the diagonal pattern (0–4)

Default:1

anglenumber

Stripe rotation in degrees (0–180)

Default:45

zoomnumber

Magnification — larger numbers crop the field tighter (0.2–3)

Default:0.75

radialPulseStrengthnumber

Strength of the radial color drift across the canvas (0–2)

Default:0.5

radialPulseSpeednumber

Time-driven rate of the radial color drift (0–2)

Default:0.2

contrastnumber

Smoothstep upper-bound — lower is punchier, higher is softer (0.4–3)

Default:1.2

colorAstring

First hex color in the cycle (lands at t=0).

Default:"#510679"

colorBstring

Second hex color in the cycle (lands at t=1/3).

Default:"#E015B4"

colorCstring

Third hex color in the cycle (lands at t=2/3).

Default:"#9CA1F2"

backgroundColorstring

Background fill color in hex format

Default:"#000000"

opacitynumber

Master alpha (0–1)

Default:1

dprnumber

Maximum device pixel ratio (caps GPU work)

Default:1.5

pausedboolean

Freeze the animation in place

Default:false

cursorInteractionboolean

Allow the cursor to bend the stripe direction toward it

Default:true

cursorAngleStrengthnumber

Maximum angle deviation in degrees applied at the cursor

Default:5

cursorLerpnumber

Per-frame lerp toward the cursor-driven angle (0–1)

Default:0.05

clickBurstStrengthnumber

Click contrast multiplier (>= 1)

Default:1.6

clickBurstDecaynumber

Per-second decay rate for the click burst

Default:2.5