Lit Dot Matrix Field
A WebGL dot matrix under one volumetric light cone that leans toward the pointer: dots inside the light rise in brightness and size and take on the accent.
WebGL0 deps1 file · 11 KB TSXreduced-motion aware
Props
"use client";
import { useEffect, useRef, useState, useSyncExternalStore } from "react";
import type { CSSProperties, ReactNode } from "react";
/**
* LitDotMatrixField — a WebGL dot matrix under one light cone.
*
* A fragment shader draws a dot grid under a slow volumetric cone of light
* from above the frame. Dots inside the cone rise in brightness and size
* and take on the accent; a faint drifting haze fills the cone. The cone
* leans toward the pointer and, when the pointer is away, sways on a slow
* cycle. Put content on top as children.
*
* Without WebGL it falls back to a CSS dot pattern with a still cone.
* Paused when off-screen or hidden.
*
* Part of the Dark Precision kit: OLED black, 1px hairlines, one cool accent
// ---------------------------------------------------------------
// Full source available with a viberdy Pro subscription.
// https://viberdy.dev/pricing
// ---------------------------------------------------------------
}Details
About this background
A background for the moment a page asks for something. A WebGL shader draws a matrix of dots under a single cone of light shining down from above the frame. Dots inside the cone brighten and grow, and pick up the accent toward the centre; a faint haze, drifting slowly with noise, fills the cone so it reads as light in the air rather than a gradient. The cone leans toward the pointer and, when the pointer has been away a few seconds, sways on a slow cycle. The matrix fades out at the edges so it sits in any section. Put your content on top as children. Without WebGL it falls back to a CSS dot pattern under a still cone. It pauses when off-screen or when the tab is hidden, and reduced motion keeps the cone still.
Curator’s note
The Dark Precision kit's signature surface (slot 2), cut from dark-precision-site, where it lights the closing call to action. Pro: a WebGL fragment shader with a volumetric cone, per-dot lighting and a CSS fallback.
