Making The Home Page of My Website

The Concept

Like many kids that grew up in the 2010’s and had access to a computer and internet, I spent time playing Flash games and watching Flash cartoons. Stick animations were a popular style since they were easier to do. I made them as well, some in flash but most using Pivot. A record of those animations doesn’t exist since my hard drive of the time died.

One of the most creative stick animations was the “animator vs animation” by Alan Becker.

Then once when thinking about the simplest and vaguest way of how to explain what I do I came up with the phrase “I make/break/fix things”.

In early 2024 I decided to make a blog website inspired by a colleague as well as many other people online. For the home page I wanted to pay homage to “animator vs animation” and incorporate the phrase “I make/break/fix things”.

The concept was I as a stick figure would be sitting at my desk typing, the user could click and drag me to throw me around. I would then get up put my things back and sit down and start typing again. There would be text on the screen that would say “I make things”, on hover it would say “I break things”, then on hover exit it would say “I fix things” before going back to “I make things”.

Two Years of Procrastination

I then proceeded to procrastinate for two years. Spurts of activity came around new years. I bought this domain in October 2024. I came up with the content of my first blog post in December 2024 and delivered it as a talk at the office.

Early 2025, I did more research on the tech stack I wanted to use, settled on Astro + MDX, I also discovered p2-es a rigid body physics engine and found it’s ragdoll demo which was exactly what I needed.

Then in January 2026 I set a time budget of 3 days on my time off to build this website.

Stick Figure

p2-es came with a pretty complete example of what I wanted, I looked at the code, although reading through the core concepts documentation is what put things into perspective. The MDN docs on the HTML canvas element were also very helpful.

Glitching Out

I used the powerglitch library to glitch out text and used CSS to replace the text.

.glitch-out:hover {
	font-size: 0;
}

.glitch-out:hover::after {
	content: attr(data-hover);
	font-size: 15rem;
}

How I Didn’t Animate the Stick Figure

I wanted to animate the stickman. In my youth I had experience with 2d frame-by-frame animation and character rigging when working in Flash and Pivot. I thought of rigging the sprite and creating a looping animation to play while the user is not interacting with the rigid bodies. Researching on how to do character rigging for the web I cam across the following:

Spine 2d: looks to be a solid tool but costs $70. Has support for phaser.js, a javascript game engine. I thought I could use spine and phaser together.
Dragon Bones: A free solution but Chinese. I was afraid that the documentation might not be good.
Rive: a motion design tool, some call it the “new Flash”. I started watching tutorials and making my project. I soon realized that the learning curve is too steep and I won’t be able to fit it in my time budget.

In the end I used Claude Code to do the animation for me. It took a few iterations but it finally made what I was envisioning. looking at the code output it would have taken me at least a month to understand enough of the concepts to be able to do it myself including dusting off trigonometry knowledge. This means I have a learning debt of 1 month now. Much has been said about the slippery slope Of AI coding agents. The utility is undeniable, but there is also a real risk of skill atrophy. I could have implemented other things like walk cycles and getting up animations using Claude as well but that would increase my learning debt further.