CRT & Glitch Effects
Relevant source files
The following files were used as context for generating this wiki page:
The CRT and Glitch effects within the PCSTYLE system provide a retro-futuristic cyberpunk aesthetic that permeates the user interface. These effects are not merely decorative but are integrated into the system's state management, responding to user actions, boot sequences, and "system failure" simulations. The primary purpose is to maintain a cohesive "OS" atmosphere while providing visual feedback for navigation and data processing.
Visual Infrastructure
The project utilizes a multi-layered approach to visual effects, combining global overlays with component-specific animations. The architecture relies heavily on framer-motion for procedural animations and Tailwind CSS for stylistic filters.
CRT Overlay System
The CRTOverlay component acts as a global persistent layer. It is rendered within the main App layout to ensure the entire viewport inherits the CRT characteristics. Sources: App.tsx:39
This diagram shows the stacking order of global UI elements where the CRT Overlay sits above the main content.
Glitch Mechanics
Glitch effects are applied both to text and the entire viewport. Viewport-wide glitches are triggered during specific events, such as the "System Failure" simulation when a user clicks the logo five times. Sources: App.tsx:162-171
| Effect Type | Implementation | Trigger |
|---|---|---|
| Text Glitch | GlitchText Component | Component mount/hover |
| Viewport Shake | CSS animate-shake | isHacked state = true |
| Color Shift | CSS hue-rotate | isSuperHacker state = true |
| Scanlines | Motion Div Animation | Infinite loop (CSS/Framer) |
Component Implementation
GlitchText Component
The GlitchText component is used for primary headings, such as project names in ProjectCard. It creates a flickering, unstable text appearance that aligns with the digital artifact theme. Sources: components/ui/ProjectCard.tsx:75, components/ui/GlitchText.tsx
CRT Scanlines and Matrix
Specific UI components implement their own localized "mini-CRT" effects. For instance, the ProjectMatrix uses a moving scanline to simulate a data sweep. Sources: components/ui/ProjectMatrix.tsx:21-26
The scanline logic used in the Project Bit Matrix to simulate a vertical CRT refresh.
System-Wide Filters
The root App component applies global CSS filters based on the isSuperHacker state, which is toggled via a Konami code sequence. Sources: App.tsx:135-144, App.tsx:181
- Overdrive Mode: Applies
hue-rotate(90deg) contrast(1.2)to the entire application. - Shake Mode: Applies a high-frequency
translateandinvert(1)animation when system failure is simulated. Sources: App.tsx:199-203
Terminal and Interactive Artifacts
The Terminal component utilizes these effects to simulate a command-line interface. It includes specific visual treatments for different log types (error, success, system) to maintain the aesthetic of a hardware terminal. Sources: pages/Terminal.tsx:440-448
Sequence representing interactive feedback in the terminal, combining visual color-coding with audio blips.
Summary
CRT and Glitch effects are fundamental to the PCSTYLE identity, implemented through a combination of global overlays (CRTOverlay), component-level animations (GlitchText, ProjectMatrix), and state-driven global filters (isHacked, isSuperHacker). These elements work in tandem with the audio system to create an immersive, responsive cyberpunk environment.