website_designs

Early Cyber

An aesthetic born from the first wave of desktop publishing and image manipulation software, spanning the mid-1980s to mid-1990s. Early Cyber captures the raw, experimental energy of newly accessible digital tools – pixelization, thermographic imagery, fractals, and warped fonts – before mainstream polish arrived. It reflects a moment when artists, musicians, and TV producers were discovering what computers could do to visuals and embracing the alien, often garish results as a legitimate style rather than a technical limitation.

Visual Characteristics

Color Palette

The palette is fundamentally rainbow-spectrum – thermographic false color applied with maximum saturation. Colors shift abruptly rather than blending smoothly, creating banded, posterized regions.

Primary Palette

Role Color Hex
Deep background Black #000000
Alt background Dark navy #0A0A2E
Thermographic red Hot red #FF1A1A
Thermographic orange Blaze orange #FF6600
Thermographic yellow Bright yellow #FFD700
Thermographic green Neon green #00FF41
Thermographic cyan Electric cyan #00FFFF
Thermographic blue Deep blue #0044FF
Thermographic magenta Hot magenta #FF00FF
Thermographic violet Deep violet #8800FF

Greenscreen Palette

Role Color Hex
Terminal bg Near-black #001100
Dim green Phosphor dark #004400
Mid green Phosphor mid #00AA00
Bright green Phosphor bright #00FF41
Peak green Phosphor bloom #66FF99

Fractal Accent Colors

Role Color Hex
Fractal blue Cobalt #0055FF
Fractal teal Electric #00CED1
Fractal gold Amber #FFBF00
Fractal rose Neon pink #FF3399
Fractal white Bloom white #EEFFFF

Usage Notes

Typography

Font Use Case Style
VT323 Terminal text, HUD readouts Monospace CRT-style pixel font
Press Start 2P Headings, pixel-heavy sections Blocky pixel font
Share Tech Mono Data overlays, technical readouts Clean monospace with digital feel
Orbitron Futuristic headings Geometric, digital display typeface
Silkscreen Small UI text, labels Minimal pixel font
Major Mono Display Decorative headlines Monospace with quirky digital character

CSS Implementation

@import url('https://fonts.googleapis.com/css2?family=VT323&family=Orbitron:wght@400;700;900&family=Share+Tech+Mono&display=swap');

/* Primary body text -- terminal style */
body {
  font-family: 'VT323', monospace;
  font-size: 20px;
  line-height: 1.6;
  color: #00FF41;
  background: #000000;
  letter-spacing: 0.04em;
}

/* Headlines -- digital display with distortion potential */
h1, h2, h3 {
  font-family: 'Orbitron', sans-serif;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

/* Data readout text */
.hud-text {
  font-family: 'Share Tech Mono', monospace;
  font-size: 14px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

Warped Text Effect

/* Fisheye / bulge distortion on headlines */
.warped-title {
  font-family: 'Orbitron', sans-serif;
  font-size: 4rem;
  font-weight: 900;
  color: #00FFFF;
  text-shadow:
    0 0 10px #00FFFF,
    0 0 30px #0088FF,
    0 0 60px #0044FF;
  filter: url('#fisheye-distort');  /* SVG filter reference */
  animation: text-warp 4s ease-in-out infinite alternate;
}

@keyframes text-warp {
  0% { transform: scaleX(1) scaleY(1); letter-spacing: 0.1em; }
  50% { transform: scaleX(1.15) scaleY(0.85); letter-spacing: 0.2em; }
  100% { transform: scaleX(0.9) scaleY(1.1); letter-spacing: 0.05em; }
}

Key Design Elements and Motifs

Thermographic Imagery

Fractals

Wireframe 3D

HUD Overlays

Kaleidoscope Patterns

Dot Matrix and Halftone

Composition and Layout Principles

Layout CSS

/* Monitor-frame container */
.cyber-viewport {
  max-width: 1024px;
  margin: 0 auto;
  background: #000000;
  border: 2px solid #00FF41;
  border-radius: 16px;
  box-shadow:
    0 0 30px rgba(0, 255, 65, 0.15),
    inset 0 0 80px rgba(0, 0, 0, 0.8);
  padding: 40px;
  position: relative;
  overflow: hidden;
}

/* HUD overlay grid */
.hud-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(0, 255, 65, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 255, 65, 0.03) 1px, transparent 1px);
  background-size: 32px 32px;
  z-index: 10;
}

Textures and Surface Effects

Scanline Overlay

.scanlines {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9999;
  background: repeating-linear-gradient(
    to bottom,
    transparent 0px,
    transparent 2px,
    rgba(0, 0, 0, 0.2) 2px,
    rgba(0, 0, 0, 0.2) 4px
  );
}

CRT Screen Curvature and Glow

.crt-screen {
  border-radius: 18px;
  box-shadow:
    inset 0 0 100px rgba(0, 0, 0, 0.5),
    0 0 40px rgba(0, 255, 65, 0.1),
    0 0 80px rgba(0, 255, 65, 0.05);
}

Thermographic Gradient

.thermographic {
  background: linear-gradient(
    180deg,
    #FF1A1A 0%,
    #FF6600 15%,
    #FFD700 30%,
    #00FF41 45%,
    #00FFFF 60%,
    #0044FF 75%,
    #8800FF 90%,
    #FF00FF 100%
  );
}

