You may have encountered animated underlines on menus before. But have you ever seen them follow the cursor? I haven’t, so I had to build it myself.
If you’re using a desktop browser, you can try the effect yourself on the main menu. For everyone else, here is a video:
These cards remember their position (try reloading the page) and tilt to the left or right when you drag them. If you drop a card outside its bounding area, it will smoothly transition back.
This content is not available in the feed.
This component can hold two or more slides to cycle through with a keyhole-transition. Click on the colored area below to watch the effect.
This content is not available in the feed.
This component also cycles through a set of slides but lands on a random one, similar to rolling a dice. I added an easing effect that slows down the action towards the end.
This content is not available in the feed.
This custom scroller has an option to automatically scroll back and forth. Like back in the 90ies when we had the glorious <marquee> tag. You can also scroll it using mouse or touch gestures or by clicking on the arrows (which appear on hover if you are using a desktop browser).
When you cannot scroll further in a given direction, the corresponding arrow will change into a circle. Clicking or tapping it will cause the scroll position indicator to shake.
This content is not available in the feed.
For elements that deal with overflowing content — eg. a menu on a small screen — I created the component <ScrollClip>. It can show buttons on the overflowing edges. Together with shadows, they act as signifiers (you can scroll in this direction) but you can also click them to scroll a certain distance.
This content is not available in the feed.
Try navigating this page with your keyboard: press the tab key to jump between interactive elements and the enter key to trigger them. This requires a small amount of extra work — but I think it’s absolutely worth it.
In case you are curious, this website runs on Jigsaw , a refreshingly minimal and robust static site generator. It’s written in PHP and built on top of Laravel’s Blade templating engine (which I am a big fan of).
It allows me to use custom component-tags with parameters for both purely markup partials, and fully interactive elements:
This content is not available in the feed.
For websites like this I prefer native Web Components to progressively enhance the experience. Everything works fine with JavaScript disabled.
To enhance my own developer experience, I hacked together a semi-elegant solution for single-file Blade components, where Vite processes the CSS and JS while the Blade template engine processes the markup:
This content is not available in the feed.
I have used 11ty + WebC , Astro and other tools before which offer similar solutions but I prefer the simplicity and robustness of Jigsaw. No need for explicit imports (Blade associates component-tags with corresponding files automatically), no need for constant updates and fixing breaking changes, no syntactic overhead — it’s just very much how I like it.
That’s it. I hope you’ll have fun exploring my website.]]>