About The Last Signal

Inspiration

I've seen a lot of 3D hackathon sites try to do everything at once — multiple rooms, a dozen models, several interaction modes — and end up feeling unfinished everywhere instead of polished anywhere. I wanted to test the opposite bet: what happens if I build one scene, one idea, and just push it as far as a single night allows?

The concept itself came from thinking about deep-space probes like Voyager — objects built once, launched, and left to broadcast for decades after anyone stopped paying close attention. That image (a signal still quietly going out into the dark, long after the reason for it has faded) became the whole site: a dormant artifact adrift in space, and scrolling through the page is the act of tuning in to what it's still saying.

What It Does

The Last Signal is a single-page, scroll-driven 3D experience. The camera moves through space around a rotating alien artifact as you scroll — not as a decorative animation layered on top of a normal page, but as the actual navigation mechanism. Three "transmissions" resolve as you pass through the scene: the concept behind the piece, what it's built from, and a closing call to action. Clicking the artifact triggers a shockwave of light through the surrounding particle field, as if it just picked up a reply.

How I Built It

• Three.js for the core scene: a procedurally built artifact (an icosahedron core plus a slightly larger wireframe shell — no external 3D models), a ~18,000-point particle field standing in for a galaxy, and a simple three-light rig (key, rim, ambient).
• UnrealBloomPass via Three.js's post-processing addons for the glow, combined with ACES filmic tone mapping so the light reads as cinematic rather than a flat wash.
• GSAP + ScrollTrigger to drive the whole experience: camera position and look-target are keyframed at four points and interpolated live against scroll progress, and the content panels fade in as they enter view.
• Vanilla HTML/CSS/JS, no bundler — a single index.html file, deployable by just dragging it onto a static host.

I treated the whole build as one continuous polish pass rather than a feature list: get the artifact and lighting right first, then the particle field, then bloom, then camera motion, then content, then the small details (loading screen, vignette, a "breathing" pulse on the galaxy so the scene doesn't feel static even when the camera holds still).

Challenges I Ran Into

• Making restraint look intentional, not empty. A single geometry and a particle field can easily read as "unfinished" rather than "minimal." Getting there took tuning bloom threshold/radius so only the hottest points glow, adding fog for depth, and layering small motion (rotation, breathing opacity, mouse parallax) so the stillness felt deliberate.
• Scroll-driven camera without physics jank. Tying camera position directly to scroll progress is simple in principle but easy to make feel abrupt. Keyframing four camera states and lerping between them with a scrub value on ScrollTrigger was the fix — smooth without needing a physics engine.
• Keeping it lightweight on mobile. Bloom and 18,000 particles aren't free. I reduced particle count and pixel ratio and softened the bloom strength below a width threshold so the experience degrades gracefully instead of chugging.

Accomplishments I'm Proud Of

Getting a scene with real depth and atmosphere — bloom, fog, a rotating hero object, a full particle galaxy, and a scroll-choreographed camera — out of a single dependency-light HTML file, with no external 3D assets at all. Everything you see is built from primitive geometry, light, and motion.

What I Learned

How much of "expensive-looking" 3D work actually comes from lighting, color grading, and motion timing rather than geometric complexity. The artifact itself is two primitive meshes and a sprite; almost all of its presence comes from the bloom pass, the tone mapping, and the way the camera reveals it over time.

What's Next

• Swap in real audio-reactive elements so the particle field responds to an ambient soundtrack.
• Add a second discoverable interaction beyond the click shockwave.
• Explore a WebGPU renderer path for higher particle counts on capable devices.

Built With

• html