Coder Legion - Recent posts tagged threejs

What If Software Could Ask: “Change the World, but Keep This Moment”?

Tue, 29 Sep 2026 17:00:44 +0000

At 16:50, a photograph is supposed to happen in a small harbor plaza.

The photographer is there. The couple is there. The flowers arrive at 16:30, the arrangement is ready at 16:40, and everything happens as planned.

Then I close a bridge at 16:15.

The courier can no longer take the original route.

The flowers arrive at 16:55.

Setup finishes at 17:05.

The photograph never happens.

That is the entire problem behind Butterfly.

But I wasn't particularly interested in asking:

What happens when I change the world?

Simulation already does that very well.

The question I wanted to ask was different:

What else would have to change so that one exact moment can still happen?

That distinction turned a small 3D experiment into something much stranger.

The photograph is not allowed to move

The easiest way to “fix” the scenario would be to move the photograph to 17:05.

Butterfly is not allowed to do that.

When I select Keep this moment, the photograph becomes a constraint.

It must still happen at 16:50.

In the same place.

With the same people.

With the required flowers ready.

And the bridge must remain closed.

A photograph at 17:05 is not an acceptable approximation.

It is another moment.

That rule became MomentFrame, one of the central ideas in Butterfly.

The system takes something that happened in the original history and freezes the parts that define it.

Then it asks the changed world to find another path back to that exact state.

The world has to earn the solution

Butterfly doesn't switch between prewritten branches.

There is no:

if bridge_closed → flowers_late

The delivery asks the world for a route.

When the bridge becomes unavailable, the valid route changes.

That changes the arrival time.

The new arrival time changes when the flower arrangement can be completed.

The photograph evaluates its requirements again.

And it fails.

The same thing happens when Butterfly searches for a recovery.

The current world contains a bounded set of interventions that are actually permitted. Each candidate is applied to the changed world, the simulation runs again, and the result is checked against the MomentFrame.

In the current scenario, two alternate histories survive.

One activates an already-authored ferry connection.

The other sends the courier earlier, allowing the crossing to happen before the bridge closes.

Both restore the photograph at 16:50.

Neither reopens the bridge.

That last part matters.

The system is not trying to undo the user's change. It is trying to find another history compatible with it.

It is deliberately a very small world

Butterfly currently follows one afternoon in one small harbor town.

That is intentional.

I didn't want to hide the causal structure behind a large generated world and then point at an interesting output.

I wanted the whole chain to remain inspectable.

You can see the bridge.

You can see the courier.

You can see the route.

You can see when the delivery arrives.

You can see when setup completes.

You can see exactly why the photograph disappears.

And when Butterfly proposes a recovery, you can inspect why that works too.

For this experiment, a small world with visible causality was more useful than a large world full of possibilities.

Then the simulator started lying to me

The interesting part of building Butterfly was not getting the first scenario working.

That happened relatively early.

The interesting part was trying to break it afterward.

One of the first problems was almost embarrassing.

The original scenario produced the correct result, but parts of the engine were effectively using stable event IDs as a proxy for temporal ordering.

Nothing looked wrong.

Then I changed the IDs.

The simulation broke.

That meant the result had been correct for the wrong reason.

The fix was not a UI patch. Time had to become explicit in fact resolution.

Another bug was worse.

A fact produced later in the afternoon could leak backward and satisfy a requirement earlier in the timeline.

From the outside, the world could still look plausible.

Internally, causality was broken.

The engine now only accepts producers that can complete at or before the moment being evaluated. Real temporal self-dependencies are treated as cycles rather than quietly inventing an answer.

Those two bugs changed how I approached the rest of the project.

A working scenario was no longer enough.

I started changing assumptions deliberately.

Rename things.

Remove coordinates.

Introduce later transports.

Change route modes.

Move timing boundaries.

If the simulation only works because the original fixture is friendly, I don't consider that a working simulation.

The renderer had its own version of reality

