The combination of glassmorphism and the mouse spotlight was the most difficult aspect. Although each element on its own is simple — involving a backdrop-filter with blur() and a radial-gradient that follows the cursor — putting them together led to actual bugs.
I had to deal with z-index issues; after I added the ambient particle canvas behind all the other elements, it ended up on the same stacking layer as the spotlight glow and so it was silently overwriting it. I therefore carefully went through the stacking context to work out that the particles should be placed behind the spotlight, not next to it.
The way the cursor glow appeared was robotic; in the first version I had simply set the CSS position directly in response to every mousemove event, which caused the light to jump instantly to the cursor rather than seeming natural. I solved this by using a requestAnimationFrame loop that gradually moves the glow towards the cursor position each frame rather than teleporting it — it’s a small improvement, but that’s what makes the difference between a tech demo and something that actually feels smooth.
Mobile performance: backdrops with a blur effect are costly and the mousemove event doesn’t trigger on touch screens at all, so I needed to specifically detect (hover: hover) and reduce the blur radius and the number of particles for phones rather than assuming that desktop behaviour should apply in all cases.
It wasn’t merely a matter of swapping colours. For every glass effect—such as spotlight colour, glow intensity, and blur opacity—separate light and dark values had to be defined using CSS custom properties, or else the effect would appear washed out in one them and too strong in the other.
Animations and the switching of single-page sections don’t replay automatically. As the sections are simply switched on and off using display: none/active, the scroll-triggered fade-in animations (using IntersectionObserver) are set to fire only once per element by default, so I had to manually reset and re-observe the elements each time a navigation tab was clicked if the cards were to animate in again rather than just show up.
Nothing by itself was difficult—rather, it was the fact that visual polish fails to appear in areas you only realize when you actually test the design across different themes, devices, and real interactions, not just by looking at a static screenshot.
- 2 devlogs
- 1h
- Personal Site
