vault66-crt-effect
Version:
A customizable CRT (retro monitor) visual effect for React, Vue, and Web Components
29 lines (28 loc) • 1.12 kB
text/typescript
import type { CRTOptions } from "./options";
/**
* A style bag keyed by CSS property (camelCase) or CSS custom property (`--x`).
* Every wrapper consumes this: React casts it to CSSProperties, Vue passes it
* to `h(..., { style })`, and the Web Component serializes it to a style string.
*/
export type CRTStyle = Record<string, string | number>;
/** Overlay layers rendered as sibling divs after the content. */
export type OverlayClass = "crt-curvature" | "crt-noise" | "crt-glare" | "crt-edge-glow" | "crt-vignette";
export interface CRTComputed {
/** When false, wrappers should render the raw content with no effect at all. */
enabled: boolean;
wrapper: {
className: string;
style: CRTStyle;
};
inner: {
className: string;
style?: CRTStyle;
};
overlays: OverlayClass[];
}
/**
* Turn a set of CRT options into the class names, inline styles, and overlay
* list that every framework wrapper renders. This is the single source of
* truth for how the effect maps onto markup.
*/
export declare function computeCrt(options?: CRTOptions): CRTComputed;