There was another class of bugs that had nothing to do with causal logic.

An actor could be correctly located at a destination according to the simulator while still appearing somewhere else in the 3D scene.

The engine knew one thing.

The renderer showed another.

I eventually separated two concepts that initially looked almost identical:

where something is semantically

and where the renderer knows how to draw it.

That sounds obvious afterward.

It was not obvious while both were represented closely enough that the first scenario appeared to work.

Butterfly kept producing these little cases where the visible result forced me to question the model underneath it.

At one point I had a custom Three.js camera implementation that passed the DOM-level tests.

The screenshot looked terrible.

I removed it.

That gave the project another rule:

A passing test does not overrule visible evidence.

From then on, browser screenshots became part of the development loop instead of something generated at the end.

The recovery is deliberately bounded

Butterfly does not invent an unlimited number of possible histories.

The world already contains the interventions that are allowed to exist.

The recovery engine searches that bounded domain, simulates each candidate, calculates the consequences and rejects anything that doesn't restore the fixed moment.

This also means the engine has to distinguish between very different outcomes.

Maybe a valid solution exists.

Maybe the target was already satisfied.

Maybe every configured intervention has been tested.

Maybe the search budget was reached before the domain was exhausted.

Maybe the available information is insufficient to decide.

Those are not the same answer.

In particular, exhausting the authored intervention set does not prove that no solution could exist in every imaginable version of the world.

It only tells us that the system did not find one inside the domain it was actually allowed to search.

I wanted that boundary to remain explicit.

The world itself is structured data

The simulation is written in TypeScript and the visual world uses Three.js.

Next.js provides the application around it.

Sanity is used as the authored source for the world model: people, places, objects, routes, transport availability, events, requirements, facts, causal relationships and permitted interventions.

Published world data is validated and frozen into a revision before visitors start creating variants.

A visitor changing the bridge schedule is therefore not editing the shared world.

They are creating another history from a known version of it.

That separation became important very quickly because comparing histories is meaningless if the thing being compared is quietly changing underneath you.

Why call it Butterfly?

The obvious reference is the butterfly effect: change something small and consequences propagate outward.

Butterfly starts there.

Close a bridge.

A route changes.

A delivery moves.

A setup moves.

A photograph disappears.

But I became more interested in the reverse problem.

Once consequences have propagated, can we choose one thing we refuse to lose?

And if we do, what does the rest of the world have to become?

That gives Butterfly a slightly different shape from a normal “what if?” simulator.

Most simulations ask:

What happens if the world changes?

Butterfly asks:

What must the world change so that one chosen thing doesn't?

For now, it is one bridge, one courier and one photograph.

That is enough to make the question real.

Try Butterfly:
https://butterfly-mu-orpin.vercel.app

Source code:
https://github.com/Daniele-Cangi/Butterfly

Butterfly is open source under the MIT License.

I built a real MNA circuit solver from scratch, then wrapped it in Three.js

Fri, 18 Sep 2026 11:23:57 +0000

The problem with "circuit simulators" on the web

Most browser-based circuit tools either fake it (animate current flow without real math) or wrap an existing SPICE engine. I wanted to actually implement the math myself — a Modified Nodal Analysis (MNA) solver, the same technique real SPICE tools use under the hood — and then give it a 3D interface instead of the usual flat 2D schematic.

The result is CircuitForge: place components on a 3D breadboard, wire them up, and get real computed node voltages and branch currents — not an animation.

The actual solver

MNA builds a matrix from Kirchhoff's Current Law at every node, plus extra equations for voltage sources, then solves it. Stripped down, the core loop looks roughly like this:

const g = 1 / resistance;
matrix[nodeA][nodeA] += g;
matrix[nodeB][nodeB] += g;
matrix[nodeA][nodeB] -= g;
matrix[nodeB][nodeA] -= g;

