Note
Finding a reason for the animation
How a small interaction with my name became the starting point for this website.
The early design had a separate section of animated lines. It moved, but it felt disconnected from the rest of the page. There was no reason for it to be on my website.
I suggested trying an effect on my name. The letters pick up blue and bend a little as you move across them. That was the first experiment I wanted to build the page around.
Let the letters do the work
The name starts as ordinary HTML text. On interaction, a canvas draws the same letters as a texture. A small WebGL shader samples that texture through a moving lens and blends the ink into electric blue.
The effect follows the pointer. A tap or keyboard activation runs a short sweep instead, so a mouse isn’t required. Once the effect settles, the canvas stops drawing and the HTML text returns.
Keep the page comfortable
The background went through its own changes. A reflection of the name felt strange, so I asked for waves instead.
They needed to show up on a phone without making the text hard to read. The current version uses soft blue, violet, and coral bands. Scrolling changes their shape, while the reading content stays still.
The pause control freezes the background. With reduced motion enabled, the page uses a still illustration and the name gives simple blue feedback. The content also works without JavaScript.
A page built around the name
The name gave the page a useful starting point. Its blue became the link and focus color, and the animation stays close to the page itself.