@fxshelf/starfield
Version:
Canvas 2D starfield tunnel for React and Vue — perspective fly-through, glitter flashes, additive trails. Zero animation-lib deps. Copy-as-source friendly.
69 lines (64 loc) • 2.32 kB
TypeScript
import * as react from 'react';
import { ReactNode, CSSProperties } from 'react';
type StarfieldOptions = {
/** Number of stars. Default `263`. */
particleCount?: number;
/** Palette slot 1. Default `#ffffff`. */
color1?: string;
/** Palette slot 2. Default `#ffffff`. */
color2?: string;
/** Palette slot 3. Default `#ffffff`. */
color3?: string;
/** Fly-toward speed multiplier. Default `1`. */
speed?: number;
/** Radial spread (higher = wider field). Default `48`. */
density?: number;
/** Base star size. Default `8`. */
starSize?: number;
/** Perspective near clip (0–100 scale). Default `13`. */
focalDepth?: number;
/** Lateral wobble. Default `0`. */
turbulence?: number;
/** Overall brightness (0–100). Default `73`. */
brightness?: number;
/** Twinkle intensity (0–10). Default `4`. */
glitterIntensity?: number;
/** Trail persistence (0–100). Default `26`. */
trailAmount?: number;
/** Fly away from camera instead of toward. Default `false`. */
reverse?: boolean;
};
type StarfieldInstance = {
setOptions(partial: StarfieldOptions): void;
resize(): void;
destroy(): void;
};
declare const DEFAULTS: {
readonly particleCount: 263;
readonly color1: "#ffffff";
readonly color2: "#ffffff";
readonly color3: "#ffffff";
readonly speed: 1;
readonly density: 48;
readonly starSize: 8;
readonly focalDepth: 13;
readonly turbulence: 0;
readonly brightness: 73;
readonly glitterIntensity: 4;
readonly trailAmount: 26;
readonly reverse: false;
};
/**
* Canvas 2D starfield tunnel: stars fly toward (or away from) the camera
* with perspective projection, optional glitter flashes, and additive trails.
*/
declare function createStarfield(canvas: HTMLCanvasElement, options?: StarfieldOptions): StarfieldInstance;
type StarfieldProps = StarfieldOptions & {
children?: ReactNode;
className?: string;
style?: CSSProperties;
/** Accessible label for the canvas. */
ariaLabel?: string;
};
declare function Starfield({ children, className, style, ariaLabel, ...options }: StarfieldProps): react.JSX.Element;
export { DEFAULTS, Starfield, type StarfieldInstance, type StarfieldOptions, type StarfieldProps, createStarfield };