Solve Ax = z for the node voltage vector, and you get exact values — not an approximation. I validated it against hand-calculated results on a few real circuits (simple divider, diode network, a series-parallel KCL cross-check) before trusting it in production. Full writeup with the actual worked numbers is here: luvaai.in/learn/circuit-simulator-accuracy-validation.

Then the fun part: making it 3D

Three.js handles the scene, camera, and raycasting for placing/wiring components. The tricky bit wasn't rendering — it was making wire connections feel physical: snapping to component pins, detecting valid connection points, and keeping the 3D positions in sync with the underlying circuit graph the solver actually operates on. Two completely separate data models (3D scene graph vs. circuit netlist) that have to stay perfectly consistent.

What it can't do (yet)

Being upfront: this is DC operating-point analysis only right now — no transient simulation, no AC frequency sweeps. If you need to see a capacitor charge curve over time, this isn't there yet. It's on the roadmap, but I'd rather ship an honestly-scoped DC solver than fake a transient one.

Try it

Live at luvaai.in — no signup needed, just start placing components. If you've built anything with raycasting-based node/wire editors, or have thoughts on extending MNA to transient analysis, I'd love to hear it in the comments.

Building an Immersive 3D Dice Roller with React and Three.js

Wed, 09 Sep 2026 11:15:19 +0000

Hey RPG community! I wanted to share a tool I built for my tabletop sessions — Arcane-Dice.

Inspired by the immersive dice rolling experience in Baldur's Gate 3, I built this web-based 3D dice roller app to bring that same feeling to any browser.

Features:

Physics-based Rolling: Real 3D dice using Three.js and Cannon.js.
Immersive Effects: Sound effects and animations to make every roll feel impactful.
Easy Integration: Ready to be used in any web-based tabletop tool.

Tech Stack:

React
Three.js (React Three Fiber)
Cannon.js for physics
Howler.js for audio

Check it out on GitHub:
GitHub Repository
Live Demo

I'd love to hear your feedback or see what kind of dice skins you'd like to see next!

showdev #gamedev #threejs #react #rpg

Shader Budgeting For Web Games: Where Your Frame Time Actually Goes

Wed, 26 Aug 2026 11:52:22 +0000

A lot of the WebGL questions that land here turn out to be performance questions wearing a syntax costume, so this is the profiling angle rather than the GLSL tutorial angle. If you have ever stripped a scene down to fewer triangles and watched the frame rate refuse to move, this is probably why.

Where The Frame Time Actually Goes

A 1920x1080 canvas is a little over two million pixels. Every triangle covering a pixel runs the fragment shader for that pixel, and with overdraw, meaning several triangles stacked over the same pixel, the fragment shader can execute tens of millions of times in a single frame. The vertex shader runs once per vertex, which for most web scenes is a few thousand invocations.

That ratio is the whole story. Cutting geometry shrinks the small number. Cutting per pixel work shrinks the large one.

Moving Work Up A Stage

Communication between the two programmable stages only flows one way. The vertex shader writes varyings, the rasterizer interpolates them across the triangle, and the fragment shader reads them as inputs. Anything that interpolates acceptably can be computed per vertex and handed down essentially for free, which is the difference between per vertex Gouraud lighting and per pixel Phong lighting: smoother results at real cost.

Procedural animation is the other easy win. Grass sway, ocean waves and cloth flutter are vertex displacement driven by sine waves, noise and a time uniform, and that beats rewriting vertex buffers from JavaScript every frame because the GPU does the math in parallel across every vertex at once. The full guide to game shaders and visual effects walks through the GLSL for both stages if you want the code rather than the summary.

Branching Costs More Than You Expect

GPUs execute fragments in groups, called warps or wavefronts depending on the vendor. If any fragment in a group takes a different branch, every fragment in that group executes both sides. So the if/else you wrote to skip expensive work often costs about the same as running it unconditionally. step(), mix() and clamp() usually beat the branch, and this is the single most common surprise for people coming from CPU code.

