Cool Heroes

A collection of interactive hero section experiments.

Canvas 2D

ASCII Morphing Portrait

We made text wiggle and called it a creative direction. 492 lines of noise math for vibes.

Pure CSS/JS

Aurora Borealis

Soft gradient blobs with blur, CSS keyframe drift, and mouse-reactive parallax.

Canvas 2D

Dot Matrix Reveal

A grid of tiny dots reveals text via radial wave as you scroll.

Three.js + GLB

Drone Cursor Tracker

A mech drone GLB model that smoothly rotates to follow your cursor.

Three.js

Fluid Simulation

GPU-accelerated Navier-Stokes fluid dynamics with dye advection.

Three.js

Glossy Sphere Tiles

A tiled grid of glossy refractive spheres with environment mapping.

Three.js + GLB

Humanoid Head Tracker

A humanoid robot whose head bone tracks your cursor with procedural idle animations.

Three.js

Infinite Tunnel

A cyberpunk infinite tunnel fly-through with hexagonal wireframe rings and neon glow.

Three.js

Magnetic Particle Field

Ten thousand particles suspended in space, responding to your every move.

Three.js

Morphing Mesh

An organic form that pulses with quiet intelligence, shifting between states of matter.

Three.js

Raymarched Grid

An infinite digital frontier stretching beyond the horizon, built with raymarching.

Canvas 2D

Scroll Video

Apple-style scroll-driven video playback. Pre-rendered frames scrub with your scroll, with text callouts at key moments.

WebGL Shader

Flowing Silk Background

Glossy, cloth-like animated light bands — a full-page sticky background effect.

Video + CSS

Silk Bands Background

Flowing silk/glass-like bands with CRT grain overlay — a full-page sticky background effect.