Wormhole Generator

A real-time 3D wormhole rendered with Three.js and hand-written GLSL. A portal core with an animated fresnel rim sits inside concentric vortex rings, orbiting octahedral crystals, helical dimensional streams and hundreds of energy particles, all resolved through a bloom pass for cinematic light bleed. Six live controls reshape the scene while it runs, four fixed colour variants sit alongside a theme-reactive mode that follows the site palette, and the camera can be orbited by hand or left to drift on auto-orbit. Any configuration can be copied as a link, and the last one is restored on return.

The rendering stack combines Three.js scene primitives, custom shader materials and an UnrealBloomPass post-processing chain. A TypeScript scene controller owns geometry, uniforms, the animation loop and full resource disposal, while a thin React wrapper handles mount, resize, pointer orbit, visibility and theme updates. Colour resolves through a variant layer: the theme mode reads CSS custom properties from the DOM and remaps them into Three.js colours whenever the palette or light/dark mode changes, while each fixed preset supplies its own light and dark colour set plus a render profile that tunes tone exposure and bloom strength, radius and threshold. Control state lives in its own hook that hydrates from the URL query string, then local storage, then defaults, and mirrors every change back to both behind a debounce. A shared art-quality signal, a scroll-activity monitor and a WebGL circuit breaker throttle or park the renderer under load, and the whole surface mounts lazily behind a deferred-mount boundary with chunk-load retry.

┌────────────────────────────────────────────────────────────────────────────┐
│       CONTROLS · PRESETS · COLOUR VARIANT · URL QUERY · SAVED STATE        │
└────────────────────────────────────────────────────────────────────────────┘
                                      │
                                      ▼
┌────────────────────────────────────────────────────────────────────────────┐
│                     WORMHOLE SCENE  (Three.js + WebGL)                     │
├────────────────────────────────────────────────────────────────────────────┤
│                                                                            │
│   ┌────────────────────────────────────────────────────────────────────┐   │
│   │                           CONTROL STATE                            │   │
│   │     Query then storage then defaults · presets · clamped params    │   │
│   └────────────────────────────────────────────────────────────────────┘   │
│                                    │                                       │
│                                    ▼                                       │
│   ┌────────────────────────────────────────────────────────────────────┐   │
│   │                       SCENE GRAPH + SHADERS                        │   │
│   │   ┌──────────────────────────┐  ┌─────────────────────────────┐    │   │
│   │   │ Portal core · fresnel    │  │ Vortex rings · crystals ·   │    │   │
│   │   │ GLSL vertex + fragment   │  │ streams · particle field    │    │   │
│   │   └──────────────────────────┘  └─────────────────────────────┘    │   │
│   └────────────────────────────────────────────────────────────────────┘   │
│                                    │                                       │
│                                    ▼                                       │
│   ┌────────────────────────────────────────────────────────────────────┐   │
│   │                     COLOUR + THEME RESOLUTION                      │   │
│   │     CSS custom properties or fixed preset · light/dark profile     │   │
│   └────────────────────────────────────────────────────────────────────┘   │
│                                    │                                       │
│                                    ▼                                       │
│   ┌────────────────────────────────────────────────────────────────────┐   │
│   │                   BLOOM PASS + QUALITY GOVERNOR                    │   │
│   │     UnrealBloom composite · art-quality tier · circuit breaker     │   │
│   └────────────────────────────────────────────────────────────────────┘   │
│                                                                            │
└────────────────────────────────────────────────────────────────────────────┘
                                      │
                                      ▼
┌────────────────────────────────────────────────────────────────────────────┐
│             ANIMATED PORTAL  +  SHAREABLE LINK  +  PNG EXPORT              │
└────────────────────────────────────────────────────────────────────────────┘

On mount the React wrapper resolves control state (URL query first, then saved state, then defaults) and hands it to a scene controller that builds the camera, renderer, frame buffers and geometry, then compiles the portal core's vertex and fragment shaders. Each frame the controller advances shader uniforms and particle offsets by delta time, rotates the rings, crystals and streams at their configured speeds, and renders the result through the bloom composite. Colour is resolved separately from motion: in theme mode a DOM observer watches the palette and light/dark attributes and remaps CSS custom properties into Three.js colours in real time, while a fixed variant supplies its own colour set and render profile. Pointer and touch drags orbit the camera, and the camera position is mirrored into the URL on an interval so a specific vantage point can be shared. A frame-rate-aware quality tier, a scroll-activity monitor and an IntersectionObserver together decide whether to render at full quality, damp the loop, or park it entirely, and every control change is clamped to a safe range and written to both the URL and local storage before the next frame.

• Delivers an interactive 3D portal scene that gives the portfolio a memorable first impression.
• Lets visitors inspect a cinematic WebGL object rather than only watch a static animation.
• Creates long-running ambient motion that feels polished during browsing.
• Adapts to the current theme so the visual belongs to the surrounding page.