Draw calls matter for a related reason. Each one can force a shader program switch, texture rebinds and uniform updates, so a pile of unique ShaderMaterial instances quietly defeats the automatic batching that Three.js and Babylon.js do for you.

One Shader Source For WebGL And WebGPU

Three.js now ships TSL, a JavaScript node graph that compiles to GLSL for the WebGL backend and WGSL for WebGPU from a single source, so you are not maintaining two shader codebases while WebGPU support fills in across browsers. Classic ShaderMaterial still works if you would rather write GLSL by hand or you are porting existing code. Babylon.js goes the parallel route with its own node material system plus a built in inspector.

Takeaway

Profile first. Spector.js captures the WebGL calls and lets you inspect the shader program, textures and GPU state per draw call, and the Babylon.js inspector reports draw call counts and frame stats directly. Once you can see which stage is eating the frame, the fix is usually obvious, and it is usually not fewer triangles.

Building HOLO.SYS — A Futuristic 3D Holographic Visualization System with React, Three.js & GLSL

Fri, 08 May 2026 18:36:53 +0000

Introduction

Modern web development is rapidly evolving beyond traditional websites and static user interfaces. Today, developers are building immersive digital experiences directly inside the browser using technologies like WebGL, Three.js, GLSL shaders and advanced Web architectures.

As a Full Stack Web Developer, I always wanted to explore the creative side of Web engineering — where design, interaction, animation, performance and GPU rendering come together to create something visually powerful.

That vision led me to build HOLO.SYS — a futuristic cyberpunk-inspired 3D holographic visualization system developed using:

React.js
Three.js
GLSL Shader Programming
GSAP Animations
WebGL Rendering
Modern JavaScript Architecture

This project is not just another Web experiment.
It is a complete creative Web engineering project focused on immersive web experiences, real-time rendering, shader effects, and cinematic UI systems.

What is HOLO.SYS?

HOLO.SYS is a real-time interactive holographic visualization system inspired by:

Cyberpunk interfaces
Futuristic HUD systems
Sci-fi holographic displays
AI visualization panels
Advanced UI/UX concepts

The goal of this project was to simulate a futuristic holographic rendering system directly inside the browser using modern Web technologies.

The application features:

Real-time 3D rendering
Interactive camera controls
Dynamic holographic shader effects
Scanline visual systems
Animated glitch transitions
Fresnel rim glow lighting
Smooth geometry morph transitions
Live GUI customization controls
Performance optimized rendering

This project represents the combination of:

✅ Creative Development

✅ Modern Frontend Engineering

✅ WebGL Rendering

✅ Real-Time Graphics

✅ Interactive UI Systems

✅ Shader Programming

Live Project

⚛️ Technologies Used

One of the most exciting parts of this project was combining multiple modern frontend technologies together.

React.js

React was used to structure the application into reusable and scalable components.

It helped manage:

Component architecture
UI organization
Application structure
Rendering lifecycle
Future scalability

React makes it much easier to build modern interactive web applications while keeping the codebase clean and maintainable.

Three.js

Three.js was responsible for handling:

3D scene creation
Geometry rendering
Camera systems
Lighting setup
Mesh transformations
WebGL abstraction

Instead of manually writing low-level WebGL code, Three.js provides a powerful abstraction layer that allows developers to create advanced 3D experiences much faster.

The project includes multiple 3D geometries such as:

Torus Knot
Icosahedron
Torus Geometry

These objects transition dynamically with holographic effects.

GLSL Shader Programming

One of the most advanced parts of this project is the custom GLSL shader system.

The shaders were handwritten to create:

Holographic scanlines
Dynamic glitch displacement
Fresnel rim glow
Transparency falloff
Transition masking
Animated distortion systems

Vertex Shader Features

The vertex shader manipulates geometry positions in real-time.

It creates:

Glitch wave displacement
Randomized distortion
Progress-based transition effects
Animated geometry movement

Fragment Shader Features

The fragment shader controls:

