{ "name": "Anderson Mancini — projects", "url": "https://andersonmancini.dev/projects", "author": "Anderson Mancini", "count": 68, "projects": [ { "slug": "threejs-punk", "name": "Threejs-Punk", "url": "https://andersonmancini.dev/projects/threejs-punk", "markdown": "https://andersonmancini.dev/projects/threejs-punk.md", "tagline": "Fully featured Racing Game", "year": 2026, "categories": [ "Experiments", "Games", "WebGPU" ], "featured": true, "technologies": [ "WebGPU", "TSL", "GPU Compute", "Game Physics", "50+ Missions", "Multiple Cars", "Collectibles", "Rain & Reflections", "Custom Shaders", "Three.js" ], "description": "Threejs-Punk is not a demo — it is a full racing game made with Three.js, free to play on desktop and mobile. Tear through a rain-soaked megacity where neon, wet asphalt, and Blade Runner–scale atmosphere never really sleep. Clear 50+ missions, switch between multiple cars, and chase collectibles across a huge city built for exploration — multiple phases, side routes, and reasons to keep driving after the checkered flag. Under the hood: WebGPU, TSL, GPU compute, and a stack of custom rendering — realistic rain, live reflections, and physics tuned for racing — all pushing how far game quality on the web can go. Roots in a collaboration with Sunag for the Three.js Conference; launched September 28, 2026.", "status": "available", "demo": "https://threejspunk.com/", "source": null, "image": "https://andersonmancini.dev/images/thumbs/cyberpunk.webp" }, { "slug": "webgpu-decoration", "name": "WebGPU Decoration", "url": "https://andersonmancini.dev/projects/webgpu-decoration", "markdown": "https://andersonmancini.dev/projects/webgpu-decoration.md", "tagline": "Lumen Decor Studio 2", "year": 2026, "categories": [ "WebGPU", "Production" ], "featured": true, "technologies": [ "WebGPU Renderer", "Real-time Lighting", "Material Swapping", "Time-of-day Controls", "React Three Fiber" ], "description": "An interior decoration experience built with WebGPU and Three.js, focused on real-time lighting, material swaps, and a calm, editorial presentation of furniture in space. Lumen Decor Studio 2 explores how high-end product visualization can feel lightweight in the browser — with responsive controls, time-of-day lighting, and a layout that keeps the room readable on any screen.", "status": "available", "demo": "https://lumen-decor-studio-2.vercel.app/", "source": null, "image": "https://andersonmancini.dev/images/thumbs/lumen_decor_2.webp" }, { "slug": "webgpu-archiviz", "name": "WebGPU Archiviz", "url": "https://andersonmancini.dev/projects/webgpu-archiviz", "markdown": "https://andersonmancini.dev/projects/webgpu-archiviz.md", "tagline": "6MB Architecture Visualization", "year": 2026, "categories": [ "WebGPU", "Production" ], "featured": true, "technologies": [ "WebGPU", "React Three Fiber", "Three.js", "Architecture Visualization", "Post Processing", "Real-time Lighting", "Under 6MB" ], "description": "Immersive WebGPU architecture visualization with high-end realism, rich post-processing, and unmatched performance — all under 6MB. Built with Three.js and React Three Fiber, it brings archiviz-quality lighting and atmosphere to the browser without the usual weight of a heavy 3D experience.", "status": "available", "demo": "https://planpoint-webgpu.vercel.app/", "source": null, "image": "https://andersonmancini.dev/images/thumbs/webgpu_archiviz.webp" }, { "slug": "mana-health", "name": "Mana Health", "url": "https://andersonmancini.dev/projects/mana-health", "markdown": "https://andersonmancini.dev/projects/mana-health.md", "tagline": "React Native 3D App", "year": 2026, "categories": [ "Production", "WebGL" ], "featured": false, "technologies": [ "Three.js", "Biome-driven Environments", "Real-time Atmosphere", "Custom Shaders", "React Three Fiber" ], "description": "Mana is a science-backed, community-powered scanner that helps people understand what they buy before it goes in or on their body — with a Mana Score grounded in research at the moment of choice. This Three.js experience turns that idea into a living world: your companion moves across five biomes that shift with scanning patterns, from Toxic to Harmony, so choices become something you can see, not just read. Built as an interactive story for Mana World — scan, learn, decide — where the Biome Score drives atmosphere, environment, and mood in real time inside the browser.", "status": "available", "demo": "https://mana-world-app.vercel.app/", "source": null, "image": "https://andersonmancini.dev/images/thumbs/mana_health.webp" }, { "slug": "south-cliff", "name": "South Cliff", "url": "https://andersonmancini.dev/projects/south-cliff", "markdown": "https://andersonmancini.dev/projects/south-cliff.md", "tagline": "Immersive Three.js dental brand experience", "year": 2026, "categories": [ "Production", "WebGL" ], "featured": true, "technologies": [ "Three.js", "WebGL", "Dynamic Clouds", "Complex Terrain", "Time-of-day Lighting", "Atmospheric Effects", "Interactive Navigation", "Lens Flares & Rainbows" ], "description": "An immersive brand website built with Three.js — a coastal world where a highly detailed cliff, dynamic clouds and layered atmosphere turn a dental group site into something you explore, not just scroll. The cliff is a complex 3D sculpt: light, mist and reflections crawl across every facet as the scene shifts. Time-of-day dynamics reshape the mood — from golden hour and lens flares to rainbows cutting through fog — so the same landscape never feels static. Rich interactivity and environmental effects make navigation feel unique: a living environment that rewards curiosity while still carrying the brand story of South Cliff Dental Group.", "status": "available", "demo": "https://southcliffdentalgroup.com", "source": null, "image": "https://andersonmancini.dev/images/thumbs/southcliff.webp" }, { "slug": "r3f-webgpu-text", "name": "r3f-webgpu-text", "url": "https://andersonmancini.dev/projects/r3f-webgpu-text", "markdown": "https://andersonmancini.dev/projects/r3f-webgpu-text.md", "tagline": "MSDF WebGPU text for React Three Fiber", "year": 2026, "categories": [ "Components", "WebGPU" ], "featured": false, "technologies": [ "WebGPU", "TSL", "React Three Fiber", "MSDF Text", "Three.js", "3D Typography" ], "description": "r3f-webgpu-text brings crisp MSDF text to React Three Fiber on WebGPU — sharp at any scale, with layout-friendly props instead of baking labels into textures. Render titles, UI copy and in-scene annotations as real geometry in the GPU pipeline. Built on Three.js WebGPU and TSL so text sits naturally alongside your meshes, lights and post-processing. A focused component for developers who need readable 3D typography without leaving the R3F workflow.", "status": "available", "demo": "https://r3f-webgpu-text.vercel.app", "source": null, "image": "https://andersonmancini.dev/images/thumbs/webgpu_text.webp" }, { "slug": "r3f-webgpu-perf", "name": "r3f-webgpu-perf", "url": "https://andersonmancini.dev/projects/r3f-webgpu-perf", "markdown": "https://andersonmancini.dev/projects/r3f-webgpu-perf.md", "tagline": "Performance monitor for React Three Fiber", "year": 2026, "categories": [ "Components", "WebGPU" ], "featured": false, "technologies": [ "React Three Fiber", "WebGPU", "WebGL", "Performance Monitor", "FPS & GPU Timing", "Draw Calls", "VRAM Estimate" ], "description": "r3f-webgpu-perf is a lightweight performance panel for React Three Fiber — built for R3F 8+ and designed to work with both WebGPU and WebGL, including setups where gl.info is unavailable. Drop into any Canvas and get real-time FPS, GPU/CPU timing, draw calls, geometries, textures, and an optional VRAM estimate — with light/dark themes, a compact or expanded view, and a minimize-to-dot mode that stays out of the way. Inspired by r3f-perf, with a modern UI for developers and technical artists who need clarity while iterating on WebGPU scenes.", "status": "available", "demo": "https://r3f-webgpu-perf.vercel.app", "source": "https://github.com/ektogamat/r3f-webgpu-perf", "image": "https://andersonmancini.dev/images/thumbs/r3f_perf.webp" }, { "slug": "advanced-glass", "name": "Advanced Glass", "url": "https://andersonmancini.dev/projects/advanced-glass", "markdown": "https://andersonmancini.dev/projects/advanced-glass.md", "tagline": "Coming soon for WebGPU", "year": 2026, "categories": [ "WebGPU", "Components", "Experiments" ], "featured": true, "technologies": [ "Mesh Transmission Material", "WebGPU", "React Three Fiber", "Dispersion", "Reflections", "Caustics", "Backdrop Refraction", "Glass Config Panel" ], "description": "This is not a transparent trick. It is glass that remembers what sits behind it, and lets light travel through like a living material. Built for React Three Fiber and rendered with WebGPU, this Mesh Transmission Material treats refraction as something physical: thickness, color in the deep parts, rainbow edges, soft frost, and reflections on the surface while the world warps underneath. Before each frame, the scene behind the glass is captured into a hidden backdrop — a quiet second camera pass — so every curve bends reality in a believable way. Turn on the backside pass and light travels through the volume with real thickness. Dispersion splits light into spectral color along sharp edges. Soften the surface and the backdrop blurs into a milky glow. Open the Glass Config panel and sculpt the look live: IOR, thickness, dispersion, attenuation, clearcoat, iridescence, and more.", "status": "coming-soon", "demo": null, "source": null, "image": "https://andersonmancini.dev/images/thumbs/gpuglass.webp" }, { "slug": "octahedral-impostors", "name": "Octahedral Impostors", "url": "https://andersonmancini.dev/projects/octahedral-impostors", "markdown": "https://andersonmancini.dev/projects/octahedral-impostors.md", "tagline": "WebGPU direction-atlas impostors for cheap distant meshes", "year": 2026, "categories": [ "Components", "WebGPU", "Experiments" ], "featured": false, "technologies": [ "WebGPU", "TSL", "React Three Fiber", "Octahedral Impostors", "Atlas Baking", "Billboard LOD", "MeshBasicNodeMaterial", "Coming After Three.js Conf Paris" ], "description": "A visual WebGPU demo of octahedral impostors — bake a mesh into a direction atlas, then draw cheap billboard cards that pick and blend the right atlas cells as the camera moves. Built with React Three Fiber, Three.js WebGPU and TSL: hemisphere grids, live atlas sampling, barycentric blends and a field of impostors you can scale from a handful to hundreds — inspired by the Shaderbits octahedral impostors approach. The demo, reusable component and source will be available soon, after the Three.js Conference Paris.", "status": "coming-soon", "demo": null, "source": null, "image": "https://andersonmancini.dev/images/thumbs/impostors.webp" }, { "slug": "graveyard-pinball", "name": "Graveyard Pinball", "url": "https://andersonmancini.dev/projects/graveyard-pinball", "markdown": "https://andersonmancini.dev/projects/graveyard-pinball.md", "tagline": "Free Halloween game", "year": 2026, "categories": [ "Games", "WebGPU", "Experiments" ], "featured": true, "technologies": [ "WebGPU", "TSL", "Game Physics", "Rapier 2D", "Multiball & Jackpot", "Dot-matrix Display", "Cinematic Camera", "Mobile Touch Controls", "React Three Fiber", "Three.js" ], "description": "Graveyard Pinball is a free, full 3D pinball game for Halloween — a haunted crypt of a table with a glowing skull portal, bubbling cauldrons, tombstone banks, a skeleton mage who casts spells and a moon-lit backglass, playable on desktop and mobile. Lock balls in the crypt saucer to start a multiball, light the jackpot, and unlock 20+ achievements while a retro amber dot-matrix display keeps score, flashes event cards and ranks your initials on the leaderboard. Cinematic close-ups and slow motion kick in when the portal opens or the mage strikes. Under the hood: WebGPU with TSL post-processing, a Rapier 2D physics simulation running at fixed 240 Hz sub-steps for a ball that never tunnels, and 41 individually lit lamps on the playfield — all built with Three.js and React Three Fiber.", "status": "available", "demo": "https://graveyard-pinball.vercel.app/", "source": null, "image": "https://andersonmancini.dev/images/thumbs/graveyard_pinball.webp" }, { "slug": "lantern-valley", "name": "Lantern Valley", "url": "https://andersonmancini.dev/projects/lantern-valley", "markdown": "https://andersonmancini.dev/projects/lantern-valley.md", "tagline": "Cozy adventure game for the browser", "year": 2026, "categories": [ "Games", "WebGPU", "Experiments" ], "featured": true, "technologies": [ "WebGPU", "TSL", "WebGL2 Fallback", "Stylized Lighting", "SSAO & Depth of Field", "Procedural Animation", "Day/Night Cycle", "Quest Engine", "Mobile Touch Controls", "Three.js" ], "description": "Lantern Valley is a cozy miniature adventure for the browser with over 16 hours of gameplay between missions and side quests. Explore a tilt-shift valley of wind-swept grass, drifting autumn leaves and purple shadows where Tina, a young apprentice knight, hunts the Sparks that scattered before the Night of a Thousand Lights. Relight the Great Lanterns of every village and carry the flame back to the lighthouse, on desktop and mobile. Swim across the lake, pet the dogs and cows, double-jump into a pirouette and fly on the helmet's little wings. Go fishing, plant a garden that grows while you sleep on a bench, cook by the campfire and mend a boat to sail through the mist to five islands. A full day and night cycle lights the village windows and wakes up Sparks that only appear after dark. Under the hood: Three.js on WebGPU with an automatic WebGL2 fallback, TSL stylized lighting with SSAO, bloom and depth of field, over a hundred thousand grass blades, chibi characters driven by procedural animation and a quest engine behind the story — with dynamic resolution and a sharp upscaler to keep it smooth on phones.", "status": "available", "demo": "https://lanternvalley.vercel.app/", "source": null, "image": "https://andersonmancini.dev/images/thumbs/lantern_valley.webp" }, { "slug": "slice-tilt", "name": "Slice Tilt", "url": "https://andersonmancini.dev/projects/slice-tilt", "markdown": "https://andersonmancini.dev/projects/slice-tilt.md", "tagline": "Free pinball on a four-slice pizza", "year": 2026, "categories": [ "Games", "WebGPU", "Experiments" ], "featured": true, "technologies": [ "WebGPU", "TSL", "WebGL2 Fallback", "Rapier 2D", "Multi-world Physics", "Generated Tables", "Dot-matrix Display", "Per-table Music", "Mobile Touch Controls", "React Three Fiber", "Three.js" ], "description": "Slice Tilt is a free browser pinball game where the table is a round pizza cut into four slices — each one a complete table with its own theme, rules and music: an archery camp in the forest, a factory, a castle and a town. Only the slice facing you is alive, on desktop and mobile. Finish a slice's objective and send the ball into the oven at the center of the pizza. The hub is the rotation axis, so there is no teleport: the ball goes in, the whole pizza turns 90° around it and the ball comes out of the next table. Squash-and-stretch bumpers, shockwaves that shake nearby props, a dot-matrix display and one vaporwave track per table that crossfades during the turn. Under the hood: Three.js with WebGPU and TSL (plus a WebGL2 fallback) and React Three Fiber. The physics is a Rapier 2D simulation that the 3D scene only draws — each slice has its own physics world and only the front one is simulated — and the tables are generated from layout files, with the painted boards built by script so the art always lines up with the colliders. It builds on the previous game, Graveyard Pinball.", "status": "available", "demo": "https://slice-tilt.vercel.app/", "source": null, "image": "https://andersonmancini.dev/images/thumbs/slice_tilt.webp" }, { "slug": "odd-and-out-game", "name": "Odd & Out Game", "url": "https://andersonmancini.dev/projects/odd-and-out-game", "markdown": "https://andersonmancini.dev/projects/odd-and-out-game.md", "tagline": "Free co-op alien adventure for the browser", "year": 2026, "categories": [ "Games", "WebGPU", "Experiments" ], "featured": true, "technologies": [ "WebGPU", "TSL", "Procedural Islands", "Online Co-op", "Split Screen", "Cloudflare Workers", "Stylized Lighting", "Adaptive Resolution", "Mobile Touch Controls", "Three.js" ], "description": "Odd & Out is a free 3D adventure for the browser, inspired by the 1991 classic ToeJam & Earl. Two aliens — Odd, the mushroom, and Out — crash-landed on Earth and broke their ship. Explore floating islands that are new every game, ride the elevators between levels, dodge weird creatures and find every missing ship part, on desktop and mobile. Play solo, online with a friend through an invite link, or in split screen on the same computer, with keyboard, gamepad or touch. The terrain is generated from a seed — lakes you can swim in, rivers, rope and stone bridges, slippery ice — and it is full of gags: trampoline mushrooms, banana peels, a human cannon and a cow taken by a flying saucer. Under the hood: Three.js on WebGPU with TSL stylized lighting — purple shadows, SSAO, tilt-shift and depth of field — procedural islands from a seeded RNG, a Cloudflare Worker with a Durable Object per room for the online mode, and adaptive resolution with a lighter post-processing layer to keep phones cool.", "status": "available", "demo": "https://odd-and-out-game.vercel.app/", "source": null, "image": "https://andersonmancini.dev/images/thumbs/odd_and_out.webp" }, { "slug": "cereal-stays", "name": "Cereal Stays", "url": "https://andersonmancini.dev/projects/cereal-stays", "markdown": "https://andersonmancini.dev/projects/cereal-stays.md", "tagline": "3d location booking", "year": 2025, "categories": [ "Production", "WebGL" ], "featured": true, "technologies": [ "Custom Scene Controls", "Real-time Lighting", "Atmosphere Tuning", "Debug UI as Experience", "React Three Fiber" ], "description": "Building with Three.js is really about creative freedom — and this project leans into that completely. Together with @dieg0liv, I built a set of custom scene controls that let us reshape the environment in real time: lighting, atmosphere, and composition, all tunable while the scene stays live. What I love most is that these debug tools double as a way to share the process. Seeing how something was built has always taught me more than any finished render — so this demo invites you behind the scenes.", "status": "available", "demo": "https://cerealbnb-demo.vercel.app", "source": null, "image": "https://andersonmancini.dev/images/thumbs/cereal_bnb.webp" }, { "slug": "predator-material", "name": "Predator Material", "url": "https://andersonmancini.dev/projects/predator-material", "markdown": "https://andersonmancini.dev/projects/predator-material.md", "tagline": "Free Custom Material for R3F", "year": 2025, "categories": [ "Components", "WebGPU", "Experiments" ], "featured": true, "technologies": [ "WebGPU", "TSL", "React Three Fiber", "MeshPhysicalNodeMaterial", "Glass Transmission", "Shader Dissolve Mask", "Material Morph Transition", "Custom Post Processing" ], "description": "A technical demo of custom, physically-based glass/transmission materials in React Three Fiber — built with WebGPU and TSL as a fully procedural MeshPhysicalNodeMaterial. On hover, the Predator’s opaque skin morphs in real time into a transmissive cloaked material, spreading from a shader-driven dissolve grid with fresnel rim light, shimmer and animated scan-line rings — all on the GPU via node-based shaders, not string GLSL. Two material worlds blend per-pixel: textured PBR and dielectric glass, driven by UV-grid or expanding-ring masks. A live parameters panel exposes transmission, IOR, dispersion, iridescence and more. Open source and free to explore.", "status": "available", "demo": "https://predator-material.vercel.app/", "source": "https://github.com/ektogamat/predator-material", "image": "https://andersonmancini.dev/images/thumbs/predator_cloak.webp" }, { "slug": "burnley-fc-clubhouse", "name": "Burnley FC Clubhouse", "url": "https://andersonmancini.dev/projects/burnley-fc-clubhouse", "markdown": "https://andersonmancini.dev/projects/burnley-fc-clubhouse.md", "tagline": "Interactive clue hunt for Clarets Academy", "year": 2025, "categories": [ "Production", "WebGL", "Games" ], "featured": false, "technologies": [ "React Three Fiber", "WebGL", "3D Game Mechanics", "Hidden Object Hunt", "Event Experience", "Burnley FC", "Three.js" ], "description": "A 3D game built for a live Burnley FC event — explore the Clarets Academy clubhouse, hunt for hidden trophies and unlock discounts as you find them. Built with React Three Fiber, it layers real game mechanics on top of a branded environment: exploration, collection and reward loops designed for a crowd on phones and laptops at the venue. More than a demo — an event-ready experience where WebGL carries both the club identity and the gameplay that keeps visitors engaged.", "status": "available", "demo": "https://burnleyfc-clubhouse.com", "source": null, "image": "https://andersonmancini.dev/images/thumbs/burnley_clubhouse.webp" }, { "slug": "lumen-decor-studio-1", "name": "Lumen Decor Studio 1", "url": "https://andersonmancini.dev/projects/lumen-decor-studio-1", "markdown": "https://andersonmancini.dev/projects/lumen-decor-studio-1.md", "tagline": "SSGI interior visualization with WebGPU", "year": 2025, "categories": [ "WebGPU", "Experiments" ], "featured": false, "technologies": [ "WebGPU", "TSL", "React Three Fiber", "SSGI", "SSR", "Interior Visualization", "Real-time Lighting" ], "description": "This project showcases the potential of realism using Screen Space Global Illumination (SSGI) and Screen Space Reflections (SSR) with Three.js WebGPU, TSL, and R3F. It demonstrates how sunlight can influence color perception and interior design decisions — something only achievable with real-time global illumination. SSGI is still experimental, so performance or rendering issues may occur at higher resolutions.", "status": "available", "demo": "https://lumen-decor-studio.vercel.app/", "source": null, "image": "https://andersonmancini.dev/images/thumbs/lumen_studio_1.webp" }, { "slug": "light-and-shadow", "name": "Light & Shadow", "url": "https://andersonmancini.dev/projects/light-and-shadow", "markdown": "https://andersonmancini.dev/projects/light-and-shadow.md", "tagline": "Early WebGPU SSGI lighting experiment", "year": 2025, "categories": [ "WebGPU", "Experiments" ], "featured": false, "technologies": [ "SSGI", "Ambient Occlusion", "Dynamic Shadows", "Custom Fire Shader", "Custom Camera Positions" ], "description": "One of my first experiments with WebGPU, demonstrating how Screen Space Global Illumination can transform a scene. A time-of-day control lets you shift the hour and watch light reshape the entire environment — featuring SSGI, ambient occlusion, dynamic shadows, a custom fire shader, and custom camera positions.", "status": "available", "demo": "https://ssgi-webgpu-demo.vercel.app/", "source": null, "image": "https://andersonmancini.dev/images/thumbs/light_shadow.webp" }, { "slug": "yacht-config", "name": "Yacht Config", "url": "https://andersonmancini.dev/projects/yacht-config", "markdown": "https://andersonmancini.dev/projects/yacht-config.md", "tagline": "Hyper-realistic yacht configurator", "year": 2025, "categories": [ "WebGPU", "Production" ], "featured": true, "technologies": [ "WebGPU", "SSGI", "SSR", "Time-of-day Controls", "Multiple Cameras", "Water Reflections" ], "description": "A hyper-realistic boat configurator using SSGI and SSR on WebGPU, with the latest rendering features throughout. Customize colors and time of day, switch between multiple cameras, and see water reflections on the hull. Birds, music, and a living atmosphere help potential clients compare configurations and settle into the scene.", "status": "available", "demo": "https://dopple-marine.vercel.app/", "source": null, "image": "https://andersonmancini.dev/images/thumbs/dopple_marine.webp" }, { "slug": "forge-awakens", "name": "Forge Awakens", "url": "https://andersonmancini.dev/projects/forge-awakens", "markdown": "https://andersonmancini.dev/projects/forge-awakens.md", "tagline": "Mythic forge rhythm mini-game", "year": 2025, "categories": [ "Experiments", "WebGL", "Games" ], "featured": true, "technologies": [ "React Three Fiber", "WebGL", "Rhythm Mini-game", "Forge Gameplay", "Fluid Shaders", "Post Processing", "Valtio State", "Source Unlock Reward" ], "description": "A mythic forge rhythm mini-game built with React Three Fiber — press and hold to charge the forge, drag through numbered sparks in order, and release past the mark to strike. Complete three playthroughs — a hammer, an ice axe, and twin chain blades — each with its own visual theme and rising difficulty. Forge every relic and the game unlocks the full source code as your reward. Part tech demo, part playable challenge: fluid shaders, post-processing, 3D forge tools and a scoring loop designed to teach the craft by making you earn it.", "status": "available", "demo": "https://forgeawakens.vercel.app/", "source": "https://github.com/ektogamat/god-of-war-minigame", "image": "https://andersonmancini.dev/images/thumbs/forge_awakens.webp" }, { "slug": "realistic-water", "name": "Realistic Water", "url": "https://andersonmancini.dev/projects/realistic-water", "markdown": "https://andersonmancini.dev/projects/realistic-water.md", "tagline": "WebGL pool simulation with caustics", "year": 2024, "categories": [ "Experiments", "WebGL" ], "featured": true, "technologies": [ "WebGL", "React Three Fiber", "Vertex Shader Distortion", "Caustics", "Underwater Effects", "Water Droplets", "Custom Shaders", "Three.js" ], "description": "An interactive water simulator built with React Three Fiber and WebGL — a glass-walled pool where every ripple, reflection and caustic pattern is rendered live in the browser. The surface uses vertex shader distortions to drive motion and refraction, while projected caustics crawl across the mosaic tiles below. Underwater shading, depth absorption and surface roughness all respond in real time as you move through the scene. Step out of the water and droplets cling to the camera — a small detail that sells the illusion. Tune color, luminosity and roughness from the panel and watch the entire mood of the pool shift instantly.", "status": "available", "demo": "https://water-simulation.vercel.app/", "source": null, "image": "https://andersonmancini.dev/images/thumbs/water.webp" }, { "slug": "transition-material", "name": "Transition Material", "url": "https://andersonmancini.dev/projects/transition-material", "markdown": "https://andersonmancini.dev/projects/transition-material.md", "tagline": "Available to buy on Patreon", "year": 2024, "categories": [ "Components", "WebGL" ], "featured": false, "technologies": [ "React Three Fiber", "WebGL", "Mesh Transition Material", "Shader Blending", "Custom Shaders", "Three.js" ], "description": "A reusable mesh transition material for React Three Fiber — morph between two surface looks with a single shader-driven blend instead of swapping materials by hand. Drive the transition with a progress uniform and watch colors, roughness and maps crossfade in real time. Built for product demos, configurators and any scene where materials need to feel like they transform rather than cut. Available on Patreon with a live demo you can drop into your own projects.", "status": "available", "demo": "https://mesh-transition-material.vercel.app/", "source": null, "image": "https://andersonmancini.dev/images/thumbs/transition_material.webp" }, { "slug": "classics-garage", "name": "Classics Garage", "url": "https://andersonmancini.dev/projects/classics-garage", "markdown": "https://andersonmancini.dev/projects/classics-garage.md", "tagline": "Classic car configurator with gamification", "year": 2024, "categories": [ "Production", "WebGL", "Experiments", "Games" ], "featured": true, "technologies": [ "React Three Fiber", "WebGL", "Color Customization", "Environment Switching", "Car Sound Design", "Inspect Mode", "Gamification", "Real-time Reflections", "Three.js" ], "description": "Classics Garage is a browser-based car configurator built with React Three Fiber — a polished showroom where classic sports cars sit under studio lighting with mirror-sharp floor reflections and real-time material response. Swap paint colors, toggle headlights, switch environments and hear each engine come alive with authentic sound design. The experience goes further with a layer of gamification: enter inspect mode and hunt for hidden unique parts scattered across the car to unlock new features one by one. Every detail rewards curiosity — from the reflective dark studio to the easter eggs waiting for those who look closer.", "status": "available", "demo": "https://www.classics-garage.com/", "source": null, "image": "https://andersonmancini.dev/images/thumbs/classics_garage.webp" }, { "slug": "unique-jewelry", "name": "Unique Jewelry", "url": "https://andersonmancini.dev/projects/unique-jewelry", "markdown": "https://andersonmancini.dev/projects/unique-jewelry.md", "tagline": "Ultra-realistic diamond configurator", "year": 2024, "categories": [ "Production", "WebGL" ], "featured": true, "technologies": [ "Diamond Rendering", "Product Configurator", "Persistent Configuration", "Gem Customization", "Material Swapping", "Real-time Refraction", "WebGL", "Three.js" ], "description": "A luxury jewelry landing page showcasing ultra-realistic diamond rendering with physically accurate refraction, dispersion and sparkle — all running live in the browser. Scroll through editorial sections and open the configurator to swap gemstones, metals and fancy colors on the fly. Every choice is remembered as you explore — switch between configurations and the ring picks up exactly where you left off, making comparison feel effortless. A polished demonstration of how high-end jewelry visualization can feel as refined as a brand campaign while staying fully interactive.", "status": "available", "demo": "https://webgi-jewelry.vercel.app/", "source": null, "image": "https://andersonmancini.dev/images/thumbs/unique_jewelry.webp" }, { "slug": "alien-romulus", "name": "Alien Romulus", "url": "https://andersonmancini.dev/projects/alien-romulus", "markdown": "https://andersonmancini.dev/projects/alien-romulus.md", "tagline": "Space scene with MediaPipe facehugger filter", "year": 2024, "categories": [ "Experiments", "WebGL" ], "featured": true, "technologies": [ "MediaPipe", "Face Tracking", "AR Face Filter", "Three.js", "WebGL", "Cinematic Lighting", "Lens Flares", "Depth of Field" ], "description": "A cinematic space scene built in homage to Alien: Romulus — a facehugger floating in deep space under starlight, lens flares and shallow depth of field that feel ripped from a film still. Beyond the atmosphere, the experience uses MediaPipe face tracking so you can turn on a live facehugger filter: the creature locks onto your face through the camera, wrapping the tribute in an interactive layer that goes past a static render. Part visual set piece, part AR experiment — a playful nod to the franchise that still shows off real-time tracking and lighting craft in the browser.", "status": "available", "demo": "https://alien-facehugger.vercel.app/", "source": null, "image": "https://andersonmancini.dev/images/thumbs/alien.webp" }, { "slug": "planpoint-house", "name": "Planpoint House", "url": "https://andersonmancini.dev/projects/planpoint-house", "markdown": "https://andersonmancini.dev/projects/planpoint-house.md", "tagline": "Full house walkthrough with baked KTX2 textures", "year": 2024, "categories": [ "Production", "WebGL" ], "featured": true, "technologies": [ "React Three Fiber", "KTX2 Textures", "Baked Lighting", "Architecture Visualization", "Interior & Exterior", "GPU Optimization", "WebGL", "Three.js" ], "description": "An architecture visualization of an entire house — exterior and interior — built with React Three Fiber, tuned for maximum GPU efficiency without giving up realism. All materials ship as KTX2 textures for aggressive GPU compression, so a full building stays light enough to explore in the browser. Lighting and surface detail are baked into the maps, delivering soft shadows and believable materials at a fraction of the cost of live lights. Move from the outside in and walk the rooms as one continuous experience: a complete home tour that prioritizes performance and polish in equal measure.", "status": "available", "demo": "https://planpoint-house.vercel.app/", "source": null, "image": "https://andersonmancini.dev/images/thumbs/planpoint_house.webp" }, { "slug": "smart-watch", "name": "Smart Watch", "url": "https://andersonmancini.dev/projects/smart-watch", "markdown": "https://andersonmancini.dev/projects/smart-watch.md", "tagline": "Interactive watch landing page with live hands", "year": 2024, "categories": [ "Concept", "Production", "WebGL" ], "featured": true, "technologies": [ "Three.js", "WebGL", "Realistic Product Rendering", "Interactive Landing Page", "Product Configurator", "Persistent Configuration", "Real-time Clock Hands", "Local Time Sync" ], "description": "Built to showcase ultra-realistic rendering of a modern smartwatch in the spirit of Apple’s product pages — soft studio light, glass reflections and materials that feel physical in the browser. More than a static hero: the landing page is highly interactive, and a built-in configurator remembers your choices as you explore bands, finishes and details. The watch itself stays alive — the hands move in real time and sync to the user’s local clock, so every visit shows the correct time on the dial.", "status": "available", "demo": "https://watchpro.vercel.app/", "source": null, "image": "https://andersonmancini.dev/images/thumbs/watch_pro.webp" }, { "slug": "farm-discovery", "name": "Farm Discovery", "url": "https://andersonmancini.dev/projects/farm-discovery", "markdown": "https://andersonmancini.dev/projects/farm-discovery.md", "tagline": "Bilingual 3D sustainability experience for DFC", "year": 2024, "categories": [ "Production", "WebGL" ], "featured": true, "technologies": [ "React Three Fiber", "WebGL", "Bilingual Experience", "Interactive Farm", "Sustainability Storytelling", "Dairy Farmers of Canada", "Net-Zero 2050", "Three.js" ], "description": "Created for Dairy Farmers of Canada to showcase sustainability advances on the road to net-zero by 2050 — replacing an older site section that tried to tell the same story but felt dull to navigate. Built fully in 3D with React Three Fiber and WebGL, the experience is bilingual and interactive: explore the farm, discover practices, and understand sustainability in a way that feels playful instead of preachy. A living digital farm that turns a dense institutional topic into something visitors actually want to explore.", "status": "available", "demo": "https://threejs-digital-farm.vercel.app/", "source": null, "image": "https://andersonmancini.dev/images/thumbs/dfc.webp" }, { "slug": "ultimate-lens-flare", "name": "Ultimate Lens Flare", "url": "https://andersonmancini.dev/projects/ultimate-lens-flare", "markdown": "https://andersonmancini.dev/projects/ultimate-lens-flare.md", "tagline": "Realistic lens flare component for R3F and Threejs", "year": 2024, "categories": [ "Components", "WebGL" ], "featured": true, "technologies": [ "React Three Fiber", "Post Processing", "EffectComposer", "Lens Flare", "Occlusion Detection", "Customizable Parameters", "npm Package", "WebGL" ], "description": "An EffectComposer effect for React Three Post Processing — optical aberration from light dispersing through a lens edge, with circular or hexagonal bursts that shine especially well on sun lights. Available as @andersonmancini/lens-flare: drop it into your composer, pass a dirt texture, and dial brightness, star points, glare, ghosts, burst, blend modes and more with live preview. Occlusion-aware by default, with options to follow the mouse, fake a sun position, or exclude skyboxes from raycasting. Built for R3F projects that need cinematic flare without reinventing the post-processing stack — open source and free to use.", "status": "available", "demo": "https://ultimate-lens-flare.vercel.app/", "source": "https://github.com/ektogamat/R3F-Ultimate-Lens-Flare", "image": "https://andersonmancini.dev/images/thumbs/lens_flare.webp" }, { "slug": "toyota-supra", "name": "Toyota Supra", "url": "https://andersonmancini.dev/projects/toyota-supra", "markdown": "https://andersonmancini.dev/projects/toyota-supra.md", "tagline": "Realistic web-based car rendering", "year": 2024, "categories": [ "Production", "WebGL" ], "featured": true, "technologies": [ "WebGL", "Three.js", "Real-time Car Rendering", "Depth of Field", "SSR", "Self-reflections", "Automotive Materials", "Post Processing" ], "description": "A real-time WebGL demo built to push how far a full 3D car can look in the browser — a Toyota Supra rendered with materials and lighting that hold up under close inspection. Depth of field post-processing softens the frame for a cinematic read, while SSR drives live reflections: body panels, glass and chrome bounce the environment and even reflect other parts of the car in real time. A focused showcase of automotive rendering on the open web — depth, shine and self-reflection without leaving the browser.", "status": "available", "demo": "https://toyota-neotix-demo.vercel.app/", "source": null, "image": "https://andersonmancini.dev/images/thumbs/toyota_supra.webp" }, { "slug": "confetti-component", "name": "Confetti component", "url": "https://andersonmancini.dev/projects/confetti-component", "markdown": "https://andersonmancini.dev/projects/confetti-component.md", "tagline": "3D Confetti component for R3F", "year": 2024, "categories": [ "Components", "WebGL" ], "featured": false, "technologies": [ "React Three Fiber", "WebGL", "3D Particles", "Confetti Effect", "Drop-in Component", "Three.js" ], "description": "A drop-in 3D confetti component for React Three Fiber — burst particles in the browser with minimal setup and no heavy physics engine required. Trigger celebrations on click, on mount or from your app logic. Tuned for real-time scenes where you want a playful payoff without rebuilding particle systems from scratch every time. A small reusable piece you can wire into landing pages, games and interactive demos.", "status": "available", "demo": "https://r3f-confetti-v2-component.vercel.app/", "source": null, "image": "https://andersonmancini.dev/images/thumbs/confetti_component.webp" }, { "slug": "blockade-labs-page", "name": "Blockade Labs page", "url": "https://andersonmancini.dev/projects/blockade-labs-page", "markdown": "https://andersonmancini.dev/projects/blockade-labs-page.md", "tagline": "Interactive branding for Blockade Labs", "year": 2024, "categories": [ "Production", "WebGL" ], "featured": false, "technologies": [ "Three.js", "WebGL", "Lead Generation Landing", "Custom Shaders", "Glass Light Effects", "Product Launch" ], "description": "A lead-generation landing page built for a Blockade Labs product launch — part brand story, part conversion funnel, with a hero 3D scene that sells the product before the form appears. Custom shaders mimic light refracting and reflecting across glass surfaces — caustic-like streaks and spectral shifts that make the page feel alive without overwhelming the message. Built with Three.js, it shows how shader craft and launch marketing can share the same canvas on the open web.", "status": "available", "demo": "https://blockade-brand.vercel.app/", "source": null, "image": "https://andersonmancini.dev/images/thumbs/blockade_labs.webp" }, { "slug": "autofocus-component", "name": "AutoFocus Component", "url": "https://andersonmancini.dev/projects/autofocus-component", "markdown": "https://andersonmancini.dev/projects/autofocus-component.md", "tagline": "Free component for R3F", "year": 2024, "categories": [ "Components", "WebGL" ], "featured": false, "technologies": [ "React Three Fiber", "WebGL", "Depth of Field", "Autofocus", "Post Processing", "Three.js" ], "description": "A free autofocus depth-of-field component for React Three Fiber — smooth camera focus transitions that follow a target mesh or point in the scene. Drop it into any Canvas and get cinematic DOF without wiring post-processing passes by hand. Focus distance, bokeh strength and transition speed stay easy to tune while you iterate on layout and animation. Built for product shots, character close-ups and any scene where focus should feel intentional rather than static.", "status": "available", "demo": "https://autofocusdof.vercel.app/", "source": null, "image": "https://andersonmancini.dev/images/thumbs/auto_focus.webp" }, { "slug": "holographic-material", "name": "Holographic material", "url": "https://andersonmancini.dev/projects/holographic-material", "markdown": "https://andersonmancini.dev/projects/holographic-material.md", "tagline": "An easy-to-use holographic material", "year": 2024, "categories": [ "Components", "WebGL" ], "featured": false, "technologies": [ "React Three Fiber", "WebGL", "Holographic Shader", "Iridescence", "Custom Shaders", "Three.js" ], "description": "An easy-to-use holographic shader material for Three.js and React Three Fiber — iridescent color shifts, scan lines and fresnel glow without writing GLSL from scratch. Apply it to any mesh and dial in intensity, speed and color bands from a small set of props. Built for UI accents, sci-fi props and product hero moments where a surface should feel alive and slightly unreal. Includes a live demo and source you can adapt into your own WebGL scenes.", "status": "available", "demo": "https://threejs-holographic-material.vercel.app/", "source": null, "image": "https://andersonmancini.dev/images/thumbs/holographic_material.webp" }, { "slug": "mancini-diamond-renderer", "name": "Mancini Diamond Renderer", "url": "https://andersonmancini.dev/projects/mancini-diamond-renderer", "markdown": "https://andersonmancini.dev/projects/mancini-diamond-renderer.md", "tagline": "Multi-diamond refraction with React Three Fiber", "year": 2024, "categories": [ "WebGL", "Experiments" ], "featured": false, "technologies": [ "Refraction Material", "Ambient Occlusion", "Contact Shadows", "Mesh Optimization", "Custom Color Swap" ], "description": "Built to show how Three.js and React Three Fiber with refraction materials can render multiple diamonds at once — with convincing sparkle and depth in real time. It uses ambient occlusion, contact shadows, 3D mesh optimization, and a custom component for swapping diamond and metal colors on the fly.", "status": "available", "demo": "https://andersonmancini-diamond-renderer.vercel.app/", "source": null, "image": "https://andersonmancini.dev/images/thumbs/mancini_renderer.webp" }, { "slug": "glide-clouds", "name": "Glide clouds", "url": "https://andersonmancini.dev/projects/glide-clouds", "markdown": "https://andersonmancini.dev/projects/glide-clouds.md", "tagline": "Volumetric clouds with cinematic lens flares", "year": 2023, "categories": [ "Concept", "Experiments", "WebGL" ], "featured": true, "technologies": [ "Three.js", "WebGL", "Volumetric Clouds", "Lens Flares", "Atmospheric Scattering", "Aviation Concept", "Real-time Rendering" ], "description": "An aviation concept scene built with Three.js to demonstrate volumetric clouds in the browser — soft, layered volumes you can glide through, with light scattering that makes the sky feel deep instead of flat. Paired with cinematic lens flares, the same lighting that cuts through the cloud bank also blooms across the frame, tying atmosphere and camera optics into one coherent look. A focused technical demo: realistic sky density and optical response working together for a flight-inspired moment that still runs in real time.", "status": "available", "demo": "https://threejs-aviation.vercel.app/", "source": null, "image": "https://andersonmancini.dev/images/thumbs/glide_clouds.webp" }, { "slug": "phonon-metaverse", "name": "Phonon Metaverse", "url": "https://andersonmancini.dev/projects/phonon-metaverse", "markdown": "https://andersonmancini.dev/projects/phonon-metaverse.md", "tagline": "A 3d digital city simulator", "year": 2023, "categories": [ "Production", "WebGL" ], "featured": false, "technologies": [ "Three.js", "WebGL", "Digital City Simulator", "Real-time Rendering", "Interactive Navigation", "Metaverse Concept" ], "description": "A 3D digital city simulator built as an early metaverse experiment — a stylized urban world you can explore in the browser with Three.js and real-time rendering. Navigate streets, discover districts and experience how a living city can feel when architecture, atmosphere and interaction share the same WebGL canvas. A concept piece for immersive digital cities — part world-building, part technical showcase of scale and navigation on the open web.", "status": "available", "demo": "https://hexaverse.vercel.app/", "source": null, "image": "https://andersonmancini.dev/images/thumbs/phonon_metaverse.webp" }, { "slug": "seashore-house", "name": "Seashore House", "url": "https://andersonmancini.dev/projects/seashore-house", "markdown": "https://andersonmancini.dev/projects/seashore-house.md", "tagline": "First archviz with real-time dynamic lighting", "year": 2023, "categories": [ "Concept", "WebGL" ], "featured": true, "technologies": [ "Three.js", "WebGL", "Dynamic Real-time Lighting", "Lens Flare", "Realistic Water", "Architecture Visualization", "Coastal Environment" ], "description": "One of the first projects where I pushed dynamic real-time lighting in the browser — a coastal house sitting over turquoise water, with golden-hour sun, soft shadows and a cinematic lens flare cutting across the frame. The water is a standout: reflective, rippled and high-end enough to sell the whole scene as architecture visualization, not just a tech demo. Birds, atmosphere and glass interiors complete a look that feels directed. It was also my first architecture visualization project — the moment archviz and real-time Three.js craft started to meet in my work.", "status": "available", "demo": "https://threejs-archviz.vercel.app/", "source": null, "image": "https://andersonmancini.dev/images/thumbs/seashore_house.webp" }, { "slug": "biontech-chemicals", "name": "Biontech Chemicals", "url": "https://andersonmancini.dev/projects/biontech-chemicals", "markdown": "https://andersonmancini.dev/projects/biontech-chemicals.md", "tagline": "Dynamic DNA landing page with post-processing", "year": 2023, "categories": [ "Production", "WebGL" ], "featured": true, "technologies": [ "Three.js", "WebGL", "Dynamic DNA Chains", "Advanced Post Processing", "Bloom & Depth of Field", "Product Launch Landing Page", "Pharmaceutical Concept" ], "description": "A product-launch landing page for a fictional pharmaceutical brand — with living DNA chains that shift and morph as the atmospheric backdrop of the experience. Built with Three.js, it shows how advanced post-processing — bloom, depth of field, glow — can elevate launch pages even in chemical and medicine industries, where the product story needs to feel premium and precise. The DNA isn’t decoration alone: it sets the mood of the page, proving real-time 3D can carry brand narrative for high-stakes product unveilings.", "status": "available", "demo": "https://dna-neotix.vercel.app/", "source": null, "image": "https://andersonmancini.dev/images/thumbs/dna_chain.webp" }, { "slug": "triumph-park", "name": "Triumph park", "url": "https://andersonmancini.dev/projects/triumph-park", "markdown": "https://andersonmancini.dev/projects/triumph-park.md", "tagline": "Real estate landing with full building render", "year": 2023, "categories": [ "Production", "WebGL" ], "featured": true, "technologies": [ "Three.js", "WebGL", "Real Estate Landing Page", "Building Facade Render", "Interior Visualization", "Realistic Materials", "Cinematic Lighting", "Bloom & Lens Effects" ], "description": "A real-estate landing page for a fictional developer — built to show what Three.js can do with an entire building: facade and interiors rendered with a realistic, cinematic look. Twilight lighting, window bloom and material response sell the architecture as a place you could almost step into, not just a flat marketing shot. Exterior and interior views stay in the same real-time experience. A focused demo of high-end property storytelling on the web — proving a full residential block can feel premium without leaving the browser.", "status": "available", "demo": "https://realestate-neotix.vercel.app/", "source": null, "image": "https://andersonmancini.dev/images/thumbs/triumph_park.webp" }, { "slug": "dubai-dream", "name": "Dubai dream", "url": "https://andersonmancini.dev/projects/dubai-dream", "markdown": "https://andersonmancini.dev/projects/dubai-dream.md", "tagline": "Interactive Dubai Map using MapBox", "year": 2023, "categories": [ "Experiments", "WebGL" ], "featured": false, "technologies": [ "Three.js", "WebGL", "Mapbox", "3D Map Layer", "Interactive Landmarks", "City Navigation" ], "description": "An interactive Dubai map built with Mapbox and a 3D layer on top — explore the city from above, click landmarks and dive into stylized geometry that sits naturally over the real geography. Map navigation and WebGL visuals work as one experience: pan and zoom the map, then let the 3D elements respond as you move through districts and points of interest. A travel-meets-tech concept — part cartography, part immersive preview of a destination rendered in real time.", "status": "available", "demo": "https://dubai-dream.vercel.app/", "source": null, "image": "https://andersonmancini.dev/images/thumbs/dubai_dream.webp" }, { "slug": "interactive-package", "name": "Interactive Package", "url": "https://andersonmancini.dev/projects/interactive-package", "markdown": "https://andersonmancini.dev/projects/interactive-package.md", "tagline": "3D demo for My Muscle Chef", "year": 2023, "categories": [ "Production", "WebGL" ], "featured": false, "technologies": [ "Three.js", "WebGL", "Product Launch Landing", "3D Packaging", "My Muscle Chef", "Real-time Rendering" ], "description": "A product-launch landing page for My Muscle Chef — healthy meals engineered for athletes, presented through an interactive 3D package demo in the browser. Built with Three.js, it turns packaging into the hero: rotate the product, explore materials and let the real-time render carry the freshness and performance story the brand sells. A focused food-brand concept — where nutrition meets premium launch polish, and the meal feels tangible before you ever open the box.", "status": "available", "demo": "https://musclechef-neotix.vercel.app/", "source": null, "image": "https://andersonmancini.dev/images/thumbs/my_muscle_chef.webp" }, { "slug": "mantis-fusion", "name": "Mantis Fusion", "url": "https://andersonmancini.dev/projects/mantis-fusion", "markdown": "https://andersonmancini.dev/projects/mantis-fusion.md", "tagline": "WebXR learning environment for Mantis", "year": 2023, "categories": [ "WebGL", "Production", "Games" ], "featured": false, "technologies": [ "Custom Shaders", "WebXR", "Virtual Reality", "3D Learning Environment" ], "description": "Built for Mantis, this project brings custom shaders and a 3D learning environment to the web — converted for WebXR so it also works in virtual reality. Ideal for demonstrating PDS capabilities in school learning experiences, combining immersive visuals with educational interaction.", "status": "available", "demo": "https://mantis-fusion.vercel.app/", "source": null, "image": "https://andersonmancini.dev/images/thumbs/mantis_fusion.webp" }, { "slug": "fun-wheel", "name": "Fun Wheel", "url": "https://andersonmancini.dev/projects/fun-wheel", "markdown": "https://andersonmancini.dev/projects/fun-wheel.md", "tagline": "Configurable object rendering demo", "year": 2023, "categories": [ "WebGL", "Experiments" ], "featured": false, "technologies": [ "Real-time Reflections", "Ambient Occlusion", "Global Illumination", "Configurable Materials", "React Three Fiber" ], "description": "Created in 2023 with Three.js and React Three Fiber to demonstrate the power of rendering configurable objects in real time. It features real-time reflections, ambient occlusion, and global illumination — with strong performance and an engaging soundtrack throughout.", "status": "available", "demo": "https://mancini-renderer.vercel.app/", "source": null, "image": "https://andersonmancini.dev/images/thumbs/funwheel.webp" }, { "slug": "humans-since", "name": "Humans Since", "url": "https://andersonmancini.dev/projects/humans-since", "markdown": "https://andersonmancini.dev/projects/humans-since.md", "tagline": "Kinetic clock house with localized LOD", "year": 2023, "categories": [ "WebGL", "Experiments" ], "featured": false, "technologies": [ "Localized LOD", "Custom Shaders", "Massive Object Rendering", "React Three Fiber" ], "description": "Produced in WEBGL to demonstrate dynamic rendering of massive object counts. It uses localized LOD — only objects inside the camera's view radius stay visible — so billions of triangles can be handled efficiently. Custom shaders and additional effects round out the experience.", "status": "available", "demo": "https://hs-clocks-house.vercel.app/", "source": null, "image": "https://andersonmancini.dev/images/thumbs/humans_since.webp" }, { "slug": "star-wars-darth-vader", "name": "Star Wars Darth Vader", "url": "https://andersonmancini.dev/projects/star-wars-darth-vader", "markdown": "https://andersonmancini.dev/projects/star-wars-darth-vader.md", "tagline": "SSR demo with React Three Fiber & WebGPU", "year": 2023, "categories": [ "WebGPU", "Experiments", "Components" ], "featured": false, "technologies": [ "WebGPU", "Screen Space Reflections", "Post Processing", "React Three Fiber", "Darth Vader", "Star Wars", "Force", "Light Saber", "TSL" ], "description": "One of my first experiments with WebGPU — a simple scene showing how to integrate Three.js WebGPU with React Three Fiber using post-processing effects, including Screen Space Reflections. Toggle post-processing on and off to see how much the effect transforms the look of the scene.", "status": "available", "demo": "https://r3f-webgpu-post-processing.vercel.app/", "source": "https://github.com/ektogamat/r3f-webgpu-starter", "image": "https://andersonmancini.dev/images/thumbs/star_wars.webp" }, { "slug": "3d-lobby", "name": "3D Lobby", "url": "https://andersonmancini.dev/projects/3d-lobby", "markdown": "https://andersonmancini.dev/projects/3d-lobby.md", "tagline": "Mantis XR lobby with spatial audio", "year": 2023, "categories": [ "WebGL", "Production" ], "featured": false, "technologies": [ "Floor Reflections", "Lighting Effects", "Spatial Audio", "Multi-environment Navigation", "Virtual Mannequin", "React Three Fiber" ], "description": "Built for Mantis to showcase realistic floor reflections, lighting effects, and spatial audio with React Three Fiber. Navigate between two distinct environments and interactively swap outfits on a virtual mannequin — a polished demo of immersive retail and brand spaces on the web.", "status": "available", "demo": "https://mantis-newbalance-lobby-demo.vercel.app/", "source": null, "image": "https://andersonmancini.dev/images/thumbs/3d_lobby.webp" }, { "slug": "new-york-city-map", "name": "New York City Map", "url": "https://andersonmancini.dev/projects/new-york-city-map", "markdown": "https://andersonmancini.dev/projects/new-york-city-map.md", "tagline": "Complex interactive city map study", "year": 2022, "categories": [ "Experiments", "WebGL" ], "featured": true, "technologies": [ "WebGL", "Three.js", "Dense Mesh Rendering", "Stylized Cityscape", "Building Selection", "Interactive Navigation", "Large-scale Scene" ], "description": "A WebGL study built to push how far the browser can go with dense, complex city geometry — thousands of meshes arranged into a stylized New York skyline. Navigate the map, click selected buildings and explore a city that is intentionally non-photorealistic: clean blocks, soft shadows and a graphic read of the streets, not a satellite clone. A focused demo of scale and interaction — proving WebGL can carry a full urban layout while staying clear, clickable and readable in real time.", "status": "available", "demo": "https://interactive-map-nyc-neotix.vercel.app/", "source": null, "image": "https://andersonmancini.dev/images/thumbs/nyc_interactive_map.webp" }, { "slug": "canon-5d-mark-iv", "name": "Canon 5D Mark IV", "url": "https://andersonmancini.dev/projects/canon-5d-mark-iv", "markdown": "https://andersonmancini.dev/projects/canon-5d-mark-iv.md", "tagline": "Concept product landing page", "year": 2022, "categories": [ "Concept", "WebGL" ], "featured": false, "technologies": [ "Three.js", "WebGL", "Concept Product Page", "Realistic Camera Rendering", "Studio Lighting", "Featured on Three.js" ], "description": "A concept product landing page for a Canon 5D Mark IV — not an official Canon release, but a polished demo built to show what Three.js can do for premium camera storytelling in the browser. Studio lighting, glass reflections and a hero product render that holds up under close inspection — the kind of page brands dream about for hardware launches. It was later featured on the Three.js homepage, a milestone that proved concept work on the open web could sit alongside production-grade showcases.", "status": "available", "demo": "https://camera-webgi.vercel.app/", "source": null, "image": "https://andersonmancini.dev/images/thumbs/canon_landing.webp" }, { "slug": "dream-houses", "name": "Dream houses", "url": "https://andersonmancini.dev/projects/dream-houses", "markdown": "https://andersonmancini.dev/projects/dream-houses.md", "tagline": "Architecture visualization", "year": 2022, "categories": [ "Concept", "WebGL" ], "featured": false, "technologies": [ "Three.js", "WebGL", "Architecture Visualization", "Exterior & Interior", "Real-time Reflections", "Interactive Environments" ], "description": "An architecture visualization built to show how fluidly a browser experience can move between exterior and interior — one continuous scene where you explore the outside, step inside and keep the same sense of place. Real-time reflections tie the spaces together: glass, water and polished surfaces respond to light as you navigate, selling material quality without pre-rendered cuts. A focused demo of interactive archviz — environment switching that feels like walking a property, not clicking between disconnected renders.", "status": "available", "demo": "https://houses-neotix.vercel.app/", "source": null, "image": "https://andersonmancini.dev/images/thumbs/dream_houses.webp" }, { "slug": "fresh-and-healthy", "name": "Fresh & healthy", "url": "https://andersonmancini.dev/projects/fresh-and-healthy", "markdown": "https://andersonmancini.dev/projects/fresh-and-healthy.md", "tagline": "Cosmetics landing page", "year": 2022, "categories": [ "Concept", "WebGL" ], "featured": false, "technologies": [ "Three.js", "WebGL", "Cosmetics Rendering", "Glass Materials", "Color Customization", "Product Landing Page" ], "description": "A cosmetics landing page built to push glass and product rendering in Three.js — bottles and packaging with convincing transparency, refraction and studio polish in real time. Swap colors on the fly and watch materials update instantly: tints, labels and surface response stay believable as you explore different product looks. A clean concept for beauty and wellness brands — where premium packaging needs to feel tactile in the browser, not flattened into a static photo.", "status": "available", "demo": "https://threejs-cosmetics.vercel.app/", "source": null, "image": "https://andersonmancini.dev/images/thumbs/cosmetics.webp" }, { "slug": "r3f-tshirt-configurator-course", "name": "T-Shirt Configurator (Udemy course)", "url": "https://andersonmancini.dev/projects/r3f-tshirt-configurator-course", "markdown": "https://andersonmancini.dev/projects/r3f-tshirt-configurator-course.md", "tagline": "T-Shirt configurator using R3F", "year": 2022, "categories": [ "Courses", "WebGL" ], "featured": false, "technologies": [ "React Three Fiber", "WebGL", "T-Shirt Configurator", "Udemy Course", "Material Customization", "Three.js" ], "description": "The promo experience for my Udemy course on building a T-shirt configurator with React Three Fiber — a live demo of what students learn to build from scratch. Customize colors, apply designs and see fabric response in real time inside the browser. The page doubles as portfolio proof and course preview: the same techniques taught in the lessons, running as a finished product. Built for developers who want to ship interactive 3D configurators without leaving the React ecosystem.", "status": "available", "demo": "https://www.udemy.com/course/react-three-fiber-configurator/", "source": null, "image": "https://andersonmancini.dev/images/thumbs/udemy_course.webp" }, { "slug": "camden-yards", "name": "Camden Yards", "url": "https://andersonmancini.dev/projects/camden-yards", "markdown": "https://andersonmancini.dev/projects/camden-yards.md", "tagline": "Mantis XR stadium environment", "year": 2022, "categories": [ "WebGL", "Production" ], "featured": false, "technologies": [ "BoxProjectionEnvMap", "Animated Trees", "Birds & Clouds", "Night Mode", "Interactive Reflections", "React Three Fiber" ], "description": "Produced in 2022 for Mantis, with animated trees, birds, clouds, a night mode, and interactive reflections. A standout technique is BoxProjectionEnvMap — rendering interior environments from a single plane with a special projection, saving hundreds of thousands of triangles and keeping performance sharp.", "status": "available", "demo": "https://camden-yards.vercel.app/", "source": null, "image": "https://andersonmancini.dev/images/thumbs/candem_yards.webp" }, { "slug": "3d-wear-studio", "name": "3D Wear studio", "url": "https://andersonmancini.dev/projects/3d-wear-studio", "markdown": "https://andersonmancini.dev/projects/3d-wear-studio.md", "tagline": "Clothing customizer in real time", "year": 2022, "categories": [ "Experiments", "WebGL" ], "featured": false, "technologies": [ "React Three Fiber", "Fabric Textures", "Decals", "Material Customization", "Three.js" ], "description": "A 3D clothing customizer built with React Three Fiber, created to demonstrate fabric texture reproduction and decal workflows in the browser. Personalize colors, apply logos, and explore how textile materials respond to light — a focused showcase of real-time garment visualization.", "status": "available", "demo": "https://3dwearlab.vercel.app/", "source": null, "image": "https://andersonmancini.dev/images/thumbs/wearlab.webp" }, { "slug": "3d-map-explorer", "name": "3D Map Explorer", "url": "https://andersonmancini.dev/projects/3d-map-explorer", "markdown": "https://andersonmancini.dev/projects/3d-map-explorer.md", "tagline": "Awwwards Honorable Mention", "year": 2021, "categories": [ "Production", "WebGL" ], "featured": true, "technologies": [ "Three.js", "WebGL", "BTS", "4 Brazilian Cities", "Large-scale Map Rendering", "Condominium Navigation", "Interactive Markers", "Night Mode", "Awwwards Honorable Mention" ], "description": "A stylized 3D map of four entire Brazilian cities — built to show which regions offer house condominiums and let you navigate straight into those communities. Rendering a map this complex with BTS already in 2021 was a major achievement: dense city geometry, interactive markers, map view modes, stylized birds, night mode, and even a helicopter-ride easter egg — all running in the browser with Three.js. Later recognized with an Awwwards Honorable Mention (Nov 2023).", "status": "available", "demo": "https://interactive-map-3d.vercel.app/", "source": null, "image": "https://andersonmancini.dev/images/thumbs/interactive_map.webp" }, { "slug": "three-graces", "name": "Three Graces", "url": "https://andersonmancini.dev/projects/three-graces", "markdown": "https://andersonmancini.dev/projects/three-graces.md", "tagline": "Museum landing page with cursor light", "year": 2021, "categories": [ "Concept", "WebGL" ], "featured": false, "technologies": [ "Three.js", "WebGL", "Dynamic Lighting", "Fake Shadow Illusion", "Museum Landing Page", "Dribbble-inspired Design", "Cursor-driven Light" ], "description": "A simple museum-style landing page built to experiment with dynamic lights — layout and art direction adapted from a design I found on Dribbble. As the light moves across the statues, they seem to cast shifting shadows and volume. There is no real shadow in the scene: the effect comes from lighting and material response alone, selling depth without the cost of shadow maps. A quiet study in how far a few carefully driven lights can go on a clean, editorial page.", "status": "available", "demo": "https://threejs-graces.tiiny.site/", "source": null, "image": "https://andersonmancini.dev/images/thumbs/three_graces.webp" }, { "slug": "realtime-watch", "name": "Realtime watch", "url": "https://andersonmancini.dev/projects/realtime-watch", "markdown": "https://andersonmancini.dev/projects/realtime-watch.md", "tagline": "Rolex-style launch with SSGI, SSR & live hands", "year": 2021, "categories": [ "Concept", "WebGL", "Older projects" ], "featured": true, "technologies": [ "WebGL", "Three.js", "SSGI", "SSR", "Metal Reflections", "Product Configurator", "Real-time Clock Hands", "Local Time Sync" ], "description": "A realistic Rolex-inspired watch for a fictional product launch — built to show premium metals and reflections with SSGI and SSR in real time. Beyond the hero render, a configurator lets you refine the piece while the materials keep their depth and shine. The dial stays honest: the hands sync to the user’s local time, so every visit shows the real clock. A luxury launch concept where lighting, reflection and interaction carry the same weight as the product itself.", "status": "available", "demo": "https://rolex-demo-neotix.vercel.app/", "source": null, "image": "https://andersonmancini.dev/images/thumbs/rolex_landing_concept.webp" }, { "slug": "travel-bugs", "name": "Travel Bugs", "url": "https://andersonmancini.dev/projects/travel-bugs", "markdown": "https://andersonmancini.dev/projects/travel-bugs.md", "tagline": "Crypto+travel landing page", "year": 2021, "categories": [ "Concept", "WebGL", "Older projects" ], "featured": false, "technologies": [ "Three.js", "WebGL", "Crypto + Travel Concept", "Interactive 3D", "Scroll Storytelling", "Landing Page" ], "description": "A crypto + travel landing page where WebGL and editorial layout tell one story — a playful brand world that mixes fintech energy with wanderlust. Interactive 3D elements and scroll-driven sections guide visitors through the concept: travel rewards, digital collectibles and a map-like narrative that keeps the page feeling exploratory rather than static. Built with Three.js, it is a concept for brands sitting at the intersection of blockchain and experience — proof that a landing can feel like a journey, not a brochure.", "status": "available", "demo": "https://travel-bugs.vercel.app/", "source": null, "image": "https://andersonmancini.dev/images/thumbs/travel_bugs.webp" }, { "slug": "eyewear-configurator", "name": "Eyewear Configurator", "url": "https://andersonmancini.dev/projects/eyewear-configurator", "markdown": "https://andersonmancini.dev/projects/eyewear-configurator.md", "tagline": "Custom eyeglasses product configurator", "year": 2021, "categories": [ "Production", "WebGL", "Older projects" ], "featured": false, "technologies": [ "Product Configurator", "Glass Materials", "Acrylic Materials", "React Three Fiber", "Three.js" ], "description": "A product configurator for personalized eyeglasses, with advanced glass and acrylic materials built in React Three Fiber and Three.js. Configure frames and lenses in real time and preview how materials catch light — made for clear, interactive eyewear visualization.", "status": "available", "demo": "https://varai-glasses-configurator.vercel.app/", "source": null, "image": "https://andersonmancini.dev/images/thumbs/eyeglasses.webp" }, { "slug": "wheel-customizer", "name": "Wheel Customizer", "url": "https://andersonmancini.dev/projects/wheel-customizer", "markdown": "https://andersonmancini.dev/projects/wheel-customizer.md", "tagline": "Racing steering wheel product configurator", "year": 2020, "categories": [ "Production", "WebGL" ], "featured": true, "technologies": [ "Product Configurator", "Three.js", "WebGL", "Real-time Materials", "Clean UI", "Save Configuration", "E-commerce Integration", "Racing Products" ], "description": "A highly dynamic configurator for racing steering wheels — built so the 3D model stays front and center while a clean interface stays out of the way. Swap finishes, accents and details live, with rich lighting and motion effects that keep the product feeling premium and kinetic. Interactions are designed around the wheel itself: every change lands on the model, not buried in menus. When the setup feels right, you can save the configuration and purchase the product exactly as you designed it — configuration and commerce in one continuous flow.", "status": "available", "demo": "https://custom.gomezsimindustries.com/", "source": null, "image": "https://andersonmancini.dev/images/thumbs/product_configurator.webp" }, { "slug": "eqstudios-website", "name": "EQStudios website", "url": "https://andersonmancini.dev/projects/eqstudios-website", "markdown": "https://andersonmancini.dev/projects/eqstudios-website.md", "tagline": "Isometric room with real-time rendering", "year": 2020, "categories": [ "Production", "WebGL", "Older projects" ], "featured": false, "technologies": [ "Three.js", "WebGL", "Isometric Room", "Real-time Rendering", "Interactive Lighting", "Camera Animation" ], "description": "A site built to demonstrate real-time rendering of an isometric room — lights, surfaces and atmosphere updating live in the browser with Three.js. Interactive effects respond as you explore, and animated camera moves guide the frame through the space so every angle feels directed rather than static. A focused showcase for EQStudios: proof that a stylized interior can feel cinematic and responsive without leaving the web.", "status": "available", "demo": "https://eq-studios.vercel.app/", "source": null, "image": "https://andersonmancini.dev/images/thumbs/eq_studios.webp" }, { "slug": "ola-research", "name": "Ola Research", "url": "https://andersonmancini.dev/projects/ola-research", "markdown": "https://andersonmancini.dev/projects/ola-research.md", "tagline": "3D architecture company", "year": 2020, "categories": [ "Production", "WebGL", "Older projects" ], "featured": false, "technologies": [ "Three.js", "WebGL", "Architecture Studio Website", "3D Environment", "Portfolio Integration", "Real-time Rendering" ], "description": "The website for OLA Research — an architecture firm whose identity lives inside a single 3D architectural model used as the main environment of the experience. Instead of a flat portfolio grid, visitors move through one cohesive space that introduces the studio and surfaces its projects as part of the same immersive world. Built with Three.js and real-time rendering, it turns a company site into something you explore rather than scroll past.", "status": "available", "demo": "https://ola-research.vercel.app/", "source": null, "image": "https://andersonmancini.dev/images/thumbs/ola_research.webp" }, { "slug": "house-decoration", "name": "House decoration", "url": "https://andersonmancini.dev/projects/house-decoration", "markdown": "https://andersonmancini.dev/projects/house-decoration.md", "tagline": "House configurator concept", "year": 2020, "categories": [ "Concept", "WebGL", "Older projects" ], "featured": false, "technologies": [ "Three.js", "WebGL", "House Configurator", "Interior Decoration", "Material Swapping", "Real-time Preview" ], "description": "A house decoration configurator concept built with Three.js — swap finishes, furniture and palette choices inside a single interior and see the room update in real time. Designed for brands and studios exploring how buyers could personalize a space before committing to a layout — less static mood board, more live preview. A practical archviz-adjacent demo: interactivity that feels like decorating, not just orbiting a pre-baked render.", "status": "available", "demo": "https://decoration-demo.vercel.app/", "source": null, "image": "https://andersonmancini.dev/images/thumbs/house_decoration.webp" }, { "slug": "wear-history", "name": "Wear History", "url": "https://andersonmancini.dev/projects/wear-history", "markdown": "https://andersonmancini.dev/projects/wear-history.md", "tagline": "Era Collection landing page", "year": 2020, "categories": [ "Concept", "WebGL", "Older projects" ], "featured": false, "technologies": [ "Three.js", "WebGL", "Jewelry Landing Page", "Product Configurator", "Scroll Storytelling", "Material Customization" ], "description": "A unique jewelry piece turned into an interactive landing page — scroll through the story of the Era Collection and arrive at a configurator where you refine metals, stones and details in real time. Built with Three.js, it treats one hero piece like a campaign: editorial pacing up front, then hands-on customization when the narrative lands. Luxury storytelling that ends in participation — the ring is the subject, and the visitor becomes the stylist at the finish.", "status": "available", "demo": "https://era-collection.vercel.app/", "source": null, "image": "https://andersonmancini.dev/images/thumbs/era_collection.webp" }, { "slug": "seat-selector", "name": "Seat Selector", "url": "https://andersonmancini.dev/projects/seat-selector", "markdown": "https://andersonmancini.dev/projects/seat-selector.md", "tagline": "3D venue seat selection with spatial audio", "year": 2019, "categories": [ "Production", "WebGL" ], "featured": true, "technologies": [ "Three.js", "WebGL", "3D Seat Selection", "Spatial Audio", "Venue Visualization", "Immersive Camera Views", "Real-time Reflections" ], "description": "Selecting your seats in 3D has never been easier. This tool is designed as middleware between ticket buyers and venues — cinemas, theaters, schools, stadiums — where traditional seat maps feel flat and never show what the night will actually look like. Built with Three.js, it delivers a half-immersive preview of the room: step into an opera house, pick a seat, and see the stage from that exact point of view before you buy. A standout layer is spatial audio — sound shifts with distance so you hear how the room behaves from your chosen seat, not just how it looks. A clearer preview means a more confident purchase.", "status": "available", "demo": "https://vrseat.vercel.app/", "source": null, "image": "https://andersonmancini.dev/images/thumbs/seat_selector.webp" }, { "slug": "windland-experience", "name": "Windland Experience", "url": "https://andersonmancini.dev/projects/windland-experience", "markdown": "https://andersonmancini.dev/projects/windland-experience.md", "tagline": "First featured project on the Three.js homepage", "year": 2019, "categories": [ "Production", "Experiments", "WebGL" ], "featured": true, "technologies": [ "Three.js", "WebGL", "Depth of Field", "Advanced Post Processing", "Real-time Rendering", "Digital City", "Featured on Three.js" ], "description": "A digital city experience built to push what real-time rendering can look like in the browser — with depth of field and a stack of advanced post-processing effects shaping every frame. Soft focus, atmospheric depth and cinematic polish turn a stylized world into something that feels directed, not just rendered. It was created as a showcase of those possibilities, and became the first project featured on the Three.js homepage. A milestone piece for the community: proof that high-end optical effects and immersive environments could live side by side on the open web.", "status": "available", "demo": "https://windland-neotix.vercel.app/", "source": null, "image": "https://andersonmancini.dev/images/thumbs/windland.webp" }, { "slug": "haunted-house", "name": "Haunted House", "url": "https://andersonmancini.dev/projects/haunted-house", "markdown": "https://andersonmancini.dev/projects/haunted-house.md", "tagline": "3D + Webflow with ImmersivStudio", "year": 2019, "categories": [ "Concept", "WebGL", "Older projects" ], "featured": false, "technologies": [ "Three.js", "WebGL", "Webflow Integration", "ImmersivStudio", "Atmospheric Lighting", "Interactive Storytelling" ], "description": "A haunted-house experience blending 3D with Webflow, produced with ImmersivStudio — atmospheric interiors, eerie lighting and a narrative you walk through in the browser. The WebGL scene sits inside a editorial Webflow shell, so story, layout and immersive visuals share the same page without feeling like separate products stitched together. A seasonal concept piece where mood, shaders and scroll-driven pacing turn a simple house tour into something unsettling.", "status": "available", "demo": "https://hauntedhouse.webflow.io/", "source": null, "image": "https://andersonmancini.dev/images/thumbs/haunted_house.webp" }, { "slug": "nikon-launch", "name": "Nikon Launch", "url": "https://andersonmancini.dev/projects/nikon-launch", "markdown": "https://andersonmancini.dev/projects/nikon-launch.md", "tagline": "Product launch landing page with 3D gallery", "year": 2019, "categories": [ "Concept", "WebGL", "Older projects" ], "featured": true, "technologies": [ "WebGL", "Three.js", "Product Launch Landing Page", "3D Gallery", "Realistic Product Rendering", "Camera Concept" ], "description": "Another product-launch landing page demo — built to show how far WebGL realism can go for camera and gear unveilings. Beyond the hero product shot, it includes a 3D gallery so visitors can explore the camera from multiple angles inside the same real-time experience. A focused concept for premium launches: lighting, materials and interaction aimed at the polish of a high-end campaign page.", "status": "available", "demo": "https://nikon-neotix.vercel.app/", "source": null, "image": "https://andersonmancini.dev/images/thumbs/nikon_camera.webp" } ] }