LAMHO — Immersive 3D Supercar Showroom Overview I designed and built a cinematic, scroll-driven e-commerce experience for a luxury supercar brand, transforming a traditional product catalog into an immersive digital flagship. The site merges high-end automotive storytelling with real-time 3D visualization—allowing users to explore vehicles, inspect exploded engine assemblies, and configure their build without ever leaving the browser. The Experience The journey unfolds as a single continuous narrative. A hero 3D scene introduces the Ember GT-R1 with parallax typography and mouse-reactive camera work. As users scroll, the experience transitions through a curated collection grid, a spec-driven deep-dive with animated counters, and culminates in a fully exploded V8 engine view—every component rigged in 3D and choreographed to scroll progress. The result feels less like a website and more like a reveal film that you drive with your scroll wheel. Craft & Technology 3D Pipeline: Modeled, textured, and rigged the vehicle and engine assets in Blender, then optimized them via Draco-compressed glTF for web delivery. Real-Time Rendering: Built the 3D layer with React Three Fiber and Three.js, using custom shaders and studio-grade environment maps for photorealistic paint and metal finishes. Scroll Choreography: Synchronized the entire 3D scene—camera moves, model rotation, and engine explosion timelines—to the DOM using GSAP ScrollTrigger and Lenis smooth scroll. Architecture: Hand-authored custom CSS for total visual control and zero bloat; Firebase powers user auth, cloud storage for 3D assets, and live product data. Key Features Real-time 3D configurator with material swapping Scroll-scrubbed exploded engine animation Animated spec counters and blueprint overlays Responsive design with performance-optimized LOD fallbacks Outcome A category-defying web experience that positions the brand miles above template-based competitors—proving that automotive e-commerce can be as visceral as the cars themselves.

0

106

Marvelous Stone — Immersive Luxury Jewelry Experience Case Study / Creative Technology The Vision Marvelous Stone doesn't sell jewelry through photographs—it unveils it through light. The experience treats every gemstone as a celestial object and every band as sculpture, using the browser as a digital atelier where refraction, caustics, and precious metal meet scroll-driven cinematography. The goal was singular: make the user feel the weight of luxury before they ever touch the piece. Technical Execution Built with React Three Fiber and Three.js, the site centers on a persistent, high-fidelity 3D ring that serves as the user's guide through a vertically unfolding narrative. This isn't a static model—it's a fully rigged, gemologically accurate piece with a custom GLSL shader stack handling dispersion, internal refraction, and physically based metallic reflections. The stone's facets catch light in real-time as the ring rotates and glides between sections, responding to scroll position with cinematic inertia. The environment is layered with procedural bokeh particles, soft volumetric fog, and HDR environment mapping that shifts tone as the user moves from the hero into collection galleries. Advanced CSS choreographs the DOM overlays—glassmorphic feature cards, typographic reveals, and electric-border product frames—while the WebGL layer handles depth, ensuring the 3D ring can pass behind and in front of HTML elements without breaking immersion. The Contra Typical jewelry e-commerce relies on white backgrounds and macro photography. Marvelous Stone rejects the catalog approach entirely. The product is never static; it floats, it breathes, it travels. The user doesn't browse categories—they follow a diamond through an atmosphere of trust signals, collection showcases, and editorial storytelling. The interface dissolves the boundary between product visualization and brand mythology. Recognition-Worthy Details Persistent 3D Narrative Thread: A single, continuous ring model accompanies the user through the entire scroll journey, creating spatial continuity rarely attempted in web design. Custom Gemstone Shaders: Hand-authored GLSL simulates chromatic dispersion and internal caustics, making the central stone feel alive without relying on pre-rendered video. Cinematic Scroll Choreography: GSAP-driven camera moves and model transitions turn vertical scrolling into a directed camera pass. Electric Border Effects: The featured product card utilizes animated shader borders that pulse with energy, contrasting organic gemstone beauty with digital precision. Depth-Integrated UI: HTML overlays exist in the same visual space as the WebGL canvas, with the ring model dynamically occluding and revealing text elements. Atmospheric Bokeh Systems: Procedural background particles create an ethereal, luxury-appropriate depth field without heavy video assets. Result A website that understands jewelry isn't just worn—it's witnessed. Marvelous Stone elevates a product catalog into an act of digital theater, proving that high luxury and high technology are not opposing forces, but facets of the same craft.

0

183