Pixel colouring
Hologram transparency
Glow intensity
Fresnel lighting
Scanline rendering

This combination creates the cinematic holographic appearance visible in the final system.

GSAP Animations

GSAP was used to create smooth and performant animations.

It powers:

Geometry transitions
Shader progress animations
Smooth effect timing
UI interaction flow

GSAP provides better control and smoother animations compared to many traditional animation libraries.

WebGL Rendering

WebGL is the foundation behind the entire rendering pipeline.

It enables GPU acceleration directly inside the browser.

This allows the project to render:

Real-time graphics
Interactive 3D systems
Shader effects
Dynamic animations

without needing external software.

Major Features of HOLO.SYS

Real-Time Holographic Rendering

The project creates a futuristic holographic appearance using:

Transparency blending
Additive rendering
Glow effects
Scanline overlays
Animated distortion

The final output feels similar to sci-fi hologram systems seen in futuristic films and games.

Dynamic Glitch Effects

A custom glitch engine was developed using mathematical shader calculations.

The glitch system includes:

Time-based sine waves
Randomized displacement
Transition distortion
Multi-layered visual noise
Animated geometry corruption

These effects make the hologram feel alive and dynamic.

Fresnel Rim Glow

A Fresnel lighting system was implemented to create edge glow effects based on viewing angle.

This adds:

Depth perception
Futuristic glow
Cinematic visuals
Enhanced realism

This is one of the most visually impactful effects in the project.

Animated Object Transitions

The application cycles through multiple 3D geometries using shader-based transition masking.

Instead of instantly switching objects, the project creates:

Smooth vertical sweep transitions
Controlled visibility masking
Cinematic object replacement

This creates a much more polished and professional visual experience.

Interactive GUI Controls

A real-time GUI panel was implemented using lil-gui.

Users can dynamically change:

Hologram colors
Stage colors
Ambient lighting
Directional lighting

This makes the system interactive and customizable.

Performance Optimization

Performance was a major focus during development.

Optimization techniques include:

request Animation Frame loops
Controlled DPR scaling
Efficient shader calculations
Proper clean-up systems
Memory leak prevention
Optimized rendering pipeline

These improvements help maintain smooth rendering performance.

What I Learned From This Project

This project significantly improved my understanding of:

Advanced Web Development

I learned how modern Web engineering goes far beyond simple layouts.

Web development today includes:

Real-time rendering
GPU acceleration
Interactive systems
Creative coding
Visual programming

Shader Programming Concepts

Before this project, shader programming felt complex.

During development, I learned:

GLSL basics
Vertex shader manipulation
Fragment shader rendering
Coordinate systems
Lighting calculations
Procedural visual effects

This project became a huge learning experience.

Three.js Architecture

I gained practical experience with:

Scene management
Camera systems
Mesh rendering
Materials
Geometries
WebGL pipelines
Orbit Controls

This helped me better understand 3D development for the web.

Modern Full Stack Development Journey

As a Full Stack Developer, I believe modern web engineering should combine:

Functionality
Performance
Scalability
Creativity
User experience

HOLO.SYS represents that mindset.

It is not only a frontend showcase — it demonstrates creative engineering and technical exploration.

Why Creative Frontend Development Matters

The future of web development is moving toward:

Immersive experiences
3D interfaces
Interactive visual systems
AI-powered UIs
Real-time graphics
WebXR and AR/VR

Projects like HOLO.SYS help developers explore the next generation of web experiences.

Creative frontend engineering is becoming one of the most exciting areas in software development.

Future Improvements

This project is still evolving.

Future upgrades may include:

Bloom post-processing
Audio reactive effects
GLTF/GLB model loading
Mobile touch optimization
WebXR support
AI visualization systems
Advanced particle systems
Dynamic environment lighting
Procedural geometry systems
Cyberpunk dashboard integrations

The goal is to continue transforming HOLO.SYS into a more advanced interactive visualization framework.

