Anomaly Response Squad — Immersive WebGL Landing Experience
A WebGL landing page with no framework underneath it
Anomaly Response Squad is a high-fidelity, cyberpunk-themed landing experience — a rotating wireframe globe, scroll-triggered reveals and a custom cursor, all on semantic HTML, CSS custom properties and vanilla JavaScript. The constraint was self-imposed, and it is the point: no framework, no build step, and the frame budget still has to hold on a mid-range phone.
- Type
- Interactive landing experience
- Role
- Concept, motion design & build
- Core stack
- Vanilla JS · Three.js · GSAP
- Focus
- WebGL motion on a strict budget
The problem
Immersive sites are usually where front-end craft goes to die. The concept is strong, the reference reel looks incredible, and then the build reaches for a framework, a 3D scene graph and half a dozen animation libraries — and ships two megabytes of JavaScript to render a page that has no state, no routes and no data.
This one had the opposite brief. The interface is theatrical by design: a rotating wireframe earth that tracks the pointer, text that glitches and resolves on load, figures that count up, intel panels that redact themselves until you scroll them into view. Every one of those is a reason to add a dependency, and every dependency is weight on a page whose entire job is to *feel* fast.
The real question was which of those effects genuinely need a library and which are a few lines of transform. Getting that wrong in either direction costs you: reach for too much and the page stutters on the devices most of the traffic arrives on; reach for too little and you spend a week reimplementing a scroll scheduler badly.
What I built
A single-page tactical interface on semantic HTML5 and CSS custom properties, with vanilla JavaScript orchestrating two deliberate dependencies — GSAP for motion and Three.js for the globe.
An interactive 3D globe — a rotating wireframe earth in Three.js that leans toward the pointer, carrying the "global monitoring" idea without a paragraph explaining it.
A dual-layer cursor — a dot that tracks precisely and a follower that lags behind it, with hover states that respond to what is underneath. It is the detail that makes the whole surface feel instrumented.
Scroll-choreographed reveals — sections fade up, figures count, and redacted text resolves as it enters the viewport, sequenced with GSAP ScrollTrigger rather than fired all at once.
A living grid backdrop — an animated grid that establishes the setting on every screen, and simplifies rather than disappears on mobile.
A typographic system doing real work — Orbitron for the operational headings, Rajdhani for body copy, held together by CSS custom properties so the theme is one place to change.
The technical decisions, and why
No framework, because there is no state to manage
React earns its weight when UI is a function of changing state. This page has none — no routes, no forms with server round-trips, no data that outlives a scroll position. What it has is a lot of imperative motion, which is exactly the thing a virtual DOM sits awkwardly on top of. Dropping the framework removed the hydration cost, the build step and the dependency tree, and left the code shorter rather than longer.
Three.js kept to a wireframe, not a scene
A textured, lit globe means loading maps, shipping a renderer configured for materials it barely uses, and paying for it on every device. A wireframe reads better against the theme *and* costs a fraction as much: geometry, a line material, one draw call. The globe also parks itself when it scrolls out of view, so the render loop is not competing for frames with the animations that are actually on screen.
GSAP as the scheduler, transforms as the payload
GSAP is the one place a library clearly beats hand-rolled code — ScrollTrigger solves start/end resolution, refresh on resize and cleanup, which is a week of subtle bugs otherwise. What it animates is deliberately narrow: transform and opacity only, so every tween stays on the compositor and off the layout path. QuickTo drives the cursor for the same reason — it writes to the same properties every frame without re-reading layout.
The theatre degrades before the content does
A custom cursor is meaningless on touch, and a wireframe globe spinning behind text is hostile to anyone who has asked their system for reduced motion. Both are treated as enhancements layered onto a page that already works without them, rather than load-bearing structure. The mobile layout re-composes the same content instead of scaling the desktop composition down, which is why the grid still reads at 375px.
Where it landed
The page delivers a genuinely immersive interface — 3D, scroll choreography, per-frame cursor motion — from static HTML and two libraries, with nothing to hydrate before it becomes interactive.
The transferable part is the discipline, not the aesthetic. Deciding per effect whether it needs a dependency, and constraining every animation to properties the compositor can handle alone, is what lets a page look this maximal and still behave well on the hardware people actually own.