--- /** * CanvasRevealEffect — a fine matrix of dots painted by a WebGL fragment * shader, swept into view by a radial wave that starts at the center and * expands outwards while every dot keeps twinkling through a set of * opacity steps. * * The whole effect is one full-screen triangle running the shader on a raw * WebGL1 context: no scene graph, no 3D library. Dots live on a virtual * grid measured in half-CSS-pixel units (the canvas backing store is drawn * at 2x so one grid unit maps to one device pixel), which keeps the dot * pitch identical on every display. * * The root has no size of its own (`height: 100%; width: 100%`): give the * parent a definite height, or pass `overlay` to fill the nearest * positioned ancestor. `trigger` decides when the reveal starts — on * viewport entry, while an ancestor is hovered, or under manual control. */ interface Props { /** Reveal speed: 0.1 crawls, 1.0 is brisk, 5 snaps in almost instantly. */ animationSpeed?: number; /** Ten opacity steps the shader randomly assigns to each dot. */ opacities?: number[]; /** RGB triplets (0-255). One, two or three colors split the six slots. */ colors?: number[][]; /** Dot side length, in grid units (the cell is `totalSize` wide). */ dotSize?: number; /** Grid cell size in grid units — two units make one CSS pixel. */ totalSize?: number; /** Color painted behind the dots. Any CSS color works. */ backgroundColor?: string; /** Draw the dark gradient that fades the bottom of the matrix out. */ showGradient?: boolean; /** * When the reveal runs: `visible` starts it on viewport entry, `hover` * while the hover target is hovered or focused, `manual` waits for the * `data-active` attribute to be set on the element. */ trigger?: 'visible' | 'hover' | 'manual'; /** * CSS selector of the ancestor that owns the hover, resolved with * `closest()`. Defaults to the parent element. Use it when the direct * parent cannot receive pointer events. */ hoverTarget?: string; /** Absolutely fill the nearest positioned ancestor instead of flowing. */ overlay?: boolean; /** Additional classes for the root element. */ class?: string; } const { animationSpeed = 0.4, opacities = [0.3, 0.3, 0.3, 0.5, 0.5, 0.5, 0.8, 0.8, 0.8, 1], colors = [[0, 255, 255]], dotSize = 3, totalSize = 4, backgroundColor = '#ffffff', showGradient = true, trigger = 'visible', hoverTarget, overlay = false, class: className, } = Astro.props; /** The shader reads a fixed-length opacity table and color table. */ const OPACITY_SLOTS = 10; const COLOR_SLOTS = 6; const opacityInput = opacities.length > 0 ? opacities : [1]; const opacitySteps = Array.from( { length: OPACITY_SLOTS }, (_, index) => Number(opacityInput[index % opacityInput.length] ?? 1), ); // Six color slots spread evenly over the palette: one color fills them all, // two split them 3/3, three split them 2/2/2. const palette = colors.length > 0 ? colors : [[0, 255, 255]]; const colorChannels = Array.from({ length: COLOR_SLOTS }, (_, index) => { const slot = Math.min( Math.floor((index * palette.length) / COLOR_SLOTS), palette.length - 1, ); const rgb = palette[slot] ?? [0, 255, 255]; return [(rgb[0] ?? 0) / 255, (rgb[1] ?? 0) / 255, (rgb[2] ?? 0) / 255]; }).flat(); ---

Installation

Install dependencies

Add these files

Configuration

Use it