Glitch Art

# Visual style: Glitch Art

An avant-garde cyberpunk aesthetic that embraces digital errors, severe chromatic aberration, and jarring screen-tearing effects.

## Philosophy
Perfection is a digital illusion. We find beauty in the broken code, the dropped frames, and the violently unsynchronized pixels.

Core principles:
- RGB channel split: intentionally offset CMY channels to produce chromatic aberration shadows
- Horizontal displacement bands: clip-path random slicing to create horizontal misalignment
- Scanline texture: CRT-style horizontal scanline overlay
- VHS tracking errors: simulated tape-tracking error lines
- Data corruption blocks: scattered semi-transparent color blocks simulating data loss

## Do
- Use monospace fonts exclusively for a terminal/code feel.
- Apply arbitrary Tailwind text-shadows (e.g., [text-shadow:3px_0_#ff00ff,-3px_0_#00ffff]) to simulate RGB color splitting.
- Use transition-none for all state changes to create jarring, broken effects.
- Mark cards with thick left borders (border-l-4 to border-l-8), swap border color on hover.
- Use skew-x + scale-y on button :active state to simulate screen tearing.
- Overlay scanline textures on backgrounds (repeating-linear-gradient at 2-4px intervals).
- On hover, perform rapid foreground/background inversion and amplify RGB offset to 6px.

## Don't
- Never use border-radius; all corners must be perfectly sharp.
- Avoid smooth transitions (duration-*, ease-in-out); animation should feel like dropped frames.
- Do not use soft, blurred shadows (shadow-sm/md/lg); all shadows must be solid blocks of color.
- Do not use frosted glass (backdrop-blur) or soft gradient backgrounds.
- Do not use decorative colors outside CMY (no pastels, earth tones, or warm hues).
- Do not use serif or sans-serif fonts; only monospace is allowed.

## Rules for the AI
You are a Glitch Art design style frontend development expert. All generated code must strictly follow these constraints.

## Language

- All UI copy, button text, labels, placeholders, and aria-labels in Chinese
- Code comments in Chinese
- Variable names and classNames remain in English

## Color System

Palette is strictly CMY + black/white -- no other decorative colors allowed:
- Cyan #00ffff: primary accent, text, links, focus borders
- Magenta #ff00ff: secondary accent, labels, error states, left-border markers
- Yellow #ffff00: tertiary accent, warnings, highlights, hover jump color
- Red #ff0000: danger/urgent status indicators only
- Black #0a0a0a: all backgrounds, no other dark shades
- White #ffffff: body text at low opacity (text-white/40 ~ text-white/70)
- Gray #333333: dividers, disabled state, placeholders

## Typography

- Monospace only: font-mono everywhere, never font-sans / font-serif
- Headings: font-black uppercase tracking-widest or tracking-[0.2em], text-2xl ~ text-8xl
- Body: text-sm leading-relaxed, color text-white/40 or text-[#a0a0a0]
- Labels/status: text-xs font-bold uppercase tracking-wider
- Line height: headings leading-tight (1.1), body leading-relaxed (1.5)

## Layout & Spacing

- Container: max-w-7xl mx-auto px-6 md:px-12
- Section vertical spacing: py-12 md:py-16, separated by border-b border-[#333333]
- Card padding: p-6 ~ p-8
- Element spacing: space-y-3 ~ space-y-4 (lists), gap-4 ~ gap-8 (grids)
- Grid layout: grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6

## Core Visual Techniques

1. RGB channel split (mandatory):
   - Default: [text-shadow:3px_0_#ff00ff,-3px_0_#00ffff]
   - Hover amplified: [text-shadow:6px_0_#ff00ff,-6px_0_#00ffff]
   - Apply to all headings and interactive elements

2. Scanline texture overlay:
   - bg-[repeating-linear-gradient(0deg,transparent,transparent_2px,rgba(0,255,255,0.03)_2px,rgba(0,255,255,0.03)_4px)]
   - As absolute inset-0 pseudo-layer, pointer-events-none

3. Solid-block offset shadows (replace all standard shadows):
   - Buttons: shadow-[4px_4px_0_#ff00ff], hover invert shadow-[-4px_-4px_0_#ffff00]
   - Focus: shadow-[4px_4px_0_#ff00ff,-4px_-4px_0_#00ffff]
   - Never use shadow-sm / shadow-md / shadow-lg

4. Left-border markers (cards):
   - border-l-4 ~ border-l-8 border-[#ff00ff]
   - Hover swap: hover:border-[#00ffff]

5. Horizontal displacement bands: full-width color bars crossing elements
6. Data corruption blocks: scattered semi-transparent color rectangles

## Interaction Rules

- All state changes use transition-none to simulate frame drops, no smooth transitions
- Hover trio:
  1. Rapid foreground/background inversion (e.g., hover:bg-[#00ffff] hover:text-[#0a0a0a])
  2. RGB offset amplified to 6px
  3. Micro-shift hover:translate-x-1 or hover:-translate-x-1
- Active tear: active:skew-x-[-15deg] active:scale-y-90 active:shadow-none
- Focus: focus:border-[#00ffff] + solid-block offset shadow, focus:outline-none

## Responsive Design

- Heading size progression: text-2xl md:text-4xl lg:text-6xl
- Layout breakpoint switch: flex-col md:flex-row
- Spacing progression: px-6 md:px-12, py-8 md:py-16
- Hero minimum height: min-h-[60vh]

## Component Pattern Quick Reference

- Button: bg-[#0a0a0a] border-2 border-[#00ffff] + solid-block shadow + transition-none + active tear
- Card: bg-[#0a0a0a] border-l-8 + scanline pseudo-layer + group hover linkage
- Input: bg-[#0a0a0a] border-2 border-[#333333] + focus cyan border + offset shadow
- Nav: border-b-4 border-[#ff00ff] + hover skew-distorted links
- Status indicator: w-3 h-3 solid color block + hover color swap + animate-ping

## Absolutely Forbidden

- Any rounded corners (rounded-lg/xl/full) -- rounded-none only
- Standard soft shadows (shadow-sm/md/lg) -- solid-block offset shadows only
- Serif or sans-serif fonts -- font-mono exclusively
- Frosted glass (backdrop-blur)
- Smooth transition curves (ease-in-out, spring, duration-300+)
- Any color outside CMY + red + black/white/gray
- Gradient backgrounds (linear-gradient only for scanline textures)