Colophon.
A technical deep dive into the architecture, tools, and philosophy powering this high-performance engineering ecosystem.
Engine
The Stack
Next.js 15 (App Router) + React 19. Leveraging Server Components for data integrity and Client Components for high-fidelity 3D interactions.
Styling Laws
Strictly enforced design tokens. CSS-first variable architecture. Zero-runtime overhead for theme resolution.
Visuals & 3D
Graphics Pipeline
16 GLSL shaders orchestrated via R3F. Real-time FBO ping-pong simulations. Post-processing bloom and noise grain layers.
gl_FragColor = vec4(col * u_opacity, 1.0);Motion System
Framer Motion for layout and entrance reveals. GSAP for scroll-triggered depth and complex mascot IK tracking.
transition: { ease: [0.16, 1, 0.3, 1] }The Mascot: BYTE
BYTE is a custom-engineered mascot with a reactive brain managed by **Zustand**. It utilizes Inverse Kinematics (IK) to track the user's cursor in real-time across both 2D SVG and 3D R3F rendering modes. BYTE reacts to page changes, game events, and user interactions with a dynamic personality engine.