▶ TRANSMISSION OVERVIEW

This VHS Horror Theme extracts the distinctive analog horror aesthetic from the main page, creating a reusable framework for digital decay. The theme includes visual corruption effects, VHS-style overlays, glitch animations, and interactive audio elements that degrade over time.

Core Features

• VHS static overlays and scan lines
• Dynamic text corruption and glitch effects
• Time-based escalation of horror elements
• Interactive audio context with ambient sounds
• Modular CSS classes for easy application
• JavaScript API for custom implementations

▶ COMPONENT LIBRARY

Brutal Aesthetic Mode

High-contrast, aggressive corruption effects for maximum visual impact.

NEJEDI SPENCL

CORRUPTED TEXT

[ BRUTAL_SIGNAL.DAT ]

Stark black and white aesthetic with extreme visual corruption and aggressive static overlays.

                    
// Enable brutal aesthetic mode

const vhsTheme = new VHSHorrorTheme();

vhsTheme.init();

vhsTheme.enableBrutalMode();

// Or create brutal text elements

vhsTheme.createBrutalText('NEJEDI SPENCL');

vhsTheme.createBrutalCard('SIGNAL', 'Corrupted data');

Typography Components

GLITCHED TITLE

◉ Flickering Subtitle Effect ◉

Text with corruption animation

<h1 class="vhs-title" data-glitch-text="GLITCH█D T█TLE" data-glitch-alt="GL█TCH▓D ▓ITLE">
    GLITCHED TITLE
</h1>
<p class="vhs-subtitle">◉ Flickering Subtitle Effect ◉</p>
<div class="vhs-corrupted-text">Text with corruption animation</div>
                

Card Components

[ CORRUPTED_FILE.VHS ]

A card component with VHS styling. Hover effects include glitch animations and chromatic aberration.

◉ ACCESS ◉

[ SIGNAL_LOST.DAT ]

Cards automatically degrade on hover with filter effects and border color changes.

◉ FAILED ◉

<div class="vhs-card">
    <h4>Card Title</h4>
    <p>Card content with VHS styling</p>
    <a href="#" class="vhs-button">◉ BUTTON ◉</a>
</div>
                

Button Components

◉ PRIMARY ACTION ◉ ◉ SIGNAL TRACE ◉ ◉ DATA CORRUPT ◉

<a href="#" class="vhs-button">◉ BUTTON TEXT ◉</a>

▶ USAGE GUIDE

Basic Implementation

Include the CSS and JavaScript files, then initialize the theme:

<!-- Include the theme files -->
<link rel="stylesheet" href="vhs-horror.css">
<script src="vhs-horror.js"></script>

<!-- Initialize the theme -->
<script>
    const vhsTheme = new VHSHorrorTheme({
        enableAudio: true,
        enableStatic: true,
        enableCorruption: true,
        enableSubliminal: true,
        staticIntensity: 0.12
    });
    vhsTheme.init();
</script>
                

CSS-Only Usage

For static styling without JavaScript effects:

<!-- Add theme class to body -->
<body class="vhs-theme">
    <!-- Add overlays -->
    <div class="vhs-static"></div>
    <div class="vhs-lines"></div>
    <div class="vhs-horror-bg"></div>
    
    <!-- Use theme classes -->
    <h1 class="vhs-title">Your Title</h1>
    <div class="vhs-card">Your Content</div>
</body>
                

Available CSS Classes

Layout

• .vhs-theme
• .vhs-grid
• .vhs-static
• .vhs-lines
• .vhs-horror-bg

Typography

• .vhs-title
• .vhs-subtitle
• .vhs-corrupted-text
• .vhs-text-mono
• .vhs-text-mono-alt

Components

• .vhs-card
• .vhs-button
• .vhs-subliminal

Colors

• .vhs-color-primary
• .vhs-color-accent
• .vhs-color-danger
• .vhs-color-muted

▶ FILE EXTRACTION

Theme Files

The VHS Horror theme consists of two main files extracted from the original MainPage:

vhs-horror.css

Complete stylesheet with VHS aesthetic, color variables, animations, and component classes.

◉ EXTRACT CSS ◉

vhs-horror.js

JavaScript module for interactive effects, audio context, and dynamic corruption.

◉ EXTRACT JS ◉

Original Source

View the original implementation that inspired this modular theme:

◉ VIEW ORIGINAL TRANSMISSION ◉