Neon Flow: 3D Character Texturing Experiment
How neon color maps flow across a human silhouette, built with Three.js
I built this 3D animation to test how neon color maps flow across a human body model in real time. The goal was simple: see what happens when you push vibrant textures through a digital silhouette and watch the lighting respond.
The result is a short animation where purple and blue neon patterns move across a human figure. The colors shift with the camera angle, so the surface always looks like it is in motion.
WHAT I WAS TESTING:
I wanted to find out two things:
1. How color transitions work on a 3D character mesh when they move?
2. How lighting interacts with neon textures that are always changing?
The animation uses custom shader code to make the colors move across the surface. The neon maps flow instead of sitting still, which gives it that liquid look.
THE TECHNICAL SIDE:
Everything runs in the browser with Three.js and WebGL. No plugins, no downloads.
The code handles vertex and fragment shaders for the flowing neon effect, dynamic lighting that changes with the animation, and smooth camera movement with OrbitControls. I also used SimplexNoise to generate the color patterns that flow across the model.
I loaded the human model with GLTFLoader, then applied custom materials with noise-based color transitions. The Orbitron font from Google Fonts gives the text overlay that sci-fi look.
TRY IT YOURSELF: (https://<https://jsfiddle.net/Saminsami/dz1p0ws6/1>)
The full working example is on JSFiddle. You can change the colors, adjust the speed, or swap out the model to see how the effect changes.
WHAT I LEARNED:
This project taught me about shader programming and how small changes in color values shift the mood of a 3D scene. The neon effect works because the colors never stop moving.
If you are working on similar projects or want to collaborate on 3D web experiments, message me here on Contra.
Built by Samin Sami | Developer & 3D Experimentation
7
14
9.3K
Scrim is a landing page I designed and built for a feature-flag and staged-rollout product.
A scrim is the theatre gauze that hides a set until it's lit from behind. Feature flags do the same with code, so I staged the whole page as a show: a silk curtain opens it and falls closed again at the end.
Some of the moments:
- The curtain is live WebGL silk, backlit from deep umber to pale gold. Its folds part toward your pointer.
- The product console arrives lying flat on the stage floor and hinges up to face you. Keep scrolling and it comes apart into its four cards, at different depths, and stays that way as the section leaves.
- "40 ms" counts down to "0.04 ms" as you scroll, next to a code window in four languages.
- Pricing is a theatre ticket. Drag to your number of users and it reprints itself for the plan that fits.
- Every FAQ answer sits behind its own feature flag. Switch one on and it rolls out to you.
- At the end the same curtain falls closed, with "Break a leg." printed across it.
The product UI is all HTML, CSS and SVG, with no image files. Built with Next.js 16, Tailwind CSS v4 and Lenis.
Live link: https://scrim-seven.vercel.app (https://scrim-seven.vercel.app/)
0
69
Type meets Tactile Knitwear: Procedural 3D Yarn Typography in WebGL 🧵✨
Tired of flat 2D fonts, we explored what happens when digital letterforms are sculpted directly from physical apparel textures.
Introducing the Nexvoro 3D Yarn Typography experiment—built for the #Typography trend!
✨ Technical Details:
• Procedural V-shaped knit wale loops mapped to 3D extruded geometry
• PBR optical micro-fiber fuzz simulating 100% Cashmere & Merino wool
• Continuous Catmull-Rom 3D spline yarn thread weaving through the letterforms
• Real-time fiber colorway swatches at locked 60 FPS in Three.js & Next.js 14
The intersection of fashion tech, creative coding, and typography.
👉 Test the live interactive 3D type: https://www.nexvoro.tech/demos/yarn-typography
(https://www.nexvoro.tech/demos/yarn-typography)🌐 Studio builds: https://www.nexvoro.tech
Would love to hear your feedback on the texture and depth! What do you think?
#typography #threejs #webgl #creativecoding #digitalfashion #3ddesign
0
39
MORDANT: Vault of Unmixable Pigments (https://samincollection2.netlify.app/mordant)
Colours that refuse to mix, combed on water in a stone trough. The Mordant Vault guards colours that refuse to blend. Float them on water. Comb them. Never, under any circumstance, stir.
I built this project to test Colours that refuse to mix, combed on water in a stone trough. The Mordant Vault guards colours that refuse to blend. Float them on water. Comb them. Never, under any circumstance, stir. The core engineering challenge was sustaining uncompromised 60 FPS rendering using WebGL / GLSL Shaders while handling continuous user interaction without framework overhead.
WHAT I WAS TESTING:
I focused on two core engineering benchmarks:
Precision implementation of shader marbling under continuous interactive user input
Sustained 60 FPS render performance and zero-dependency browser execution
THE TECHNICAL SIDE:
Engineered directly in the browser with WebGL / GLSL Shaders, Canvas2D, Shader marbling. The application runs without third-party frameworks or build-step dependencies, using hardware-accelerated rendering and custom event loops to achieve zero-latency response.
Everything executes in the browser using WebGL / GLSL Shaders, Canvas2D, Shader marbling. No third-party frameworks, no heavy runtime bundles, and zero external tracking.
WHAT I LEARNED:
Balancing the mathematical rigors of shader marbling with tactile browser interaction required tuning event throttling and memory allocation to eliminate all garbage collection stutters.
Finding the sweet spot between mathematical precision and frame budget took careful profiling, but the result runs at a steady 60 FPS even on modest hardware.
TRY IT YOURSELF:
(https://samincollection2.netlify.app/mordant)The live build is deployed on Netlify. Open it in your browser, test the controls, and observe the render response times.
If you are building high-performance 3D, physics, or creative web systems and want to collaborate, reach out here on Contra.
16
21
3.9K
🧵 The future of apparel eCommerce isn’t flat.
Just dropped our new project at Nexvoro Studio: The Spatial 3D Knitwear Atelier.
Built on Three.js & WebGL 2.0 with 22,000+ procedural yarn stitches, real-time Cashmere/Merino fiber switching, and a locked 60 FPS 360° orbit.
👉 Test live: https://www.nexvoro.tech/demos/3d-knit-studio
(https://www.nexvoro.tech/demos/3d-knit-studio)👉 Studio: https://www.nexvoro.tech
Open for bespoke 3D configurators and luxury web builds. Let’s collaborate! ⚡
#threejs #webgl #fashiontech #ecommerce #digitalfashion
0
43
CARTELLE: The Society for Speculative Cartography.
(https://samincollection2.netlify.app/cartelle)"High-Performance Creative Web Exploration"
Drag a procedurally inked globe of places that don't exist. An archive of maps of places that do not exist. The Society for Speculative Cartography charts imaginary worlds with scholarly rigor and unreasonable devotion.
I built this project to test Drag a procedurally inked globe of places that don't exist. An archive of maps of places that do not exist. The Society for Speculative Cartography charts imaginary worlds with scholarly rigor and unreasonable devotion. The core engineering challenge was sustaining uncompromised 60 FPS rendering using Three.js (GLB 3D) while handling continuous user interaction without framework overhead.
WHAT I WAS TESTING:
I focused on two core engineering benchmarks:
Precision implementation of procedural globe under continuous interactive user input
Sustained 60 FPS render performance and zero-dependency browser execution
THE TECHNICAL SIDE:
Engineered directly in the browser with Three.js (GLB 3D), WebGL / GLSL Shaders, Canvas2D, Procedural globe. The application runs without third-party frameworks or build-step dependencies, using hardware-accelerated rendering and custom event loops to achieve zero-latency response.
Everything executes in the browser using Three.js (GLB 3D), WebGL / GLSL Shaders, Canvas2D, Procedural globe. No third-party frameworks, no heavy runtime bundles, and zero external tracking.
WHAT I LEARNED:
Balancing the mathematical rigors of procedural globe with tactile browser interaction required tuning event throttling and memory allocation to eliminate all garbage collection stutters.
Finding the sweet spot between mathematical precision and frame budget took careful profiling, but the result runs at a steady 60 FPS even on modest hardware.
TRY IT YOURSELF:
(https://samincollection2.netlify.app/cartelle)The live build is deployed on Netlify. Open it in your browser, test the controls, and observe the render response times.
If you are building high-performance 3D, physics, or creative web systems and want to collaborate, reach out here on Contra.
6
17
2K
Bringing fine jewelry to life in real-time 3D ✨
Static photos don't cut it for high-ticket pieces. We built an interactive 3D Ring Atelier where buyers can customize diamond cuts, metals, and carats with real-time pricing—running at 60 FPS on mobile.
Average session dwell time jumped from 50s to nearly 4 minutes.
Live demo: https://www.nexvoro.tech/jewelry
Would love your thoughts!
2
0
71
I designed and built this real-time orbital situational awareness dashboard for Kessler Watch (https://samincollection.netlify.app/sites/kessler/index.html).
Communicating the density of low Earth orbit debris without sacrificing browser performance required bridging scientific telemetry with optimized WebGL rendering. Simulating over 500 cataloged satellites, spent booster stages, and fragmentation clouds around an interactive globe with dynamic close-approach warnings, scrubbable timeline controls, and altitude distribution graphs turned raw tracking metrics into an urgent, tactile space-surveillance experience.😊
15
1.5K
💎 Just launched an ultra-luxury 3D fine jewelry boutique & interactive customizer: Victoria LeClair Atelier.
Static product images are no longer enough for luxury eCommerce. High-ticket buyers want to inspect diamond cuts, test metal karats, and feel the craft before purchasing.
✨ Key Highlights:
• Real-time 3D ring customizer built with Three.js & WebGL
• Dynamic metal swapping (18k Yellow Gold, Rose Gold, Platinum)
• Live gemstone & diamond cut transitions (Pear, Round, Emerald, Radiant)
• Real-time carat pricing calculation & custom engraving preview
• Mobile-optimized at 60 FPS with custom diamond sparkle shaders
• Full luxury boutique storefront with curated collections & seamless checkout
Built with Next.js, Three.js, and Tailwind CSS.
🔗 Experience the live atelier: https://www.nexvoro.tech/jewelry
(https://www.nexvoro.tech/jewelry)Interactive 3D configurator: https://www.nexvoro.tech/demos/custom-ring
Would love to hear your feedback! Are you building 3D eCommerce experiences for your brand? Let’s connect!
9
2
422
The Moth Who Mapped the Moon: Interactive Scroll Storybook.
(https://samincollection.netlify.app/sites/mothmoon/index.html) "Turning a six chapter bedtime story into a scroll animated journey from a land to the moon"
"The Moth Who Mapped the Moon" is an interactive storybook I built. It is a six chapter bedtime story. Every websites in this modern 2026 era scrolls from top to bottom, but here the scroll moves the camera upper into the sky. The story reader follows a small moth named Etta traveling from land, move past a lighthouse, all the way to the stars and then moon.
Every chapter changes the background as you scroll down. The grass and lighthouse fade away, stars connect with silver lines, and the moon grows larger. A small moon position indicator on the right side of the screen tracks reading progress.
The graphics use vector illustrations and CSS animations, it is connected with a custom JavaScript scrolling. The script calculates Etta's position, wing movements, and background motion based on mouse scrolling. To keep the website responsive and smooth on new and old mobile devices, excessive background details like fireflies, the light from lighthouse, and the owl animate where only necessary.
The main challenge was balancing scroll speed. If the scenery moved too quickly, the text became hard to read. If it moved too slowly, the website felt boring. Placing the typography inside "almost close to" transparent looking cards kept the text readable over the dark sky without feeling gibberish.😊
14
1.2K
Why settle for flat 2D photos when customers can customize in real-time 3D? 💎✨
Engineered with Three.js & Next.js 14:
• ⚡ 60 FPS in-browser WebGL rendering (Zero lag)
• 💎 Real-time diamond refraction & custom metal shaders
• 🚀 100/100 Google Lighthouse performance score
Test the interactive 3D studio live:
👉 https://www.nexvoro.tech/demos/custom-ring😊
4
3
412
I designed and developed this interactive aviation chronicle for Southern Line (https://samincollection.netlify.app/sites/aeropost/index.html).
Reimagining the golden age of 1930s transatlantic airmail meant uniting Art Deco travel aesthetics with precision cartography. Animating an orthographic globe projection that guides visitors through five historical flight stages from Toulouse to Santiago, while syncing live wireless telegraph transcripts, vintage tariff tables, and collectible luggage tags along the route, transformed archival navigation logs into an immersive narrative expedition.😊 🙌
15
1.2K
Orikata: Tactile E-Commerce and Pure CSS Origami (https://samincollection.netlify.app/sites/orikata/index.html)
Orikata is an online shop for a paper studio. The studio is based in Kyoto and Portland. The hero section shows a 3D paper craft. The paper folds and opens using pure CSS. It uses flat looking shapes and CSS 3D animations. The site does not load any heavy 3D models or interactions.
The shop sells folding kits and paper crafts. Product cards shows technical diagrams. These cards show folding lines, steps, and difficulties.
Users can add them to a live cart. The cart runs on vanilla JavaScript. The item count updates instantly without a page refresh. Visitors can also check seat openings for in-person experience. The design uses light and cream paper colors with purple/indigo accents.
The CSS fold motion looks cool but took work. The shapes rotate along confusing angles at the start. When all parts folded at the exact same speed, it looked stiff and resembled a poor design. I had to delay the folding animations by a fraction of a second. That small but frustrating delay made the paper movement look premium and natural.😊
14
895
Pyra: Dark Planet with Glowing Molten Tectonic Lines (https://jsfiddle.net/Saminsami/9g8L4zjr/1)
"Interactive 3D model of a fractured planet with dynamic material rendering, built in one HTML file"
I built this as part of a real time synthesis interface for interactive celestial bodies. This view shows Pyra, a dark planet fractured by glowing molten tectonic lines.
The idea was to create a planet that looks alive. Not a static sphere, but something with cracks that glow and shift as you rotate it.
WHAT I WAS BUILDING:
A 3D planet model with procedural fracture lines
Glowing molten material that emits light from the cracks
Interactive rotation so you can view the planet from any angle
The fracture lines are generated using noise patterns. They spread across the surface like cracks in dried earth. The molten glow sits inside those cracks, creating the effect of heat coming from within.
THE TECHNICAL SIDE:
The planet renders in real time using WebGL. The HTML file contains the geometry, shaders, and camera controls.
The surface uses a dark base material. The fracture lines are calculated in the fragment shader using noise functions. Where the noise crosses a threshold, the fragment switches to an emissive orange color.
The glow effect uses a combination of emissive material and bloom. The cracks emit light, and the bloom pass spreads that light outward. The result looks like molten rock glowing through dark crust.
Camera controls let you orbit around the planet. Mouse drag rotates the view. Scroll zooms in and out.
WHAT I LEARNED:
Procedural textures are about math patterns. Noise functions generate random-looking values that form natural shapes like cracks and veins.
Emissive materials need bloom to look like light. Without bloom, the orange cracks just look like painted lines. With bloom, they glow and spill light onto nearby surfaces.
TRY IT YOURSELF: (https://jsfiddle.net/Saminsami/9g8L4zjr/1)
The full working example is on JSFiddle. Rotate the planet and watch the molten lines shift.
Built by Samin Sami | Developer & 3D Experimentation
14
926