A deconstruction of the elements that forge SensCode.
A look at recent builds - every line hand-coded, every render path measured.
A community-driven gaming platform where players log titles, rate them 1–10, and vote on genre-specific leaderboards. Retro-arcade aesthetic with pixelated type, neon accents, and XP-based progression.
Visit live site
Boutique e-commerce for hand-sewn felt plushies, featuring the Orchard Pals line, a behind-the-scenes content hub, and a tiered Patreon membership for early drops and commissions.
Visit live siteThe defining aesthetic of the platform. Instead of flat, solid colors, we utilize a combination of CSS backdrop-filter: blur(), semi-transparent backgrounds, and subtle 1px luminous borders. This creates a frosted-glass effect that allows the underlying gradients and parallax elements to softly bleed through, providing a profound sense of depth and hierarchy without overwhelming the content.
Every major card on the site acts as a physical object. Using custom Javascript mathematics, we track mouse and touch coordinates across the element's bounding box, mapping them to CSS rotateX and rotateYtransforms. It’s a tactile response that makes the interface feel alive.
The floating orbs that drift behind the content aren't static images or heavy WebGL canvases. They are pure CSS shapes driven by a lightweight JavaScript loop hooking into the scroll event. Each orb is assigned a unique data-speedmultiplier, meaning elements closer to the "lens" move faster than those in the distance, simulating true 3D space entirely through 2D DOM manipulation.
A robust theme engine that listens to window.matchMedia. It seamlessly tracks your operating system's color scheme in real-time, instantly adjusting CSS variables. If manually overridden via the toggle, it gracefully stores the preference in local storage.
A subtle luxury touch. As your cursor moves across interactive panels, a radial gradient mapping tracks the coordinates, illuminating the borders and content like a flashlight shining across frosted glass.
A dense, localized demonstration of the interactive particle network. This highly concentrated node field utilizes an HTML5 Canvas to simulate a self-contained ecosystem. It features calculated physics including kinetic drift, friction limits, and explosive repulsion driven directly by the user's cursor movements and clicks.
No drag-and-drop builders, no inherited template debt. Every dependency in the stack — Next.js, Tailwind, Sanity, Postgres — earns its place by being measured before it ships. Code is hand-written, render paths are profiled, and you walk away with the entire source on day one.