Post

Sam Rose
@samwho.dev

A cheeky lil' bit of off-screen progress on my Turing Machine visualisation. I want it to be very obvious how the state of the machine is changing with every instruction.

9 reposts62 likes

Sam Rose
@samwho.dev

While I didn’t use the mechanics used by @jhey.dev, the idea to use this effect came from one of his tweets. I did try to use anchors but it seems it can’t be done from JS? The table I have here is dynamically generated from a program written in a DSL I wrote for the post. bsky.app/profile/jhey...

Jhey ʕ·ᴥ·　ʔ@jhey.dev

CSS-only magnetic link effect 🤯 li:has(a:is(:hover, :focus-visible)) {anchor-name: --a; } ul::before { left: anchor(--a left); width: anchor-size(--a width); } using CSS anchor positioning, declare an anchor on hover for the indicator 🚀

Sam Rose
@samwho.dev

What I’d like to do with this is have the 3 different “pointers” be different colours, and when they hover over each thing the text changes to white. CSS’s mix-blend-mode: difference is close to the effect I want but I want to be able to pick the text colour, not have it be the inverse. Ideas?

Sam Rose
@samwho.dev

The way it works atm, the pointers are elements inside of the same container as the table. The container has position: relative, and the pointers have position:absolute and z-index:-1 (so they pass underneath the text). I then tween the top, left, width, and height to move them to different places.

Sam Rose
@samwho.dev

This is _fine_ but it would be nice to be able to control the colour of the text as each pointer hovers over it. Just setting the colour is the wrong effect, it needs to be the mix-blend-mode type effect. Something something clipping?