Chroma Blinds
Colorful diagonal stripes that bend toward your cursor
Customize
Props
25| 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 | numberContainer width
"100%"heightstring | numberContainer height
"100%"classNamestringAdditional CSS classes for the container
""childrenReactNodeContent rendered above the canvas
undefinedlineCountnumberNumber of diagonal stripes spanning the canvas (1–32)
10lineThicknessnumberGlow falloff numerator: fatter or thinner strokes (0.05–1)
0.3lineSharpnessnumberGlow falloff exponent: lower is sharper, higher is softer (0.2–1.5)
0.5speednumberDrift speed multiplier of the diagonal pattern (0–4)
1anglenumberStripe rotation in degrees (0–180)
45zoomnumberMagnification: larger numbers crop the field tighter (0.2–3)
0.75radialPulseStrengthnumberStrength of the radial color drift across the canvas (0–2)
0.5radialPulseSpeednumberTime-driven rate of the radial color drift (0–2)
0.2contrastnumberSmoothstep upper-bound: lower is punchier, higher is softer (0.4–3)
1.2colorAstringFirst hex color in the cycle (lands at t=0).
"#510679"colorBstringSecond hex color in the cycle (lands at t=1/3).
"#E015B4"colorCstringThird hex color in the cycle (lands at t=2/3).
"#9CA1F2"backgroundColorstringBackground fill color in hex format
"#000000"opacitynumberMaster alpha (0–1)
1dprnumberMaximum device pixel ratio (caps GPU work)
1.5pausedbooleanFreeze the animation in place
falsecursorInteractionbooleanAllow the cursor to bend the stripe direction toward it
truecursorAngleStrengthnumberMaximum angle deviation in degrees applied at the cursor
5cursorLerpnumberPer-frame lerp toward the cursor-driven angle (0–1)
0.05clickBurstStrengthnumberClick contrast multiplier (>= 1)
1.6clickBurstDecaynumberPer-second decay rate for the click burst
2.5