Blinking Dots
A crisp field of dots blinking in and out on a fixed grid
Customize
Props
29| Name | Type | Default | Description |
|---|---|---|---|
width | string | number | "100%" | Width of the container. |
height | string | number | "100%" | Height of the container. |
className | string | - | Extra classes for the container. |
children | ReactNode | - | Content stacked above the dot field. |
density | number | 20 | Cells along the shortest side of the canvas. Cells stay square at any aspect ratio. |
coverage | number | 0.8 | Fraction of cells that hold a dot. |
jitter | number | 0.6 | How far a dot may wander from its cell center. |
dotSize | number | 1 | Multiplier applied to every dot radius. |
sizeVariation | number | 1 | Spread between the smallest and largest dot. Also drives the color ramp. |
falloff | number | 1 | Shapes the glow profile, higher values tighten the core. |
layers | number | 2 | Number of parallax depth layers, up to 4. |
layerScale | number | 1.9 | Cell density multiplier applied per extra layer. |
layerFade | number | 0.5 | Brightness of the furthest layer. |
colorFrom | string | "#cc0080" | Color of the smallest dots. |
colorTo | string | "#ffccff" | Color of the largest dots. |
backgroundColor | string | "#0a0a0a" | Fill behind the dot field. Accepts "transparent". |
twinkle | number | 0.4 | Depth of the brightness flicker. |
twinkleSpeed | number | 1 | Rate of the brightness flicker. |
driftSpeed | number | 0.012 | Field pan speed in screen widths per second. |
driftAngle | number | 90 | Direction of the pan in degrees. |
vignette | number | 0 | Strength of the radial darkening toward the edges. |
brightness | number | 1 | Overall gain applied to the dots. |
opacity | number | 1 | Master alpha of the canvas. |
cursorInteraction | boolean | true | Let the pointer shift the layers. |
cursorParallax | number | 0.06 | How far the pointer displaces the nearest layer. |
adaptiveQuality | boolean | true | Drop resolution when the frame rate falls short. |
targetFps | number | 60 | Frame rate the adaptive pass aims for. |
dpr | number | 2 | Upper bound on device pixel ratio. |
paused | boolean | false | Hold the animation still. |
widthstring | numberWidth of the container.
"100%"heightstring | numberHeight of the container.
"100%"classNamestringExtra classes for the container.
-childrenReactNodeContent stacked above the dot field.
-densitynumberCells along the shortest side of the canvas. Cells stay square at any aspect ratio.
20coveragenumberFraction of cells that hold a dot.
0.8jitternumberHow far a dot may wander from its cell center.
0.6dotSizenumberMultiplier applied to every dot radius.
1sizeVariationnumberSpread between the smallest and largest dot. Also drives the color ramp.
1falloffnumberShapes the glow profile, higher values tighten the core.
1layersnumberNumber of parallax depth layers, up to 4.
2layerScalenumberCell density multiplier applied per extra layer.
1.9layerFadenumberBrightness of the furthest layer.
0.5colorFromstringColor of the smallest dots.
"#cc0080"colorTostringColor of the largest dots.
"#ffccff"backgroundColorstringFill behind the dot field. Accepts "transparent".
"#0a0a0a"twinklenumberDepth of the brightness flicker.
0.4twinkleSpeednumberRate of the brightness flicker.
1driftSpeednumberField pan speed in screen widths per second.
0.012driftAnglenumberDirection of the pan in degrees.
90vignettenumberStrength of the radial darkening toward the edges.
0brightnessnumberOverall gain applied to the dots.
1opacitynumberMaster alpha of the canvas.
1cursorInteractionbooleanLet the pointer shift the layers.
truecursorParallaxnumberHow far the pointer displaces the nearest layer.
0.06adaptiveQualitybooleanDrop resolution when the frame rate falls short.
truetargetFpsnumberFrame rate the adaptive pass aims for.
60dprnumberUpper bound on device pixel ratio.
2pausedbooleanHold the animation still.
false