About the Developer

Hi, I’m Muhammad Yasir — also known online as YasirAwan4831.

I’m a Full Stack Web Developer focused on:

Modern Web Development
Creative Frontend Engineering
React.js Applications
JavaScript Ecosystems
Three.js & WebGL
UI/UX Development
Interactive Web Experiences
Performance Optimization

I continuously work on improving my skills by building real-world projects and experimenting with modern technologies.

Final Thoughts

Building HOLO.SYS was an exciting journey into the world of:

Creative coding
Real-time graphics
WebGL rendering
Shader programming
Advanced frontend development

Projects like this remind me how powerful the modern web has become.

Today, browsers are capable of rendering cinematic experiences that once required dedicated graphics software.

More futuristic projects, advanced UI systems and immersive web experiences are coming soon.

Connect With Me

GitHub

https://github.com/YasirAwan4831

Project Repository

https://github.com/YasirAwan4831/holographic-shader-visualizer-three.Js

Live Demo

https://holographic-threejs.vercel.app/

#ReactJS #ThreeJS #WebGL #GLSL #ShaderProgramming #FrontendDevelopment #CreativeCoding #CyberpunkUI #WebDevelopment #JavaScript #GSAP #ModernWebDevelopment #InteractiveWebDesign #FullStackDeveloper #CreativeFrontend #RealtimeRendering #HolographicUI #OpenSource #UIUX #Programming #WebDesign #ThreejsProjects #ReactDeveloper #WebGLProjects #YasirAwan4831 #MuhammadYasir

Quantum Neural Network 3D — A Deep Dive into Interactive WebGL Visualization

Fri, 17 Apr 2026 05:53:48 +0000

Introduction

In the modern era of web development, static interfaces are no longer enough. Users expect immersive, interactive, and visually engaging experiences. With this vision in mind, I developed Quantum Neural Network 3D — an advanced real-time 3D neural network visualization built using Three.js and WebGL.

This project is not just about visuals; it represents a combination of mathematics, graphics programming and user interaction design, creating a simulation that feels alive and responsive.

Project Overview

Quantum Neural Network 3D is an interactive system that visually represents neural structures in a three-dimensional space. It allows users to explore different network formations, trigger energy pulses and interact with a dynamically animated environment.

The goal of this project was to push beyond basic frontend development and explore advanced rendering techniques, shader programming and real-time interactivity.

Key Features

1. Interactive 3D Neural Network

The core of the project is a fully dynamic neural network composed of nodes and connections. Each node behaves like an energy point and connections simulate data flow between them.

2. Multiple Network Formations

The system supports different structural patterns:

Crystalline Sphere — based on mathematical distribution (golden ratio)
Helix Lattice — inspired by DNA-like structures
Fractal Web — recursive branching similar to AI networks

Each formation provides a unique visual and structural experience.

3. Real-Time Animations

Breathing node effects
Flowing connection lines
Smooth transitions between formations
Continuous rotation and motion

These animations create a lifelike and futuristic feel.

4. Energy Pulse Interaction

Users can click anywhere on the screen to generate energy pulses, which travel across the network in real-time. This feature adds a layer of interaction and makes the system feel responsive and intelligent.

5. Advanced Visual Effects

Bloom (glow) effects
Particle-based starfield background
Smooth camera controls
Glass morphism UI design

These elements combine to deliver a premium visual experience.

User Interaction

The project is designed to be fully interactive:

Click → Send energy pulses
Drag → Rotate and explore the network
Morph Button → Change network structure
Freeze Button → Pause animations
Reset Button → Reset camera view

This makes the experience both exploratory and engaging.

Technology Stack

This project leverages modern web technologies:

Three.js — 3D rendering engine
WebGL — hardware-accelerated graphics
GLSL Shaders — custom animations and effects
JavaScript (ES6) — application logic
HTML5 & CSS3 — UI and layout

No heavy frameworks were used, ensuring performance and control over rendering.

