vault66-crt-effect
Version:
A customizable CRT (retro monitor) visual effect for React, Vue, and Web Components
50 lines (49 loc) • 1.85 kB
text/typescript
/**
* CRT Effect Presets
*
* Each preset provides a complete configuration for achieving
* specific vintage monitor/terminal aesthetics.
*/
export interface PresetConfig {
theme?: "green" | "amber" | "blue" | "custom";
enabled?: boolean;
sweepDuration?: number;
sweepThickness?: number;
sweepStyle?: "classic" | "soft";
scanlineOpacity?: number;
scanlineThickness?: number;
scanlineGap?: number;
scanlineOrientation?: "horizontal" | "vertical";
enableScanlines?: boolean;
enableSweep?: boolean;
enableGlow?: boolean;
enableEdgeGlow?: boolean;
enableFlicker?: boolean;
enableVignette?: boolean;
enableGlitch?: boolean;
enableCurvature?: boolean;
enableGlare?: boolean;
enableNoise?: boolean;
glitchChromatic?: boolean;
curvatureIntensity?: number;
glareIntensity?: number;
noiseOpacity?: number;
glowColor?: string;
edgeGlowColor?: string;
edgeGlowSize?: number;
flickerIntensity?: "low" | "medium" | "high" | number;
flickerSpeed?: "low" | "medium" | "high" | number;
glitchIntensity?: "low" | "medium" | "high" | number;
glitchSpeed?: "low" | "medium" | "high" | number;
vignetteIntensity?: number;
/** Custom hex, RGB, or RGBA scanline color used with the custom theme. */
scanlineColor?: string;
/** Recolor the wrapped content to a phosphor tint (derived from `theme`). */
tintText?: boolean;
/** Override the phosphor tint color used when `tintText` is on. Any CSS color. */
textColor?: string;
/** Give the sweep line a bright, colored glow instead of the dark refresh bar. */
sweepColor?: string;
}
export type PresetName = "fallout" | "dos" | "cyberpunk" | "commodore64" | "apple2" | "arcade" | "vt100" | "minimal";
export declare const presets: Record<PresetName, PresetConfig>;