3D Website Hackathon

Introduction section
About section
Tools section
Rules section

Inspiration

The name said it all — "3D Websites Hackathon". Instead of picking an arbitrary theme, we asked: what if the website itself was the most powerful demonstration of what this hackathon is about?

That became the concept — a meta experience. A 3D website about the 3D Websites Hackathon. The site is the submission. It shows judges exactly the kind of work participants can build, while telling the story of the hackathon itself.

The aesthetic draws from cyberpunk anime, sci-fi HUD interfaces, and neon-lit digital universes — the kind of visual world that makes you stop scrolling and say "Wow."

What it does

An immersive, scroll-driven 3D experience that walks visitors through the entire hackathon — its concept, challenge, tools, and rules — through stunning visuals rather than plain text.

Key experiences:

Hero Section — A cinematic opening with animated title, floating tech badges, and a live Three.js particle universe in the background
Cyberpunk Anime Mech — A full-body robot character built entirely from Three.js geometry, positioned to the right of the screen. It has a flickering neon visor, spinning reactor core, pulsing energy orb, a holographic scan line sweeping its body, and reacts to mouse movement in real time
Scroll-Driven Camera — The Three.js camera interpolates through 6 different positions as you scroll, making the 3D scene feel like a living environment
Tools Orbit — An animated SVG orbit diagram showing all 7 major tools as clickable nodes
Particle Burst, Card Tilt, Magnetic Buttons, Glitch Text — Interactive micro-effects throughout every section
Animated Loader — A custom loading screen with progress bar and 8-stage status messages before the experience begins

How we built it

Built entirely with vanilla HTML, CSS, and JavaScript — no frameworks, no build tools.

Three.js v0.160 — Core 3D engine. Used for the particle star field (5,000 points), the anime mech character (built from BoxGeometry, OctahedronGeometry, TorusGeometry, etc.), the grid plane, warp tunnel, and floating wireframe geometry
Custom GLSL Shaders — Written from scratch for the star twinkle effect, nebula particles, grid plane pulse animation, warp tunnel stripes, and the character's particle orbit field
GSAP v3.12.4 + ScrollTrigger — All scroll-driven section animations, staggered card entrances, counter number animations, and the tools orbit rotation
IntersectionObserver API — Used for the active nav link tracking (instead of ScrollTrigger, to avoid transform conflicts)
Raw scroll event listener — Drives the scroll progress bar for zero-lag frame-perfect sync
Kiro AI — Used as a code assistant throughout the entire development process for architecture decisions, shader writing, bug fixing, and optimization

Challenges we ran into

GSAP vs CSS transform conflicts — Card hover states using transform: translateY() were conflicting with GSAP's entrance animations on the same property, causing visible position jumps. Solved by switching hover effects to filter: brightness() and box-shadow instead
Scroll progress bar lag — Initial implementation used GSAP's ScrollTrigger.onUpdate with a CSS transition on width, causing the bar to always trail behind. Replaced with a native scroll event listener writing directly to style.width with no transition
Nav active state getting stuck — ScrollTrigger-based section detection broke when GSAP transforms shifted element positions. Replaced entirely with IntersectionObserver which reads real viewport intersection, immune to transform offsets
Tools orbit on mobile — CSS transform: scale() for mobile sizing conflicted with GSAP's continuous rotation: 360 animation since both target the transform property. Fixed by using explicit width/height sizing instead of scale
Anime character readability — Early builds had a heavy nebula cloud and energy rings that made text sections hard to read. Removed those elements entirely, reduced particle opacity, and positioned the mech to the right side so it never overlaps content

Accomplishments that we're proud of

The anime mech character is built entirely from Three.js primitives — not a single external 3D model was used. Every part of the robot — helmet, visor, reactor, arms, legs, energy orb — is composed from BoxGeometry, OctahedronGeometry, TorusGeometry, and CylinderGeometry with custom materials and edge lines
Custom GLSL shaders for every major visual effect — the star twinkle, grid pulse, warp tunnel, and character particle orbit are all written in GLSL from scratch
The entire experience is 204KB on disk (excluding node_modules) and loads entirely from CDN — no backend, no build step, deploys anywhere instantly
Zero external 3D assets — everything visual is generated procedurally at runtime

What we learned

How to architect a multi-section scroll-driven Three.js scene where the camera moves through a 3D world as the user reads through content
The subtle but critical interactions between GSAP's transform-based animations and CSS hover states — and how to design around them cleanly
How IntersectionObserver with rootMargin is far more reliable than ScrollTrigger for UI state (like nav highlighting) because it's immune to layout shifts caused by animations
Building complex 3D characters entirely from primitive geometry — the mech proved that you don't need Blender or external models to create a visually compelling character in Three.js
The importance of separating "background atmosphere" from "foreground legibility" — the biggest visual improvement came from removing effects, not adding them

What's next for 3D Website Hackathon

Audio — Ambient cyberpunk soundtrack with Web Audio API visualization reacting to the Three.js scene
Interactive mech — Click interactions that trigger special animations (power-up sequence, transformation)
WebGPU upgrade — Migrate the renderer to WebGPU for significantly higher particle counts and more complex shaders
Mobile 3D — A dedicated mobile scene with a lighter particle system and touch-driven camera controls
Expanded sections — A live countdown timer to the hackathon deadline, a participant gallery, and a leaderboard section