How It Works

1. Scene Initialization

The application starts by creating a 3D scene, camera, and renderer. Post-processing effects like bloom are applied to enhance visuals.

2. Network Generation

Nodes and connections are generated using mathematical algorithms depending on the selected formation.

3. Shader-Based Rendering

Custom shaders control:

Node size and glow
Connection animation
Pulse wave propagation

4. Interaction System

Using raycasting, the system detects user clicks and generates pulse waves that propagate through the network.

Design Philosophy

The design focuses on:

Minimalism + Futurism
Smooth animations
Glass morphism UI
Neon-inspired colour palettes

Three main themes are included:

Purple Nebula
Sunset Fire
Ocean Aurora

Each theme changes the entire visual mood of the application.

Performance Optimization

To ensure smooth performance:

GPU-based rendering is used
Buffer Geometry minimizes memory usage
Animations are optimized with request Animation Frame
Pixel ratio is controlled for mobile devices

The result is a fast and responsive experience across devices.

Live Project & Source Code

Live Demo: https://yasirquantumneuralnetwork3d.vercel.app/

GitHub Repository:

https://yasirquantumneuralnetwork3d.vercel.app/

What I Learned

This project helped me gain deeper understanding of:

3D graphics programming
Shader development (GLSL)
WebGL rendering pipeline
Performance optimization
Interactive UI/UX design

It pushed me beyond traditional frontend development into advanced visualization engineering.

Future Improvements

Planned upgrades include:

Audio-reactive visualization
AI data integration
Export as image/video
VR/AR support
Advanced physics simulation

Conclusion

Quantum Neural Network 3D is more than just a project — it’s a step toward building immersive web experiences that combine creativity with technology.

It reflects my journey as a developer exploring new domains like 3D web development, real-time rendering, and interactive systems.

Feedback & Support

If you found this project interesting:

⭐ Star the repository
Share your thoughts
Suggest improvements

Created by Muhammad Yasir
Full Stack Developer | Exploring AI & 3D Web

✨ Building the future, one project at a time.

#WebDevelopment #ThreeJS #WebGL #JavaScript #Frontend #3D #UI #FullStack #FullStackDeveloper #OpenSource #Portfolio #MuhammadYasir #YasirAwan4831

Exploring the power of 3D experiences on the web

Sun, 15 Mar 2026 12:29:25 +0000

This is an experimental 3D sports landing page built with modern frontend technologies. The goal was to create a more immersive and interactive experience compared to traditional flat landing pages.
Inspired by a great tutorial from JS Mastery, I built this 3D Basketball Landing Page as a creative frontend experiment.

Tech stack
• Three.js – for rendering interactive 3D scenes
• GSAP – for smooth, high-performance animations
• Next.js – for modern React architecture and performance

Three.js allows developers to render interactive 3D graphics directly in the browser using WebGL, enabling immersive web experiences and real-time animations.

The page combines 3D elements, animated transitions, and camera movement to make the interface feel more alive and interactive.

The idea was to move beyond static layouts and create a landing page where motion, depth, and interactivity become part of the user experience.

I also used AI tools during development to speed up experimentation and explore different creative approaches.

Live project:
https://3d-basketball-template.vercel.app/

Exploring the power of 3D experiences on the modern web

Sun, 15 Mar 2026 12:28:47 +0000

Tech stack
• Three.js – for rendering interactive 3D scenes
• GSAP – for smooth, high-performance animations
• Next.js – for modern React architecture and performance

Three.js allows developers to render interactive 3D graphics directly in the browser using WebGL, enabling immersive web experiences and real-time animations.

The page combines 3D elements, animated transitions, and camera movement to make the interface feel more alive and interactive.

The idea was to move beyond static layouts and create a landing page where motion, depth, and interactivity become part of the user experience.

I also used AI tools during development to speed up experimentation and explore different creative approaches.

Live project:
https://3d-basketball-template.vercel.app/

