One Afternoon, 23 Backgrounds

The Capstone That Took Three Months

In my university OpenGL class, a flocking simulation was my capstone project. Three months of work. I rebuilt it with AI in 30 minutes.

Here's what that looks like.

That's swarm-probability. My favorite of the 23. Flocking agents form clusters, react to edges, ripple when disturbed. The original took a semester of hand-rolled vertex buffers and matrix math. This version runs in a <canvas> tag.

The Seven Families

I didn't plan to build 23 of these. I sat down one afternoon with an early Gemini model, started with swarms, and kept going. They organized themselves into seven families.

Swarm

The first engines I built. Agents follow simple rules. Clustering, separation, alignment. swarm is the basic version. swarm-probability is the capstone remake. swarm-nexus adds leader-follower formations and a topographical terrain where agents collect rewards.

Neural

I spent an exorbitant amount of time watching the 3D neural network. There's something about the fixed vertex speed that creates these mesmerizing random-seeming flashes as data propagates through the layers. Six engines in this family, from simple node graphs to a full transformer architecture visualization.

Black Hole

The second engine I ever built. I've had a lifelong fascination with black holes, and I wanted to get as close to physics-accurate as you can in a browser. Lighter particles spiral inward. Darker ones accelerate away. The accretion disk forms naturally from the math.

blackhole-dark is the singularity variant where your mouse affects the gravitational pull. warp-bubble evolves over time and shifts colors. time-ripples is an AI warfare simulation where each agent has a different personality and attack strategy.

Quantum

Lifelong interest in quantum physics. quantum-superposition is one of my favorites. It accurately demonstrates superposition — hover over a particle to collapse its state. Schrodinger in a canvas tag. Entanglement effects ripple to paired particles across the field.

Matrix

AIs default to Chinese characters for matrix effects. I used hex code instead. matrix-binary responds to your mouse. matrix-terminal adds terminal simulation elements.

Hex

The best example of accent color theming in the entire portfolio. The hexagonal grid changes color completely per profile — cyan on the default, emerald on engineering-manager, amber on platform-lead. Performance in the browser was the real challenge here.

Health Flow and Circuit

health-flow does complement color math. It doesn't just use your accent color. It calculates complementary and analogous colors, so multiple hues shift together per profile. circuit started as a video-game concept and got toned down to something more subtle.

How Do the Engines Work?

Every engine shares the same contract. One interface, one loader, one cleanup path. Switch the variant string in a profile's YAML and the entire background changes. The engines don't know which profile loaded them. They just read the accent color from CSS variables at render time.

Lazy loading keeps the initial bundle small. Only the engine the visitor sees gets downloaded. If someone opens the background selector and picks a new one, the old engine unmounts, the new one streams in.

See Them Live

You're looking at one right now. Every profile on this portfolio has its own default engine and accent color. The default profile runs swarm-probability in cyan. The AI engineering profile uses transformer-llm. The engineering manager profile pairs neural-brain with emerald.

Hit the background selector button in the bottom corner of any profile page. All 23 are in there.

The engines started as an afternoon of curiosity. They turned into the thing that makes this portfolio feel alive. Every one of them is a physics simulation, a math problem, a small proof that the gap between imagining something and building it has collapsed.

I spent a semester learning how to make particles flock. Now I spend that time deciding what to build next.

In This Series

• One Afternoon, 23 Backgrounds — The 23 canvas engines behind every page
• One Resume Is Not Enough — How YAML drives 16 portfolio variants
• Text Is Not Enough — The profile-aware AI chatbot
• Why Everything Is Glass — The glassmorphism design system
• Ask ChatGPT Who Tyler Wall Is — Infrastructure and AI discoverability

Frequently Asked Questions

Can I use these engines on my own site?

Yes. The entire portfolio is open source on GitHub. Each engine implements the same EngineProps interface, so you can drop any of them into a React project. Pass it a canvas ref, an accent color, and a size — it handles the rest.

How do you pick which engine loads per profile?

Each profile's YAML config specifies a default engine variant. The EngineLoader component lazy-loads only the one the visitor sees. No engine code ships in the initial bundle unless the visitor triggers it.

Do the engines work on mobile?

Yes, with reduced particle counts. The useCanvas hook detects the device type and scales down automatically. On low-power devices, particle counts drop and frame rates target 30fps instead of 60. The physics still look right — just fewer particles doing the work.