AESTHETIC

CRT distortion / analog decay / phosphor burn / tech grief

Component reference. Each section includes a live demo, import path, usage example, and props table.

Overlays

StaticNoise

Animated canvas white-noise overlay. Renders random pixel static at 256×256 and composites via blend mode.

NO SIGNAL

Do not adjust your set

import StaticNoise from "@/components/Aesthetic/StaticNoise";

<StaticNoise opacity={0.55} blendMode="screen" />

Prop	Type	Default	Description
opacity	number	0.12	Canvas opacity (0–1).
blendMode	CSSProperties["mixBlendMode"]	"screen"	CSS mix-blend-mode for compositing.
className	string	—	Additional CSS classes.

CRT Overlay

CSS-only CRT screen effect combining scan lines, vignette, and flicker. Apply the class names to container and child divs.

AESTHETIC

Scan lines / vignette / flicker / RGB tear

import styles from "@/app/brand/aesthetic/aesthetic.module.css";

<div className={styles.crtOverlayBox} style={{ height: "280px" }}>
  <div className={styles.scanLines} aria-hidden="true" />
  <div className={styles.crtVignette} aria-hidden="true" />
  <div className="relative z-10">
    {/* your content */}
  </div>
</div>

Prop	Type	Default	Description
crtOverlayBox	CSS Module class	—	Container with relative positioning and card background.
scanLines	CSS Module class	—	Repeating horizontal lines overlay.
crtVignette	CSS Module class	—	Radial gradient edge-darkening overlay.
flicker	CSS Module class	—	Subtle brightness flicker animation.

Pure CSS — no component import needed. Import the CSS module and use the class names directly.

CrackedGlass

Cracked glass texture overlay. Place inside any relative-positioned container — it fills the parent with position absolute. Blends via screen in dark mode and multiply in light mode so content behind the cracks stays visible.

SHATTERED

Layer over any container. Blends via screen (dark) / multiply (light) so content shows through the cracks.

import CrackedGlass from "@/components/Aesthetic/CrackedGlass";

{/* Wrap any content in a relative container */}
<div style={{ position: "relative", overflow: "hidden", height: "400px" }}>
  <CrackedGlass />
  {/* Your content goes here, with z-index above the overlay */}
  <div style={{ position: "relative", zIndex: 10 }}>
    <h2>Content behind the cracks</h2>
  </div>
</div>

// No props — self-contained component.

No props. Pairs well with CRT Overlay (scanLines + crtVignette) for a full broken-screen effect. The image is aria-hidden and pointer-events: none so it never blocks interaction.

Test Patterns

Oscilloscope

Animated SVG oscilloscope waveform with grid overlay, random flicker, and noise variation.

import Oscilloscope from "@/components/Aesthetic/Oscilloscope";

<Oscilloscope />

// No props — self-contained component.

No props. Self-contained animated waveform. Respects prefers-reduced-motion.

ClassicSMPTE

Classic SMPTE color bars with "No Signal" overlay text.

No Signal

import ClassicSMPTE from "@/components/Aesthetic/TestPattern";

<TestPattern />

// No props — self-contained component.

No props. Static SMPTE test pattern.

IndianHead

RCA Indian Head monochrome test pattern. Typically composed with StaticNoise and scan-line overlays for full CRT effect.

import IndianHead from "@/components/Aesthetic/Monoscope";

<div className={styles.monoscope}>
  <Monoscope />
  <StaticNoise opacity={0.55} />
  <div className={styles.monoscopeScanLines} aria-hidden="true" />
  <div className={styles.crtVignette} aria-hidden="true" />
</div>

// No props — self-contained component.

No props. The composed example above shows the full CRT monoscope effect.

Interactive

DecryptText

Character-by-character decrypt animation triggered on scroll intersection.

import DecryptText from "@/components/Aesthetic/DecryptText";

<DecryptText
  text="INITIALIZING SECURE CHANNEL..."
  decryptSpeed={40}
  className="text-sm"
/>

Prop	Type	Default	Description
text	string	—	Text to decrypt with scrambling animation.
decryptSpeed	number	40	Milliseconds between character resolve steps.
typingSpeed	number	—	Typing speed parameter (reserved).
className	string	—	Additional CSS classes.

XtermTerminal

Interactive xterm.js terminal with simulated SSH session. Supports ls, cat, clear, help, pwd, whoami commands.

import XtermTerminal from "@/components/Aesthetic/XtermTerminal";

<XtermTerminal autoStart />

Prop	Type	Default	Description
autoStart	boolean	false	Start SSH simulation immediately instead of waiting for scroll intersection.

Requires @xterm/xterm and @xterm/addon-fit. Syncs theme with next-themes.

AcousticBranding

Interactive audio control panel with procedural noise generators, hardware sample playback, and ambient night sounds.

Noise Generators

Hardware Samples

Night Ambience

import AcousticBranding from "@/components/Aesthetic/AcousticBranding";

<AcousticBranding />

// No props — self-contained component.

No props. Uses Web Audio API. Three sections: Noise Generators (white/pink/brown), Hardware Samples (7 clips), Night Ambience (6 clips).

Photography

Loneliness. Abandonment. Isolation. The spaces we leave behind.

Destroyed corridor with light at the end

Last Exit

Light at the end of the corridor. Nobody walks toward it anymore.

Gutted

The screen is gone but the circuits remain. Tech grief in its purest form.

Tina Rataj-Berard / Unsplash

Shattered glass with radial crack pattern

Impact Point

Every fracture radiates from a single moment. Entropy made visible.

Unsplash

Abandoned hall with scattered chairs and graffiti

Assembly

Chairs arranged for a meeting that never adjourned. Graffiti as eulogy.

Chris Anderson / Unsplash

Ruined factory buildings with overgrown rubble

Industrial Collapse

The skeleton of progress. Nature reclaims what industry abandoned.

Brick factory facade with shattered window panes

Keep Out

Every pane a failed barrier. The building exhales through broken glass.

Tara Evans / Unsplash

Greenhouse

Built to contain growth. Now the growth contains it.

JF Martin / Unsplash

Abandoned railway tracks disappearing into an overgrown tunnel

Terminus

The last train left decades ago. The tracks still wait.

Videography

Video

Drone footage. Industrial scale. The machinery keeps running after we leave.

Subterranean

Light finds its way down. Nothing finds its way back up.

Container Port

The global supply chain seen from above. Everything moves, nothing connects.

Landfill

Where consumption ends. The machine pushes forward through what we discarded.

Cargo

Steel containers on poisoned water. The port never sleeps.

After Hours

The parking lot empties. The building stays lit for no one.

Dark Water

The canal reflects nothing. Palm trees line what used to be clean.

Canal Village

Tin roofs along dark water. Life at the edge of infrastructure.