Samin Sami
Creative 3D Web & AI Eng. Breaking Browser's Absolute Limits
- 5.0
- Rating
- 21
- Followers
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
6
11
4.6K
Face Detection: Browser Machine Learning and Biometric HUD (https://codepen.io/saminSalma/pen/ogZwEpp)
I built this face detection app to run machine learning models directly in the browser inside a clean interactive UI.
Users can upload any photo and get an instant scan. The system draws targeting brackets over the face, maps 68 facial points, estimates age and gender, and shows percentage bars for seven basic emotions. If a photo has more than one person, the app counts them and lets you click through each face to update the readings on screen.
Everything runs on the client side using JavaScript and HTML5. The photos stay on the user's computer and never get uploaded to an external server. The model detects the face position, facial points, age, and emotion expression in one pass. If someone uploads a photo without a visible face or any pics of living creatures other than humans, the app handles the error and updates the status message instead of freezing.
The ragebaiting part was to format and structure out the data so it felt clean and fast. Putting the emotion stats beside the face box makes it easy to read the numbers while looking at the person. No distractions, no drama... Showing the total face count in the corner also helps users know if the model missed anyone in the photo.😊
2
11
4.2K
Najar: Interactive Hero Section with Video Mask and Cursor Trail (https://<https://jsfiddle.net/Saminsami/tm6xjoch/4)
"A fashion brand landing page where text reveals video and the cursor leaves a trail of editorial images"
I built this hero section for a fashion brand called Najar. The main idea: the brand name acts as a mask that reveals video underneath, and when you move your cursor across the page, it leaves behind a trail of editorial fashion images.
The result is a landing page that feels alive. The text is not static. The cursor is not just a pointer. Everything moves.
WHAT I WAS BUILDING:
A text mask that clips video to the shape of the letters
A cursor trail that spawns images wherever the mouse moves
Smooth transitions so nothing feels jarring
The text mask works by using CSS clip-path or canvas compositing. The video plays inside the letter shapes, so you see motion through the typography. The cursor trail stores the last N mouse positions and places small images at each point, then fades them out over time.
THE TECHNICAL SIDE:
The page uses HTML, CSS, and JavaScript. No frameworks, no libraries.
The text mask is the core effect. I rendered the brand name on an offscreen canvas, then used that as a clipping mask for the video element. Every frame, the video draws only where the text pixels exist.
For the cursor trail, I tracked mouse movement with event listeners and stored positions in an array. Each position gets a small image element that fades out and removes itself after a short delay. The images are editorial fashion shots that match the brand feel.
The layout is minimal. Dark background, centered text, nothing else. All the attention goes to the interaction.
WHAT I LEARNED:
Canvas compositing is powerful but fiddly. Getting the text mask to update every frame without lag took some optimization.
The cursor trail needed throttling. Without it, too many images spawned on fast mouse moves and the page slowed down. I limited the spawn rate and capped the array length.
TRY IT YOURSELF: (https://<https://jsfiddle.net/Saminsami/tm6xjoch/4)
The full working example is on JSFiddle. Move your mouse around and watch the trail appear.
Built by Samin Sami | Developer & 3D Experimentation
1
11
2.8K
Kreva: A 3D Web Experience for a Cafe (https://krevabysamin.netlify.app)
"Building an interactive website with smooth scrolling, a 3D digital book, and a brewing calculator"
I designed and developed the web interface for KREVA (https://krevabysamin.netlify.app), a coffee and cafe brand in Dhaka. The goal was to translate their black and gold physical atmosphere into a digital space that feels the same way.
Instead of a standard static menu, I wanted users to feel the brand before they visit. That meant building an interactive site with 3D elements and smooth transitions.
WHAT I BUILT:
Smooth scrolling: I used Framer Motion for scroll animations that guide users through sections from roasted coffee to signature waffles. The transitions feel fluid and match the brand tone.
Interactive 3D book: A realistic book interface where users can drag page corners to turn pages. Inside, the menu, ingredients, and a guest ledger are laid out like a physical journal.
Brewing calculator: Embedded in the 3D book, users select their brew method (Pour Over V60, AeroPress, etc.) and get the water-to-coffee ratio and extraction time.
3D spatial elements: A dynamic cube and spatial navigation for the menu section. Users interact with the menu through 3D space instead of a flat list.
Auto tour mode: A hands-free guided walkthrough of the site's 3D features and menu highlights.
THE TECHNICAL SIDE:
The site is built with React and Next.js on the frontend. Framer Motion handles the scroll animations, page transitions, and micro-interactions. Three.js and WebGL power the 3D cube, the interactive book physics, and the spatial elements. Tailwind CSS keeps the styling consistent with the black and gold design system across all devices.
Deployment is on Netlify. The whole thing runs in the browser without plugins.
WHAT I LEARNED:
The hardest part was the 3D book. Getting page turns to feel natural required tuning the physics, the drag interaction, and the visual feedback. Too stiff and it feels like a button. Too loose and it feels broken.
Framer Motion and Three.js work well together but need careful coordination. Both try to animate the same elements, so I had to define clear boundaries for which system handles what.
Built by Samin Sami | Developer & 3D Experimentation
1
11
2.7K