THANDA — Immersive Beverage Experience Case Study / Creative Technology The Vision THANDA isn't just a product page—it's a temperature drop. The word itself means cold, and the experience had to deliver that sensation before the user ever took a sip. We set out to build a digital environment where the product doesn't sit on a shelf, but floats in its own atmosphere: effervescent, refreshing, and impossible to ignore. Technical Execution Built with React Three Fiber and Three.js, the entire experience is driven by a real-time WebGL pipeline. Each flavor variant exists as a physically-based 3D can with custom GLSL shaders handling metallic reflections, condensation droplets, and iridescent rim lighting that shifts as the user scrolls. The background isn't a static gradient—it's a living particle system simulating carbonation bubbles rising through chilled liquid, rendered via custom fragment shaders with noise-driven displacement. Scroll progression triggers cinematic camera moves using GSAP ScrollTrigger, seamlessly transitioning between flavor worlds. As the user journeys from Lemon Lime to Black Cherry, the entire scene undergoes a color temperature shift—environment maps morph, fog densities adjust, and typography refracts through the same light models illuminating the product. Advanced CSS layers sit atop the canvas with glassmorphism treatments that respect the 3D depth beneath them. The Contra Where beverage sites typically rely on flat photography and generic parallax, THANDA treats the browser as a real-time renderer. There are no JPEGs of cans—only geometry, materials, and light. The product doesn't rotate on a preset loop; it responds to scroll velocity, tilting with physics-based inertia. The "chill" isn't communicated through copy—it's visualized through shader-driven breath effects and caustic light patterns that mimic sunlight through ice-cold glass. Recognition-Worthy Details Procedural Condensation: Custom GLSL generates realistic water droplets on can surfaces that react to simulated temperature changes. Flavor-Driven Environments: Each SKU triggers a unique HDR environment map and chromatic palette, making every scroll feel like entering a new world. Carbonation Particle Systems: Bubble physics rendered in real-time with varying rise speeds and refraction indices. Post-Processing Pipeline: Bloom and glow effects isolate the product in a halo of cold light, separating it from the background without breaking physical realism. Zero Static Assets: Every can is a live 3D instance—lighting updates dynamically, reflections are environment-mapped, and labels retain crisp vector resolution at any zoom level. Result A website that quenches before the first click. THANDA proves that commodity products deserve experiential treatment—transforming a simple soda can into a cinematic object of desire through code, light, and physics.

0

200

Projapoti Anime Studio — Immersive Web Experience Case Study / Technical Art Direction The Vision Projapoti isn't merely a website—it's a living, breathing cinematic portal. Inspired by the metamorphosis of its namesake (the Bengali word for butterfly), the experience mirrors the studio's ethos: transformation through motion, beauty through technical precision, and worlds born from code. Technical Execution Built atop a custom WebGL pipeline, the experience leverages Three.js with hand-authored GLSL shaders to create a fluid, scroll-driven journey where a procedurally animated butterfly serves as the user's guide through layered anime universes. Each project reveal is masked through custom fragment shaders, transitioning between cinematic stills with painterly dissolves rather than hard cuts—evoking the feeling of flipping through a living storyboard. The butterfly itself is a rigged Blender animation exported as a skeletal mesh, with vertex shaders handling wing flutter dynamics in real-time, responding to scroll velocity and cursor proximity. Advanced noise functions drive atmospheric particle systems, while post-processing passes add chromatic aberration and film grain that shift intensity based on the narrative beat. The Contra Where typical studio sites rely on static portfolios and templated grids, Projapoti demands engagement. There is no passive consumption—only immersion. The interface dissolves the boundary between UI and environment. Navigation isn't a menu; it's a flight path. Typography doesn't sit on top of the experience; it exists within the atmosphere, refracting through the same light models that illuminate the characters. Recognition-Worthy Details Custom Shader Pipeline: Every transition is a unique GLSL composition—no stock fade-ins. Physics-Responsive Animation: Scroll inertia directly influences wing-beat frequency and environmental parallax. Cinematic Color Grading: Per-scene LUTs embedded in fragment shaders ensure each anime world maintains its distinct emotional palette. Zero-Compromise Performance: Despite heavy WebGL lifting, the experience maintains 60fps through aggressive frustum culling and LOD-managed geometry. Result A site that doesn't just show anime—it becomes anime. Projapoti proves that a development studio's digital presence can be as meticulously crafted as the worlds they create for the screen. This is web development treated as animation production: storyboarded, shaded, rigged, and rendered frame by frame in the browser.

0

228

saniowl hasan

Brand, web, and 3D immersive design for startups at key grow