EXPLORATION // CYBEROPUNK AUDIO-VISUAL DEMO

A neon-soaked, scroll-driven web experience built with GSAP, ScrollTrigger, and Lenis. This project blends full-screen video sectors, procedural SVG grid visuals, reactive audio, and cinematic preload transitions into a single interactive "city-grid" journey.

Signal Overview

Exploration is a static frontend demo (no build step) with:

• an initial scroll lock + audio consent gateway
• a timed preloader sequence with counter/progress bar
• smooth scroll orchestration via Lenis
• section-based cyber headers animated by GSAP + ScrollTrigger
• smart video preloading/playback with IntersectionObserver
• scroll-reactive glitch audio layers
• dynamic footer SVG draw animation (DrawSVGPlugin fallback included)

Runtime Flow

1. Page boots in locked mode via setupInitialScrollLock().
2. User clicks START in the audio enable panel.
3. Click SFX plays, preloader opens, counter advances 000 -> 100.
4. Background music fades in (volume set to 0.5).
5. At preload completion:

• scroll lock is removed
• geometric SVG grid is generated
• GSAP/Lenis animation systems start
• section scroll audio logic is activated

Core Interaction Systems

1) Scroll Lock + Entry Gate

• isInitialScrollLocked blocks wheel, touchmove, and key-based scrolling.
• Removed only after user interaction, helping with autoplay/audio compliance and controlled first impression.

2) Preloader + Reveal

• Preloader interval runs every 50ms until 100.
• .gradient-reveal is animated upward for a cinematic "boot" reveal.
• .preloader fades out and is hidden when startup completes.

3) Smooth Scroll + Trigger Sync

• Lenis controls vertical smoothing.
• lenis.on("scroll", ScrollTrigger.update) keeps GSAP triggers in sync.
• GSAP ticker drives Lenis RAF for consistent timing.

4) Section Video Intelligence

• setupSmartSectionVideoPlayback() uses two IntersectionObservers:
• one observer "prewarms" nearby videos
• one observer toggles active playback based on viewport proximity
• Offscreen videos pause and drop playback rate to reduce load.
• video3 mute state adapts to mobile media query.

5) Cyber Header Animation Pack

Each section has its own timeline recipe:

• unique entry direction/skew/rotation for title lines
• accent line scale-in
• kicker/meta reveal
• looping neon text-shadow pulse

This yields distinct moods per sector while keeping a shared visual language.

6) Scroll-Reactive Audio

• Current section is inferred from scrollY buckets.
• Matching loop (scrollSound1/2/3) plays while scrolling.
• Sounds stop shortly after scrolling ends (150ms timeout).
• Background music loops independently.

7) Procedural + Drawn SVG Layers

• Grid lines are generated dynamically in setupGeometricBackground().
• Footer SVG is fetched and injected at runtime.
• If DrawSVGPlugin exists, path drawing uses plugin animation.
• Fallback mode uses strokeDasharray/strokeDashoffset draw simulation.

Stack

• HTML5 (semantic sections + media elements)
• CSS3 (neon gradients, blend modes, responsive breakpoints)
• JavaScript (vanilla)
• GSAP
• ScrollTrigger
• Lenis
• DrawSVGPlugin (optional enhancement with graceful fallback)

All libraries are self-hosted in project root:

• gsap.min.js
• ScrollTrigger.min.js
• lenis.min.js
• DrawSVGPlugin.min.js

Project Map

• index.html -> structure, media elements, sections, footer host, script wiring
• exploration.css -> full visual system, responsive rules, cyber styling
• exploration.js -> preload flow, audio controls, scroll lock, GSAP timelines, observers
• assets/audio/ -> click/preloader/glitch loops/background soundtrack
• assets/images/ -> section videos (desktop/mobile variants), SVG assets
• assets/fonts/ -> PPSupplyMono typeface

Run Local

No install required.

1. Open this folder.
2. Serve with any static server.
3. Open index.html in browser.
4. Click START to unlock the full audio-visual sequence.

Example:

python3 -m http.server 8080

Then visit http://localhost:8080.

Performance Notes

• Video preloading is staged to avoid loading all heavy media at once.
• Playback only runs near viewport to reduce decode pressure.
• Motion/audio experience is intentionally richer on desktop.
• Mobile breakpoints simplify typography/layout and tune media behavior.

Credits

• Demo: Sylenia Inc.
• Sound design/music credit in footer: @LXSTNGHT

---

If you want, this README can be extended with deployment snippets (Netlify/Vercel/static hosting), accessibility checklist, or a "how to swap sector videos + sounds" modding guide.