Magnetic button
A button that leans toward the cursor as it approaches, with a brushed-aluminium sheen that tracks the pointer across its face.
Read the write-up →Experiments, with the workings shown.
Small interaction pieces I build to work something out. Every one is a real component you can play with, and every one shows the source that runs it, read straight off the file rather than pasted in.
These are experiments, not client work. For that, see selected work.
5 experiments
Spotlight glass card
A soft accent glow that follows the pointer across a frosted panel, built from one pseudo-element and two custom properties.
Read the write-up →Duotone image reveal
An image that starts as a two-tone graphic, with colour bleeding back in from the centre on hover, and no JavaScript at all.
Read the write-up →Scroll progress ring
A ring that fills as you scroll, driven by the CSS scroll-driven animations API, with a scroll-listener fallback where it is not supported.
Read the write-up →Text scramble link
A link whose characters decode from random glyphs into the real word on hover, resolving left to right.
Read the write-up →