Rolling Blinds

Bands of light that roll open and closed like window blinds

rolling-blinds-tw

Customize

Warp

1.00

Band Width

0.100

Drift

0.20

Tilt

0.50

Gain

1.00

Contrast

1.10

Vignette

0.35

Grain

0.050

Grain Size

Grain Rate

Opacity

1.00

Color

Hot Color

Background

Cursor Interaction

Cursor Shift

0.60

Paused

Props

Name	Type	Default	Description
`warp`	number	`1`	Fan of the blinds, 0 keeps them straight.
`bandWidth`	number	`0.1`	Spacing between the vertical blinds.
`drift`	number	`0.2`	How fast the blinds roll across the panel.
`tilt`	number	`0.5`	Vertical lean of the light ramp.
`gain`	number	`1`	Overall brightness.
`contrast`	number	`1.1`	Tone response curve, above 1 deepens the shadows.
`vignette`	number	`0.35`	Corner falloff, 0 to 1.
`grain`	number	`0.05`	Film grain strength, 0 to 1.
`grainSize`	number	`1`	Grain cell size in CSS pixels.
`grainRate`	number	`24`	Grain refreshes per second.
`color`	string	`"#334155"`	Base colour of the panel.
`hotColor`	string	`"#e2e8f0"`	Colour reached at the brightest point.
`backgroundColor`	string	`"#0a0a0a"`	Panel backdrop, or "transparent" to show the page through.
`opacity`	number	`1`	Master alpha.
`cursorInteraction`	boolean	`true`	Let the light source track the pointer.
`cursorShift`	number	`0.6`	How far the light source follows the pointer, 0 to 1.
`paused`	boolean	`false`	Freeze the animation.
`adaptiveQuality`	boolean	`true`	Scale back resolution when the frame budget slips.
`targetFps`	number	`60`	Frame rate the quality meter aims to hold.
`dpr`	number	`2`	Upper device pixel ratio bound.
`className`	string	`undefined`	Extra classes for the panel.
`children`	ReactNode	`undefined`	Content layered above the panel.

warpnumber

Fan of the blinds, 0 keeps them straight.

Default1

bandWidthnumber

Spacing between the vertical blinds.

Default0.1

driftnumber

How fast the blinds roll across the panel.

Default0.2

tiltnumber

Vertical lean of the light ramp.

Default0.5

gainnumber

Overall brightness.

Default1

contrastnumber

Tone response curve, above 1 deepens the shadows.

Default1.1

vignettenumber

Corner falloff, 0 to 1.

Default0.35

grainnumber

Film grain strength, 0 to 1.

Default0.05

grainSizenumber

Grain cell size in CSS pixels.

Default1

grainRatenumber

Grain refreshes per second.

Default24

colorstring

Base colour of the panel.

Default"#334155"

hotColorstring

Colour reached at the brightest point.

Default"#e2e8f0"

backgroundColorstring

Panel backdrop, or "transparent" to show the page through.

Default"#0a0a0a"

opacitynumber

Master alpha.

Default1

cursorInteractionboolean

Let the light source track the pointer.

Defaulttrue

cursorShiftnumber

How far the light source follows the pointer, 0 to 1.

Default0.6

pausedboolean

Freeze the animation.

Defaultfalse

adaptiveQualityboolean

Scale back resolution when the frame budget slips.

Defaulttrue

targetFpsnumber

Frame rate the quality meter aims to hold.

Default60

dprnumber

Upper device pixel ratio bound.

Default2

classNamestring

Extra classes for the panel.

Defaultundefined

childrenReactNode

Content layered above the panel.

Defaultundefined