@fxshelf/glyph-rain/dist/index.d.cts

Matrix-style glyph rain with cursor stir and drop-head lighting for React and Vue. WebGL2, zero animation-lib deps. Copy-as-source friendly.

import * as react from 'react';
import { ReactNode, CSSProperties } from 'react';

/** True when Chrome's experimental html-in-canvas APIs are available. */
declare function supportsHtmlInCanvas(): boolean;

type GlyphRainOptions = {
    /** Characters used for the falling glyphs. Deduplicated into a glyph atlas. */
    charset?: string;
    /** Size of one glyph cell in CSS pixels (8 to 64). */
    cell?: number;
    /** Rain color as [r, g, b] in 0-1 range. */
    color?: [number, number, number];
    /** Color of the bright head glyph as [r, g, b] in 0-1 range. */
    headColor?: [number, number, number];
    /** Fall speed in screen heights per second (0.05 to 3). */
    speed?: number;
    /** Per-column speed variation (0 to 1). */
    speedVariance?: number;
    /** Fraction of drops that spawn each cycle (0 to 1). */
    density?: number;
    /** Length multiplier for the fading trails (0.2 to 3). */
    trail?: number;
    /** Brightness of the drop heads and the light they cast (0 to 3). */
    glow?: number;
    /** How fast glyphs mutate into other characters (0 to 4). */
    mutate?: number;
    /** Random brightness flicker of the streaks (0 to 1). */
    flicker?: number;
    /** Parallax rain layers behind the front one (1 to 3). */
    layers?: number;
    /** How much the unlit page dims (0 to 1). 0 keeps it fully readable. */
    dim?: number;
    /** Strength of the light the drops shine onto the page (0 to 3). */
    light?: number;
    /** Radius of each drop's light pool in CSS pixels (20 to 600). */
    lightRadius?: number;
    /** How high above the page the lights float, in CSS pixels. Higher is softer. */
    lightHeight?: number;
    /** Embossed 3D shading of the page under the lights (0 to 2). */
    relief?: number;
    /** How strongly the cursor stirs the rain as it passes (0 to 1). 0 disables it. */
    stir?: number;
    /** How far the stirring reaches to either side of the cursor, in CSS pixels. */
    stirRadius?: number;
    /** Seconds the stirred wake takes to settle back to its own rhythm. */
    settle?: number;
};
type GlyphRainElements = {
    /** Canvas with layoutsubtree that hosts the HTML content. */
    source: HTMLCanvasElement;
    /** The element inside the source canvas that gets captured. */
    content: HTMLElement;
    /** Canvas the WebGL effect renders to. */
    output: HTMLCanvasElement;
};
type GlyphRainInstance = {
    /** Update effect options live. */
    setOptions: (options: GlyphRainOptions) => void;
    /** Re-read canvas size. Call when the element is resized. */
    resize: () => void;
    /** Stop the loop and release all GPU resources. */
    destroy: () => void;
};
declare const DEFAULT_CHARSET = "\uFF71\uFF72\uFF73\uFF74\uFF75\uFF76\uFF77\uFF78\uFF79\uFF7A\uFF7B\uFF7C\uFF7D\uFF7E\uFF7F\uFF80\uFF81\uFF82\uFF83\uFF84\uFF85\uFF86\uFF87\uFF88\uFF89\uFF8A\uFF8B\uFF8C\uFF8D\uFF8E\uFF8F\uFF90\uFF91\uFF92\uFF93\uFF94\uFF95\uFF96\uFF97\uFF98\uFF99\uFF9A\uFF9B\uFF9C\uFF9D0123456789Z*+-<>\u00A6=:.";
declare const DEFAULTS: Required<GlyphRainOptions>;

declare function createGlyphRain(elements: GlyphRainElements, options?: GlyphRainOptions): GlyphRainInstance | null;

type GlyphRainProps = GlyphRainOptions & {
    children: ReactNode;
    className?: string;
    style?: CSSProperties;
};
declare function GlyphRain({ children, className, style, ...options }: GlyphRainProps): react.JSX.Element;

export { DEFAULTS, DEFAULT_CHARSET, GlyphRain, type GlyphRainElements, type GlyphRainInstance, type GlyphRainOptions, type GlyphRainProps, createGlyphRain, supportsHtmlInCanvas };