◀ REWIND TO THE FUTURE ▶
// Components
Interactive VHS UI components. Select a tab to preview Button, Card, and Input in full tape aesthetic with chroma split and scanline distortion.
// BUTTON — tape jitter on hover, chroma split glow
RULE: hover triggers skew-x-2 + chroma split pulls to 4px. Active state collapses to scale-95 + no shadow. Duration 75ms — no smooth ease.
// Color System
Six signal colors drawn from the phosphor bands of the CRT era. Each swatch has a glitch-border effect on hover — chroma split glow pulls apart.
MAGENTA
Primary
#ff00ff
BLACK
Secondary
#000000
CYAN
Accent
#00ffff
YELLOW
Timestamp
#ffff00
GREEN
Signal
#00ff00
DEEP PURPLE
Surface
#1a0a2e
// Tape Collection
VHS case cards representing the tape library. Each card uses the gold-standard card component pattern with tracking jitter, chroma split, and scanline distortion.
NIGHT DRIVE
> Tape loaded. Press play.
HOME VIDEO
> Tape loaded. Press play.
ENTERTAINMENT
> Tape loaded. Press play.
ATMOSPHERE
> Tape loaded. Press play.
URBAN CAPTURE
> Tape loaded. Press play.
SPECIAL EVENT
> Tape loaded. Press play.
// Rules
Hard constraints that maintain authentic VHS signal integrity. Styled as VHS terminal output — DO in cyan, DON'T in magenta/red.
Use monospace fonts exclusively — font-mono for ALL text elements
Apply scanline overlay via repeating-linear-gradient on all dark surfaces
Chromatic aberration: textShadow with -2px magenta + 2px cyan offset
Blinking REC indicator using animate-pulse on a red dot element
Glow effects: box-shadow and text-shadow with neon colors at 40-60% opacity
Dark-only backgrounds: #000000 or #1a0a2e — never light or white
Uppercase everything: tracking-widest for labels, tracking-wider for headings
Neon borders at 20-40% opacity, full neon on hover with chroma split pull
Never use rounded corners larger than 2px — VHS is sharp geometry only
Never use serif or sans-serif fonts — monospace is the only typeface
Never use white or light backgrounds — all surfaces must be black or deep purple
Never use soft drop shadows — only neon glow box-shadow effects
Never use smooth easing on hover — use duration-75 ease-linear for tape jitter
Never use border-radius on cards or containers — hard edges define the style
Never use animations that feel modern — glitch/tracking distortion only
Never omit the scanline overlay on featured content areas
// Effects
The CSS techniques that define the VHS aesthetic. Each effect replicates a specific artefact of analog magnetic recording.
SCANLINE OVERLAY
background: repeating-linear-gradient( 0deg, transparent, transparent 2px, rgba(0,255,255,0.05) 2px, rgba(0,255,255,0.05) 4px )
Horizontal scan lines simulating CRT phosphor rows. Apply as an absolute overlay on any dark surface. Opacity 60% rest, 100% hover.
CHROMATIC ABERRATION
text-shadow: -2px 0 #ff00ff, 2px 0 #00ffff
RGB channel split where magenta bleeds left and cyan bleeds right. The defining VHS text effect. Pull apart further on hover.
TRACKING JITTER
@keyframes vhs-tracking {
0% { transform: skewX(0deg); }
10% { transform: skewX(-2deg); }
20% { transform: skewX(1deg); }
30% { transform: skewX(0deg); }
}Abrupt horizontal skew that simulates tape head misalignment. Use duration-75 ease-linear — never smooth transitions.
CHROMA SPLIT GLOW
/* Rest state */ box-shadow: 2px 0 #00ffff, -2px 0 #ff00ff; /* Hover state — pull apart */ box-shadow: 4px 0 #00ffff, -4px 0 #ff00ff;
Magenta and cyan shadows pull apart on hover creating the VHS chroma split effect. Combined with skew-x-2 on hover.
— LIVE DEMONSTRATIONS —
SCANLINES
Horizontal bands at 4px interval. Opacity 60% rest → 100% hover.
ABERRATION
SIGNAL
-2px magenta + 2px cyan offset
REC INDICATOR
▶ PLAY — TAPE A