Cyberpunk

Published on 2025-12-27 07:28:19

Cyberpunk originated in the sci-fi literary movement of the 1980s (e.g., William Gibson's Neuromancer) and cinema (e.g., Blade Runner, Ghost in the Shell). As a visual style, it reached a mainstream peak in 2020 with the release of the game Cyberpunk 2077. Its core philosophy is "High Tech, Low Life." It depicts a dystopian future where advanced technology (AI, cybernetics, bionics) coexists with societal decay and extreme wealth disparity. In UI design, this style is often referred to as "Glitch Tech" or "Bio-Digital," emphasizing the forced fusion of human flesh and digital networks. Visual Characteristics Acid & Neon Palette: To simulate the light-polluted nightscapes of the future, backgrounds are typically deep teal or Void Black. The foreground employs ultra-high saturation Electric Cyan, Laser Magenta, and Acid Green. This color scheme is visually aggressive. Glitch & Noise: Unlike the "perfect cleanliness" of modern design, Cyberpunk embraces errors. Glitch Art—such as image tearing, RGB splitting, and pixel misalignment—is used as a metaphor for the instability of technology. Additionally, CRT Scanlines and granular noise are iconic elements. Geometric & Modular: UI elements typically reject rounded corners, opting instead for hard, chamfered edges (45° cuts). The layout appears modular and fragmented, as if pieced together from different hardware components to form a HUD (Heads-Up Display) interface.

Style System

**Role:** You are a Frontend Specialist in Creative Coding, focusing on "Glitch Art" and aggressive Cyberpunk aesthetics using pure CSS. **Task:** Develop the "NEON_NEXUS" landing page. **[CONFIGURATION]** - **[STYLE_NAME]:** Cyberpunk / Bio-Hacking - **[INDUSTRY]:** Bio-Augmentation - **[PROJECT_NAME]:** NEON_NEXUS - **[TECH_STACK]:** HTML5 + Vanilla CSS3 (Embedded). - **[PAGE_STRUCTURE]:** Navbar, Glitch Hero, Features, Metrics, Timeline, Pricing, Footer. **Technical Requirements:** 1. **Global Variables (`:root`):** - **Neon Palette:** `--theme-cyan: #00f2ff;`, `--theme-magenta: #ff00ff;`, `--theme-acid: #ccff00;`. - **Dark Mode:** `--bg-dark: #0f2223;`, `--surface-dark: #162e30;`. - **Fonts:** `--font-display: 'Space Grotesk', sans-serif;`. 2. **Key Visual Effects (The "Cyber" Look):** - **CRT Scanlines:** Implement a fixed, full-screen overlay using `linear-gradient` to create horizontal scanlines that dim the screen slightly. - **Angled Corners (Chamfered):** DO NOT use `border-radius`. Use `clip-path: polygon(...)` to cut 45-degree angles off the corners of buttons and cards. - **Glitch Text:** Create a `@keyframes` animation using `clip: rect(...)` and `transform: translate(...)` to make the main H1 title jitter and split into RGB layers. - **Neon Bloom:** Use `box-shadow` liberally on hover states to create a glowing light effect (e.g., `box-shadow: 0 0 20px var(--theme-cyan)`). 3. **Layout & Components:** - **Hero:** Full viewport height. Background image must have a heavy dark overlay to ensure neon text pops. - **Timeline:** A vertical line connecting steps. Use CSS pseudo-elements (`::before`, `::after`) to draw the circuit lines and nodes. - **Pricing Chips:** Style the pricing cards to look like physical hardware (RAM sticks or Datashards) with a "connector" detail at the bottom. 4. **Interactivity:** - Hover effects should be instant and sharp (no slow fades), mimicking digital switching.