Interactive Spectral 3D Ghost Effect

This is an Interactive Spectral 3D Ghost Effect. It utilizes Three.js and custom GLSL shaders to render a dynamic, mouse-tracking entity with analog signal decay. Its function is to serve as an immersive focal point or an interactive background element. The effect effectively bridges direct user input with procedural visual storytelling.

Specs

• Weight: ~500 KB (including Three.js engine)..
• Dependencies: Three.js, Tweakpane.
• Browser Support: Modern browsers with WebGL support.

Anatomy

The component is structured into distinct rendering phases.

• HTML (Skeleton): An initial preloader overlay hides the WebGL setup, smoothly transitioning to the main full-screen container once the Three.js canvas mounts and compiles shaders.
• CSS (Skin): Strict absolute positioning ensures the canvas fills the viewport without scrolling. High-contrast typography (PPSupplyMono) establishes the visual tone before the 3D scene appears.
• JS (Nervous System): The core engine orchestrates a WebGLRenderer, camera, and a multi-pass EffectComposer. It handles real-time pointer tracking, calculates velocity, and pushes these values into the shader pipeline to control glow intensity and particle generation.

Logic

The defining characteristic of the visual degradation is embedded within the custom fragment shader.

if (uAnalogJitter > 0.01) {
  float jitterAmount = (random(vec2(floor(time * 60.0))) - 0.5) * 0.003 * uAnalogJitter * uAnalogIntensity;
  jitteredUV.x += jitterAmount;
}

Instead of smooth sinusoidal transitions, this logic applies a discrete, framerate-locked UV coordinate shift using floor(time * 60.0). This mathematical quantization flawlessly simulates the authentic, jagged tracking errors of a degraded VHS tape, avoiding the “too smooth” look of standard digital animations.

Feel

Inertial and noisy. The entity does not snap to the cursor; it floats with calculated physical resistance and drag. The procedural grain, VSync roll, and color bleeding give the interaction a tactile, almost abrasive texture, grounding the sterile digital canvas into physical reality.