/* Apply thermographic color to text */
.thermo-text {
  background: linear-gradient(
    90deg,
    #FF1A1A, #FF6600, #FFD700,
    #00FF41, #00FFFF, #0044FF,
    #8800FF, #FF00FF
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

Pixelation Effect

/* Apply to images for deliberately pixelated look */
.pixelated {
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

/* CSS-only pixelation via downscale/upscale trick */
.pixel-filter {
  filter: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg'><filter id='p'><feConvolveMatrix order='3' kernelMatrix='0 0 0 0 1 0 0 0 0'/></filter></svg>#p");
}

Glow / Bloom Effect

.neon-glow {
  color: #00FFFF;
  text-shadow:
    0 0 4px #00FFFF,
    0 0 11px #00FFFF,
    0 0 19px #00FFFF,
    0 0 40px #0088FF,
    0 0 80px #0088FF;
}

.element-glow {
  box-shadow:
    0 0 5px #00FFFF,
    0 0 15px #00FFFF,
    0 0 30px #0088FF,
    0 0 60px #0044FF;
  border: 1px solid #00FFFF;
}

SVG Filters for Distortion Effects

Fisheye / Bulge Distortion

<svg xmlns="http://www.w3.org/2000/svg" style="position:absolute;width:0;height:0;">
  <filter id="fisheye-distort">
    <feTurbulence type="turbulence" baseFrequency="0.01" numOctaves="2" result="turbulence"/>
    <feDisplacementMap in="SourceGraphic" in2="turbulence" scale="15" xChannelSelector="R" yChannelSelector="G"/>
  </filter>
</svg>

Posterization

<svg xmlns="http://www.w3.org/2000/svg" style="position:absolute;width:0;height:0;">
  <filter id="posterize">
    <feComponentTransfer>
      <feFuncR type="discrete" tableValues="0 0.25 0.5 0.75 1"/>
      <feFuncG type="discrete" tableValues="0 0.25 0.5 0.75 1"/>
      <feFuncB type="discrete" tableValues="0 0.25 0.5 0.75 1"/>
    </feComponentTransfer>
  </filter>
</svg>

Solarization

.solarized {
  filter: saturate(2) contrast(1.5) invert(0.15) hue-rotate(30deg);
}

Animation and Motion

Scan-Line Sweep

@keyframes scan-sweep {
  0% { transform: translateY(-100%); }
  100% { transform: translateY(100vh); }
}

.scan-line {
  position: fixed;
  width: 100%;
  height: 4px;
  background: linear-gradient(
    to bottom,
    transparent,
    rgba(0, 255, 65, 0.3),
    transparent
  );
  animation: scan-sweep 6s linear infinite;
  pointer-events: none;
  z-index: 9998;
}

Data Readout Flicker

@keyframes data-flicker {
  0%, 92%, 100% { opacity: 1; }
  93% { opacity: 0.7; }
  94% { opacity: 1; }
  96% { opacity: 0.4; }
  97% { opacity: 1; }
}

.flicker {
  animation: data-flicker 3s ease-in-out infinite;
}

Fractal Zoom (Background Animation)

@keyframes fractal-zoom {
  0% { background-size: 100% 100%; filter: hue-rotate(0deg); }
  50% { background-size: 200% 200%; filter: hue-rotate(180deg); }
  100% { background-size: 100% 100%; filter: hue-rotate(360deg); }
}

.fractal-bg {
  background-image: url('fractal.png');
  background-position: center;
  animation: fractal-zoom 20s ease-in-out infinite;
}

Glitch Displacement

@keyframes cyber-glitch {
  0%, 95%, 100% { transform: translate(0, 0); filter: none; }
  96% { transform: translate(-3px, 1px); filter: hue-rotate(90deg); }
  97% { transform: translate(2px, -1px); filter: hue-rotate(180deg); }
  98% { transform: translate(-1px, 2px); filter: hue-rotate(270deg); }
  99% { transform: translate(3px, -2px); filter: hue-rotate(45deg); }
}

.glitch {
  animation: cyber-glitch 4s step-end infinite;
}

CSS Techniques Summary

Technique CSS Property / Approach
Thermographic color linear-gradient with rainbow hard stops on text or backgrounds
Neon glow Multiple text-shadow or box-shadow with same-hue colors at increasing blur
CRT scanlines repeating-linear-gradient with 2px transparent/dark alternation
Screen curvature border-radius + deep inset box-shadow
Pixelation image-rendering: pixelated on images and canvases
Fisheye distortion SVG feTurbulence + feDisplacementMap filters
Posterization SVG feComponentTransfer with discrete table values
Solarization Combined saturate(), contrast(), invert(), hue-rotate() filters
HUD grid overlay Two-axis linear-gradient background-image at fixed intervals
Wireframe borders Thin solid borders (1px solid) in neon green or cyan on black
Data flicker @keyframes with rapid opacity steps
Monitor frame border-radius + border + box-shadow to simulate CRT housing
Rainbow text background-clip: text with multi-stop linear gradient
Greenscreen monochrome Single hue (green) at varying lightness values for all UI elements

Cultural Context and Media References

Television

Film

Music

This site is open source. Improve this page.