[ [0xB2] Extras ] Display Effects

Display Effects

> Retro CRT, LCD handheld, and VHS glitch effects for authentic terminal aesthetics.

Overview

[ [0xB2] STATUS ]

Add nostalgic display effects to your terminal UI. Choose from CRT monitor scanlines, Game Boy-style LCD pixel grids, or VHS tracking errors. All effects are GPU-accelerated and respect prefers-reduced-motion.

Features

[ [0x01] CRT_MONITOR ]

STATUS: READY

DESC: Scanlines, glow, flicker

[ [0x02] LCD_HANDHELD ]

STATUS: READY

DESC: Pixel grid, no glow

[ [0x03] VHS_GLITCH ]

STATUS: READY

DESC: Color shift, noise

[ [0x04] GPU_ACCELERA ]

STATUS: READY

DESC: Smooth 60fps effects

Usage

[ [0x80] ENABLE VIA DROPDOWN ]

Use the monitor icon in the navigation bar

1// The MonitorEffectsDropdown is included in Navigation
2import { MonitorEffectsDropdown } from '@/components/theme/monitor-effects-dropdown';
3
4// Add to your nav
5<MonitorEffectsDropdown />

[ [0x6D] PROGRAMMATIC CONTROL ]

Apply effects via JavaScript

1// Apply CRT effect
2document.documentElement.classList.add('effect-crt');
3
4// Apply LCD effect
5document.documentElement.classList.add('effect-lcd');
6
7// Apply VHS effect
8document.documentElement.classList.add('effect-vhs');
9
10// Remove all effects
11['crt', 'lcd', 'vhs'].forEach(e =>
12  document.documentElement.classList.remove(`effect-${e}`)
13);
14
15// Save preference
16localStorage.setItem('monitor-preset', 'crt');

[ [0x37] CSS CLASSES ]

Effects are applied via CSS classes on html element

1/* CRT Monitor - 80s/90s authentic look */
2.effect-crt {
3  /* Scanlines + Phosphor Glow + Rolling Bar + Flicker */
4}
5
6/* LCD Handheld - Game Boy style */
7.effect-lcd {
8  /* Pixel Grid + Hard Edges + Recessed Shadow */
9}
10
11/* VHS Glitch - Damaged tape */
12.effect-vhs {
13  /* Chromatic Aberration + Tracking Noise */
14}

Try It Live

[ [0x90] EFFECT SWITCHER ]

Click any effect below to instantly apply it. The effect persists across page navigation and is saved to localStorage.

Effect Details

[ [0xDF] CRT MONITOR ]

The authentic 80s/90s CRT experience:

├─ Horizontal scanlines (2px spacing)

├─ RGB sub-pixel simulation

├─ Phosphor glow on text

├─ Dark corner vignette

├─ Rolling refresh bar (8s cycle)

└─ Subtle power flicker

[ [0xC9] LCD HANDHELD ]

Game Boy / handheld console look:

├─ 3px dot matrix pixel grid

├─ No text glow (flat LCD)

├─ Recessed screen shadow

└─ Pairs with gbpocket theme

[ [0xAC] VHS GLITCH ]

Damaged VHS tape aesthetic:

├─ Red/blue chromatic aberration

├─ Coarse tracking scanlines (4px)

├─ Periodic color shift animation

└─ Pairs with blue theme

[ [0x10] PERFORMANCE ]

All effects are optimized:

├─ GPU acceleration (transform: translateZ(0))

├─ will-change hints for animations

├─ pointer-events: none on overlays

└─ Respects prefers-reduced-motion

Accessibility

[ [0x07] REDUCED MOTION SUPPORT ]

All animations automatically disable when the user has prefers-reduced-motion: reduce set in their system preferences.

@media (prefers-reduced-motion: reduce) {
  *, ::before, ::after {
    animation: none !important;
  }
}

Recommended Theme Pairings

[ [0xDD] SOFT LINKS ]

When you select an effect from the dropdown, the theme automatically switches to a complementary color scheme:

CRT Monitor→ Green (phosphor)

LCD Handheld→ GB Pocket (dot matrix)

VHS Glitch→ Blue (VCR OSD)

You can still manually change the theme after selecting an effect.

Usage

[ [0x80] ENABLE VIA DROPDOWN ]

Use the monitor icon in the navigation bar

1// The MonitorEffectsDropdown is included in Navigation
2import { MonitorEffectsDropdown } from '@/components/theme/monitor-effects-dropdown';
3
4// Add to your nav
5<MonitorEffectsDropdown />

[ [0x6D] PROGRAMMATIC CONTROL ]

Apply effects via JavaScript

1// Apply CRT effect
2document.documentElement.classList.add('effect-crt');
3
4// Apply LCD effect
5document.documentElement.classList.add('effect-lcd');
6
7// Apply VHS effect
8document.documentElement.classList.add('effect-vhs');
9
10// Remove all effects
11['crt', 'lcd', 'vhs'].forEach(e =>
12  document.documentElement.classList.remove(`effect-${e}`)
13);
14
15// Save preference
16localStorage.setItem('monitor-preset', 'crt');

[ [0x37] CSS CLASSES ]

Effects are applied via CSS classes on html element

1/* CRT Monitor - 80s/90s authentic look */
2.effect-crt {
3  /* Scanlines + Phosphor Glow + Rolling Bar + Flicker */
4}
5
6/* LCD Handheld - Game Boy style */
7.effect-lcd {
8  /* Pixel Grid + Hard Edges + Recessed Shadow */
9}
10
11/* VHS Glitch - Damaged tape */
12.effect-vhs {
13  /* Chromatic Aberration + Tracking Noise */
14}

Effect Details

[ [0xDF] CRT MONITOR ]

The authentic 80s/90s CRT experience:

├─ Horizontal scanlines (2px spacing)

├─ RGB sub-pixel simulation

├─ Phosphor glow on text

├─ Dark corner vignette

├─ Rolling refresh bar (8s cycle)

└─ Subtle power flicker

[ [0xC9] LCD HANDHELD ]

Game Boy / handheld console look:

├─ 3px dot matrix pixel grid

├─ No text glow (flat LCD)

├─ Recessed screen shadow

└─ Pairs with gbpocket theme

[ [0xAC] VHS GLITCH ]

Damaged VHS tape aesthetic:

├─ Red/blue chromatic aberration

├─ Coarse tracking scanlines (4px)

├─ Periodic color shift animation

└─ Pairs with blue theme

[ [0x10] PERFORMANCE ]

All effects are optimized:

├─ GPU acceleration (transform: translateZ(0))

├─ will-change hints for animations

├─ pointer-events: none on overlays

└─ Respects prefers-reduced-motion