CRT Overlay Effect
Relevant source files
The following files were used as context for generating this wiki page:
The CRT Overlay Effect is a specialized visual enhancement within the @pcstyle/ui design system designed to simulate the aesthetic of vintage Cathode Ray Tube monitors. It is a core component of the "cyber" theme, providing immersive atmospheric elements such as scanlines and vignettes that are layered over the entire user interface.
This effect is implemented as a React component that conditionally renders based on the global theme state. It works in conjunction with the UIProvider to ensure that the vintage aesthetic is only applied when the user has selected the aggressive "cyber" visual mode.
Sources: src/effects/crt-overlay.tsx:1-20, src/provider/index.tsx:1-50, src/theme/colors.ts:1-15
Architecture and Integration
The CRT Overlay is integrated into the project's effect system and is exported as a primary utility for high-fidelity visual styling.
Theme Dependency
The effect relies on the useUI hook to access the current theme state. It is strictly tied to the cyber theme mode; if the theme is set to minimal or any other value, the component returns null and does not render any DOM elements.
Sources: src/effects/crt-overlay.tsx:8-11, src/provider/index.tsx:44-50
Visual Layers
The effect is composed of two primary visual layers implemented via CSS linear and radial gradients:
- Scanlines: A repeating linear gradient that creates horizontal lines and color separation (RGB shifts).
- Vignette: A radial gradient that darkens the edges of the screen to simulate the curved glass of a CRT monitor.
Sources: src/effects/crt-overlay.tsx:15-18
Component Relationship Diagram
The following diagram illustrates how the CRTOverlay interacts with the global provider and theme system.
This diagram shows the data flow from the UIProvider through the useUI hook to the CRTOverlay component, which then renders the visual layers.
Sources: src/effects/crt-overlay.tsx:1-20, src/provider/index.tsx:7-40
Implementation Details
CSS Configuration
The overlay utilizes a fixed-position container with a high Z-index to ensure it covers all UI elements, including buttons, inputs, and cards.
| Property | Value | Purpose |
|---|---|---|
pointer-events-none | Utility Class | Ensures the overlay doesn't block user interactions with underlying components. |
fixed inset-0 | Utility Class | Spans the entire viewport. |
z-[9999] | Utility Class | Places the effect above standard UI components but below critical system cursors. |
opacity-40 | Utility Class | Provides a subtle blend of the effect with the underlying content. |
Sources: src/effects/crt-overlay.tsx:13-14, src/effects/neural-cursor.tsx:32
Rendering Logic
The component's rendering is a pure function of the theme state.
export const CRTOverlay = () => {
const { theme } = useUI();
// Guard clause to prevent rendering in non-cyber themes
if (theme !== "cyber") return null;
return (
<div className="pointer-events-none fixed inset-0 z-[9999] ...">
{/* Visual elements */}
</div>
);
};
Sources: src/effects/crt-overlay.tsx:7-14
Interaction with the Design System
The CRT Overlay is designed to complement other "cyber" theme elements defined in the design tokens. While the overlay provides the screen-wide atmosphere, other components provide the glow and color.
This sequence shows the initialization process where the UIProvider triggers the CRTOverlay to render alongside the theme-specific CSS variables.
Sources: src/provider/index.tsx:24-34, src/theme/colors.ts:5-15, src/effects/crt-overlay.tsx:7-20
Technical Specifications
Scanline Gradient Composition
The scanline effect is achieved through two layered gradients:
- Horizontal Lines: A repeating 4px vertical pattern created by a linear gradient transition from transparent to
rgba(0,0,0,0.1). - RGB sub-pixels: A 90-degree linear gradient creating subtle red (
rgba(255,0,0,0.06)), green (rgba(0,255,0,0.02)), and blue (rgba(0,0,255,0.06)) vertical stripes every 6px.
Sources: src/effects/crt-overlay.tsx:16
Global Availability
The CRTOverlay is exported through the main library entry point, allowing developers to include it at the root of their application.
Sources: src/index.ts:1-18
Summary
The CRT Overlay Effect is a specialized atmospheric component within @pcstyle/ui that exclusively activates during the cyber theme. By utilizing low-opacity gradients and fixed positioning, it creates a non-intrusive vintage monitor aesthetic that covers the entire application viewport without interfering with standard user interactions.
Sources: src/effects/crt-overlay.tsx:1-20, src/provider/index.tsx:12-30