# Glitch Aesthetic 2.0

Refined digital disruption. Not chaotic VHS errors, but precise, intentional visual corruption. This evolved aesthetic communicates "cutting edge" without looking broken.

## Critical Self-Assessment

**Why this deserves a template:**
- ✅ Distinct visual language (no other template covers this)
- ✅ Strong use cases (tech, cybersecurity, music, edgy brands)
- ✅ 2025 trend: evolved from messy to refined ("Glitch 2.0")
- ✅ Achievable in Remotion (CSS transforms, blend modes)
- ✅ Adds controlled chaos option to our toolkit

**When NOT to use:**
- Healthcare/wellness (feels unstable)
- Children's content (too edgy)
- Luxury/premium (too raw)
- Anything requiring "trustworthy" feeling

---

## Core Techniques

### 1. RGB Channel Split
The signature glitch effect — color channels offset from each other.

```tsx
const RGBSplit = ({ 
  children, 
  intensity = 4,
  frame 
}: { 
  children: React.ReactNode;
  intensity?: number;
  frame: number;
}) => {
  // Occasional spike in intensity
  const spike = Math.random() > 0.95 ? intensity * 3 : intensity;
  const offset = Math.sin(frame * 0.1) * spike;
  
  return (
    <div style={{ position: 'relative' }}>
      {/* Red channel - offset left */}
      <div style={{
        position: 'absolute',
        inset: 0,
        transform: `translateX(${-offset}px)`,
        color: '#ff0000',
        mixBlendMode: 'screen',
        opacity: 0.8,
      }}>
        {children}
      </div>
      
      {/* Blue channel - offset right */}
      <div style={{
        position: 'absolute',
        inset: 0,
        transform: `translateX(${offset}px)`,
        color: '#0000ff',
        mixBlendMode: 'screen',
        opacity: 0.8,
      }}>
        {children}
      </div>
      
      {/* Green channel - center (main) */}
      <div style={{
        position: 'relative',
        color: '#00ff00',
        mixBlendMode: 'screen',
      }}>
        {children}
      </div>
    </div>
  );
};
```

### 2. Scan Line Distortion
Horizontal slices that shift independently.

```tsx
const SliceGlitch = ({ 
  frame,
  src 
}: { 
  frame: number;
  src: string;
}) => {
  const slices = 20;
  const sliceHeight = 100 / slices;
  
  return (
    <div style={{ position: 'relative', overflow: 'hidden' }}>
      {Array.from({ length: slices }).map((_, i) => {
        // Random offset per slice, changes occasionally
        const seed = Math.sin(i * 1000 + Math.floor(frame / 10)) * 10000;
        const offset = (seed % 1 > 0.9) ? (seed % 20) - 10 : 0;
        
        return (
          <div
            key={i}
            style={{
              position: 'absolute',
              top: `${i * sliceHeight}%`,
              left: 0,
              right: 0,
              height: `${sliceHeight + 0.5}%`, // Overlap to prevent gaps
              overflow: 'hidden',
              transform: `translateX(${offset}px)`,
            }}
          >
            <img 
              src={src}
              style={{
                position: 'absolute',
                top: `-${i * sliceHeight}%`,
                width: '100%',
                height: `${slices * 100}%`,
              }}
            />
          </div>
        );
      })}
    </div>
  );
};
```

### 3. Digital Noise Overlay
Animated static/grain that feels digital, not film.

