Inspiration

Most hackathon "3D websites" use 3D as decoration — a rotating logo, a background you scroll past. We wanted a site that couldn't work as a 2D page at all: one where the 3D scene is the interaction, not the wallpaper. Since it's a cybersecurity build, the natural fit was a live threat-map globe you actually pilot yourself — the same visual language security dashboards use, but one visitors can grab and turn.

What it does

BREACH:// is a single-page 3D site built around a draggable, zoomable threat globe (Three.js) with animated data packets traveling along live arcs between nodes. Layered around it:

A live "digital fingerprint" panel that reads real browser signals (OS, screen, timezone, language, hardware) back to the visitor in real time
A real AES-256-GCM encrypt/decrypt tool (Web Crypto API) anyone can use to send an actual secret message to a friend
A self-contained "hack the mainframe" mini-game — a Mastermind-style code-breaking puzzle with live feedback
A shared, persisted leaderboard and a global "breaches attempted" counter that update across everyone who plays
A password entropy / crack-time estimator using real information-theory math
A live-generating simulated security log feed, and a working contact form

How we built it

Vanilla JavaScript, HTML5 and CSS3 — no frameworks. Three.js (r128) handles the 3D globe: an icosahedron wireframe, procedurally placed nodes, and quadratic Bézier arcs with animated "packet" meshes traveling along them. Camera orbit is done manually with spherical coordinates driven by pointer/touch events rather than an external controls library. The password tool and encryption tool use native browser APIs (Math.log2 entropy math and window.crypto.subtle respectively) — no external crypto library. Shared data (leaderboard, breach counter) persists via a key-value storage layer with a localStorage fallback for standalone hosting.

Challenges we ran into

Getting drag-to-orbit to feel natural without an OrbitControls dependency took some iteration on damping and clamping the vertical angle. Balancing visual density (particles, arcs, CRT scanline overlay, log feed) against performance and legibility of the overlaid text was an ongoing trade-off. We also wanted the "hacking" content to stay clearly playful and simulated rather than resembling real intrusion techniques, so every game and tool is explicitly labeled as sandboxed and client-side only.

Accomplishments that we're proud of

A genuinely navigable 3D scene (not a scroll trick), three real, working tools (encryption, entropy estimation, live fingerprinting) instead of static copy, and a shared leaderboard that persists across visitors — all in one dependency-light build.

What we learned

How much of a "3D website" experience comes from camera control feel rather than geometry complexity, and how far native browser APIs (Web Crypto, Intl, navigator) can go without any backend or external library.

What's next for BREACH://

Wiring the leaderboard to a real hosted backend (Supabase/Firebase) for true cross-visitor persistence outside of local storage, adding more node/arc data patterns, and a mobile-optimized touch-orbit mode.