Experiments

A horizontal neon tube with volumetric downward light casting. Features realistic flicker animation and customizable colors.

A high-end 3D glass crystal with realistic refraction, chromatic aberration, and interactive mouse controls. Move your mouse to see the lens effect.

Controls: Move your mouse to rotate the crystal and activate chromatic aberration. The crystal slowly tumbles on its own.

A fluid surface distortion effect with mouse trail and RGB shift. Move your mouse to create ripples that fade over time.

Controls: Move your mouse over the image to create smooth, fading distortion trails. The ripples include subtle RGB shift for a premium effect.

An endless, scrolling wireframe landscape with a retro-futuristic Tron aesthetic. The terrain features height displacement, infinite scrolling, and neon glow effects.

Features: High-performance WebGL wireframe terrain with GLSL shaders. The grid scrolls infinitely using vertex shader time offsets, creating a smooth, seamless animation. Post-processing adds a neon glow effect for that authentic synthwave aesthetic.

A high-performance particle network system with dynamic connections. Particles drift and connect when close to each other or your mouse cursor, creating a spider-web-like structure.

Features: Optimized WebGL rendering using a single LineSegments geometry with dynamic BufferAttributes. Particles wrap around edges for infinite space. Move your mouse to interact with the network - particles are attracted to your cursor and form connections dynamically.

High-end 3D text with liquid mercury/chrome material. The surface ripples organically, reacting to time and mouse movement, while reflecting a high-contrast environment with bloom post-processing.

Features: 3D text using TextGeometry with MeshPhysicalMaterial. Shader injection via onBeforeCompile creates organic vertex deformation (liquid ripples). Environment map provides realistic reflections. UnrealBloomPass adds specular highlights and glow. Mouse movement affects ripple intensity.

A true WebGL post-processing effect that renders a 3D scene entirely using ASCII characters in real-time. Features programmatically generated character atlas and customizable matrix-style colors.

Features: Real-time ASCII conversion using custom WebGL shader. Programmatically generated character atlas texture. Rotating 3D geometry with high-contrast lighting. Matrix-style color modes (Green, Amber, Cyan). Adjustable character density and invert toggle.

High-performance "Threshold & Stretch" technique that creates a pixel sorting effect in real-time. Hover over the image to see the data corruption effect with RGB split glitch.

Features: Custom GLSL shader with threshold-based pixel sorting. Smooth hover transitions. RGB split chromatic aberration. Reusable PixelSortCard class for individual image elements. Performance optimized for real-time rendering.

Interactive buttons that "stick" to the mouse cursor when hovering, creating a playful, physical floating effect with elastic snap-back animation.

Features: GSAP-powered elastic snap-back animation. Parallax text effect for depth. Smooth magnetic attraction on hover. Performance optimized with GPU-accelerated transforms. Multiple button variants with different color schemes.

A subtle, animated static noise texture that sits on top of content to unify the visual aesthetic. The grain effect uses SVG-based fractal noise with step-based animation for authentic analog film grain.

Film Grain Effect

This overlay creates a cinematic, analog film aesthetic with subtle animated noise. The grain is applied using mix-blend-mode overlay for natural integration with any content.

Action Button Secondary Tertiary

Features: SVG-based fractal noise pattern. Step-based animation for authentic analog static. Mix-blend-mode overlay for natural integration. Low opacity (7%) for subtle effect. Pointer-events: none to allow full interactivity.

A high-end "decrypt" effect that makes text appear to unscramble itself by rapidly cycling through random characters before resolving to the correct letter, moving from left to right. Hover over any text to retrigger the effect.

Features: Optimized left-to-right decryption algorithm. Smooth 60fps animation using requestAnimationFrame. Auto-triggers on page load. Re-triggers on mouse hover. Prevents layout shifts with proper CSS. Monospace font for authentic terminal aesthetic.