```tsx
const DigitalNoise = ({ 
  opacity = 0.05,
  frame 
}: { 
  opacity?: number;
  frame: number;
}) => {
  // Generate noise via CSS gradient trick
  const seed = frame * 1000;
  
  return (
    <div style={{
      position: 'absolute',
      inset: 0,
      opacity,
      mixBlendMode: 'overlay',
      background: `url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' seed='${seed}'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E")`,
      pointerEvents: 'none',
    }} />
  );
};
```

### 4. Glitch Text
Text with intermittent corruption.

```tsx
const GlitchText = ({ 
  children,
  frame 
}: { 
  children: string;
  frame: number;
}) => {
  const glitchChars = '!@#$%^&*()_+-=[]{}|;:,.<>?';
  const isGlitching = Math.random() > 0.92; // 8% chance per frame
  
  const displayText = isGlitching
    ? children.split('').map(char => 
        Math.random() > 0.7 
          ? glitchChars[Math.floor(Math.random() * glitchChars.length)]
          : char
      ).join('')
    : children;
  
  return (
    <span style={{
      fontFamily: "'JetBrains Mono', monospace",
      textShadow: isGlitching 
        ? '2px 0 #ff0000, -2px 0 #00ffff' 
        : 'none',
    }}>
      {displayText}
    </span>
  );
};
```

### 5. Block Corruption
Random rectangular areas that invert or shift.

```tsx
const BlockCorruption = ({ frame }: { frame: number }) => {
  // Only show corruption occasionally
  if (Math.random() > 0.1) return null;
  
  const blocks = Math.floor(Math.random() * 3) + 1;
  
  return (
    <>
      {Array.from({ length: blocks }).map((_, i) => (
        <div
          key={i}
          style={{
            position: 'absolute',
            top: `${Math.random() * 80}%`,
            left: `${Math.random() * 80}%`,
            width: `${Math.random() * 200 + 50}px`,
            height: `${Math.random() * 30 + 10}px`,
            background: Math.random() > 0.5 ? '#00ffff' : '#ff0000',
            mixBlendMode: 'difference',
            opacity: 0.8,
          }}
        />
      ))}
    </>
  );
};
```

---

## Color Palette

| Name | Hex | Usage |
|------|-----|-------|
| Void Black | #0a0a0a | Background |
| Glitch Cyan | #00ffff | Channel split, accents |
| Glitch Red | #ff0000 | Channel split |
| Glitch Green | #00ff00 | Matrix-style text |
| Hot Pink | #ff00ff | Alternative accent |
| White | #ffffff | Primary text |
| Gray | #333333 | Subtle elements |

**Key Rule:** High contrast. Dark backgrounds, bright glitch colors.

---

## Typography

**Font Families:**
- Primary: JetBrains Mono, Fira Code (monospace is essential)
- Headlines: Space Grotesk, Archivo Black
- Alternative: VT323, Press Start 2P (pixel fonts for retro-digital)

**Style Rules:**
- Monospace reinforces "digital" feeling
- ALL CAPS for impact
- Tight line-height (1.0-1.1)
- Occasional character substitution (A→4, E→3)

---

## Animation Timing

Glitch aesthetic is about **intermittent disruption**, not constant chaos.

```
Frame timeline example (30fps):

0----30----60----90----120----150----180
     ↑           ↑                  ↑
   glitch     glitch              glitch
   (3-5fr)    (2-4fr)             (5-8fr)
```

**Timing Rules:**
- Glitches should be **brief** (2-8 frames / 0.07-0.27 seconds)
- **Recovery** between glitches (20-60 frames / 0.7-2 seconds)
- Vary intensity — not every glitch is the same strength
- Build intensity toward key moments

```tsx
// Glitch probability function
const shouldGlitch = (frame: number, probability = 0.05) => {
  // Use frame-based seed for deterministic randomness
  const seed = Math.sin(frame * 9999) * 10000;
  return (seed - Math.floor(seed)) < probability;
};

// Glitch intensity based on moment
const getGlitchIntensity = (frame: number, keyMoments: number[]) => {
  const nearKeyMoment = keyMoments.some(m => Math.abs(frame - m) < 15);
  return nearKeyMoment ? 3 : 1; // 3x intensity near key moments
};
```

---

## Layers of Glitch

Build depth with multiple simultaneous effects:

1. **Base Layer:** Content with occasional RGB split
2. **Slice Layer:** Horizontal displacement (rare, dramatic)
3. **Noise Layer:** Constant subtle digital noise
4. **Block Layer:** Random corruption rectangles (very rare)
5. **Scan Line Layer:** Faint horizontal lines (constant, subtle)

```tsx
const GlitchComposition = ({ frame, children }) => (
  <div style={{ position: 'relative' }}>
    {/* Base content with RGB split */}
    <RGBSplit frame={frame} intensity={2}>
      {children}
    </RGBSplit>
    
    {/* Constant subtle noise */}
    <DigitalNoise opacity={0.03} frame={frame} />
    
    {/* Scan lines */}
    <div style={{
      position: 'absolute',
      inset: 0,
      background: 'repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(0,0,0,0.03) 2px, rgba(0,0,0,0.03) 4px)',
      pointerEvents: 'none',
    }} />
    
    {/* Rare block corruption */}
    <BlockCorruption frame={frame} />
  </div>
);
```

---

## Refined vs. Chaotic

**Glitch 2.0 is REFINED:**

| Old (Chaotic) | New (Refined) |
|---------------|---------------|
| Constant effects | Intermittent, purposeful |
| Random colors | Consistent palette (cyan/red) |
| Full-screen distortion | Localized corruption |
| VHS tape damage | Digital data corruption |
| Messy, accidental | Precise, intentional |

The goal is "controlled chaos" — it should feel like a system glitching, not a broken video file.

---

## Sound Design

- **SFX:** Digital beeps, data burst sounds, static crackle
- **Timing:** Sync audio glitches to visual glitches (±2 frames)
- **Music:** Electronic, industrial, dark ambient

---

## Use Cases

✅ **Good for:**
- Cybersecurity products
- Gaming / esports
- Music videos (electronic, hip-hop)
- Tech product launches
- Error/404 pages
- Edgy brand content

❌ **Avoid for:**
- Healthcare / wellness
- Financial services
- Children's content
- Luxury brands
- Anything requiring "stability" feeling

---

*Reference: Watch Dogs UI, Mr. Robot titles, Cyberpunk 2077 aesthetic, datamosh art*
