Project Overview
Stay Awake is an interactive, single-page client-side dashboard engineered to bridge low-level operating-system power hooks with high-performance WebGL graphics, procedural canvases, and zero-dependency synthetic acoustics.
Screen Wake Lock
Prevents display sleep, dimming, or system timeouts via the native Screen Wake Lock API.
3D Creature Eyes
Real-time biological cursor tracking, procedural irises, lighting reactions, and micro-saccades.
G-Wagon Pro Widget
Interactive vector vehicle with a real-time HUD (RPM/MPH) and synthesized V8 engine audio.
Dual-Mode VibeClock
World clock and stopwatch with an aerodynamic 3D flick-to-spin physics engine.
Why Use Stay Awake? Key Benefits for Employees & Users
Whether you are managing long presentations, monitoring critical background tasks, or maintaining a focused workspace, Stay Awake provides tangible workflow improvements:
Uninterrupted Presentations
Eliminates sudden monitor dimming, screensavers, or OS sleep locks during client calls, webinars, or long reading sessions without installing unverified third-party software.
Zero Installation & IT-Safe
Runs entirely client-side using standard web APIs. No executable binaries, administrative rights, background daemons, or registry modifications required.
Zen Mode Workspace Cleanliness
Instantly declutters the entire interface via hotkey H or the toggle button, removing all menus, widgets, and banners for pure, distraction-free focus.
Instant Privacy Mode
Single hotkey (B) stealth toggle conceals visual eye animations instantly during shared-screen meetings or quick breaks.
Core Modules & Functional Breakdown
- Automatic Wake Lock Daemon: Acquired via
navigator.wakeLock.request('screen')on user interaction; automatically releases upon tab invisibility to save battery and re-acquires on focus. - Zen Mode Visual Cleaner: Instantly hides all application elements (3D creatures, G-Wagon, drawers, floating ads, and clocks) with zero latency via class toggling and smooth opacity transitions.
- Dynamic Video Wallpaper Hub: Fixed background viewport driven by an asynchronous catalog loader with cache-friendly streaming, custom link parsing, and automatic playback fallback.
- Procedural Biomimetic Eye System: Three.js mesh utilizing inverse kinematics and raycaster unprojection to emulate lifelike pupil dilation, blink transitions, and ambient light sensitivity.
- Zero-Asset Real-Time Audio DSP: Pure Web Audio API synthesis generating stereo-panned sound effects, multi-cylinder engine rumble, and notification chimes with zero external MP3 downloads.
- Spring-Damped Physics Engine: Touch and mouse inertia engine applying Hooke's law with exponential decay factors to handle free-spinning clock widgets and snap-back behaviors.
- Focus Productivity Suite: Floating notification and timer subsystem supporting custom intervals, real-time SVG progress arcs, and audible countdown completions.
System Execution Pipeline & Rendering Loops
The application is powered by decoupled execution loops to ensure UI interactions remain at 60+ FPS regardless of active background computation:
| Pipeline Phase | Trigger & Rate | Operations Performed |
|---|---|---|
| Graphic Tick | requestAnimationFrame (~60–144Hz) |
Interpolates cursor target coordinates (LERP), updates eyeball mesh rotation matrix, evaluates saccade noise generator, and renders Three.js scene. |
| Physics & Time Tick | setInterval (16.6ms & 1000ms) |
Computes spring deceleration for spinning 3D widgets, evaluates world clock timezone offsets, and runs active stopwatch delta calculations. |
| Audio Synthesis Tick | Event-driven / AudioParam schedules | Updates real-time oscillator frequencies (pitch scaling), shifts dynamic low-pass cutoffs, and adjusts stereo panner nodes based on cursor X/Y coordinates. |
| Visibility Lifecycle | document.visibilitychange |
Halts Three.js rendering loops and releases screen wake lock when hidden; seamlessly resumes graphics and requests lock when foregrounded. |
Web Audio Programmatic Synthesis Graph
Instead of loading static sound assets over the network, all acoustic feedback is programmatically constructed in real time using the browser's AudioContext.
| Sound Effect | Node Architecture | Modulation Formula & Behavior |
|---|---|---|
| V8 Engine Idle | 2x Sawtooth Oscillators → BiquadFilter (Low-Pass) → Gain | Oscillators tuned to 35Hz and 42Hz; dynamic cutoff filter set to 120Hz to create deep mechanical throbbing. |
| Throttle Rev | Sawtooth + White Noise → High-Pass Filter → Distortion Node | Frequency ramps linearly from 35Hz to 180Hz as RPM scales toward 6,200; filter cutoff opens dynamically with touch pressure. |
| Biological Blink | Sine Wave Oscillator → Fast Decay Envelope (0.04s) → StereoPanner | Pitch glide from 320Hz down to 180Hz; panned horizontally according to creature eye position on the viewport. |
| Timer Alarm | 2x Triangle Oscillators → Gain Modulation → Master Out | Dual-tone harmonic pulse (880Hz / 1760Hz) pulsed via exponential gain envelope decay every 500ms. |
Technical Specifications & Browser APIs
| Component | Technologies & APIs | Implementation Functionality |
|---|---|---|
| Wake Lock Engine | Screen Wake Lock API | navigator.wakeLock.request('screen') keeps the display illuminated. |
| 3D Eye Tracking | Three.js, WebGL, 2D Canvas | Unprojects 2D pointer coordinates to 3D targets; renders procedural textures. |
| Vehicle Engine | Inline SVG, Web Audio API | Sawtooth, square, and triangle oscillators feed dynamic low-pass filters. |
| Wallpaper Hub | HTML5 Video, DOM API | Dynamically updates background video source with live search and category filters. |
| VibeClock Physics | CSS 3D, Damped Springs | Calculates release velocity (dx / dt) and dampens 3D spin back to 0° baseline. |
| Sound System | Web Audio API | StereoPannerNode pans UI audio relative to horizontal cursor coordinates. |
Keyboard Shortcuts & Interactive Triggers
| Input Action | Target Subsystem | Triggered Behavior |
|---|---|---|
| H | Zen Mode Manager | Toggles Zen Mode workspace clean-up, hiding all UI overlays, widgets, and creatures. |
| ESC | Zen Mode Manager | Instantly exits Zen Mode and restores all hidden workspace components. |
| B | Creature Eyes | Toggle visibility / Stealth Mode (drops render loop to 0 FPS for power conservation). |
| Space | Creature Eyes | Forces an instantaneous double-eyelid blink animation with audio chime. |
| C | G-Wagon Widget | Cycles vehicle vector paint schemes (Matte Olive, AMG Gray, Obsidian Black, Gold). |
| 1 to 8 | Expression Engine | Executes eyelid keyframe presets (Happy, Flirty, Angry, Sleepy, Surprised, Crazy, Confused). |
| Double-Click Screen | Procedural Canvas | Generates randomized iris noise patterns, color palettes, and adjusts Three.js point lights. |
| Hold Vehicle Body | Throttle Controller | Spools up virtual V8 engine, fires exhaust backfire particles, and drives speedometer HUD. |
| Double-Click Clock | VibeClock System | Swaps current mode between World Time Ring and Millisecond Precision Stopwatch. |
| Drag / Toss Clock | Physics Engine | Applies velocity vector to rotate clock card in 3D space with continuous spring stabilization. |
Diagnostics, Performance & Hardware Compatibility
| Issue / Diagnostic State | Root Cause | Resolution Strategy |
|---|---|---|
| Wake Lock Fails on Load | Browser autoplay / user-activation policy | Wake lock requires a prior user gesture (click, tap, or keypress). Lock is queued and automatically claimed on first touch. |
| Audio Not Playing | AudioContext is in suspended state |
Browsers block unprompted audio. The first user interaction triggers audioCtx.resume(). |
| High Battery Usage on Mobile | Continuous WebGL canvas redraw | Press H for Zen Mode or B for stealth mode; background render loops suspend automatically. |
| Video Background Black Screen | CORS or invalid custom MP4 link | Ensure custom video URLs allow cross-origin requests (`Access-Control-Allow-Origin: *`) and use H.264 video encoding. |