Virtual 3D Museum - Three.js

Fri, 16 Jan 2026 15:50:33 +0000

So, I was shitcanned recently and said to myself: "Hey, why not actually learn something new and interesting for once?"

Three.js has been high on my list for a long time. I tried to make a pinball game a couple of years back, failed miserably, and never quite forgot about it. This time, I wanted to see if I could turn Wikipedia entries into something more visual and "walkable"

The result is a Virtual 3D Museum. It’s a 3D environment where the "exhibits" are pulled dynamically from the Wikipedia API, and gallery rooms are populated with that info on the fly

Virtual 3D Museum by NBM (@notbigmuzzy) on CodePen.

The Tech:

Three.js: Handles the spatial layout and rendering.
Vanilla JS: No frameworks. I wanted to keep it lightweight and see how far I could get with just the basics (spoiler: it can go really far).
Wikipedia API: The source of all the data.

The Details:

Multi-language support: You can toggle between different language versions of Wikipedia.
Persistence: It uses basic local storage, so it remembers your session when you come back.
Environment: I went for a "faux 3D" look—enough to feel immersive without being heavy on the hardware. I know it doesn't look "well" yet; I don't know how to use Blender properly, and I'm still learning exactly how far you can push a browser before the stuttering ruins the experience.

It’s been a fun experiment in data visualization and spatial UI. If you’re into Three.js or just want to see a weird way to read about history or universe, check it out ;)

Source Code: GitHub - https://github.com/notbigmuzzy/linkwalk
Live Demo: Full version with languages and persistence - https://notbigmuzzy.github.io/linkwalk/

Coder Legion - Recent posts tagged threejs

What If Software Could Ask: “Change the World, but Keep This Moment”?

The photograph is not allowed to move

The world has to earn the solution

It is deliberately a very small world

Then the simulator started lying to me

The renderer had its own version of reality

The recovery is deliberately bounded

The world itself is structured data

Why call it Butterfly?

I built a real MNA circuit solver from scratch, then wrapped it in Three.js

Building an Immersive 3D Dice Roller with React and Three.js

Features:

Tech Stack:

showdev #gamedev #threejs #react #rpg

Shader Budgeting For Web Games: Where Your Frame Time Actually Goes

Where The Frame Time Actually Goes

Moving Work Up A Stage

Branching Costs More Than You Expect

One Shader Source For WebGL And WebGPU

Takeaway

Building HOLO.SYS — A Futuristic 3D Holographic Visualization System with React, Three.js & GLSL

Introduction

What is HOLO.SYS?

Live Project

Live Demo

GitHub Repository

GitHub Profile

⚛️ Technologies Used

React.js

Three.js

GLSL Shader Programming

Vertex Shader Features

Fragment Shader Features

GSAP Animations

WebGL Rendering

Major Features of HOLO.SYS

Real-Time Holographic Rendering

Dynamic Glitch Effects

Fresnel Rim Glow

Animated Object Transitions

Interactive GUI Controls

Performance Optimization

What I Learned From This Project

Advanced Web Development

Shader Programming Concepts

Three.js Architecture

Modern Full Stack Development Journey

Why Creative Frontend Development Matters

Future Improvements

About the Developer

Final Thoughts

Connect With Me

GitHub

Project Repository

Live Demo

Quantum Neural Network 3D — A Deep Dive into Interactive WebGL Visualization

Introduction

Project Overview

Key Features

1. Interactive 3D Neural Network

2. Multiple Network Formations

3. Real-Time Animations

4. Energy Pulse Interaction

5. Advanced Visual Effects

User Interaction

Technology Stack

How It Works

1. Scene Initialization

2. Network Generation

3. Shader-Based Rendering

4. Interaction System

Design Philosophy

Performance Optimization

Live Project & Source Code

https://yasirquantumneuralnetwork3d.vercel.app/

What I Learned

Future Improvements

Conclusion

Feedback & Support