Post

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.

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?

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.

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?

Lots of _potential_ ideas here… Are you able to share the repo?

oliverturner

Invite accepted! I’ll have to wait ‘til tomorrow to dig in, but looking forward to seeing what we can do here 😎

Hugely appreciate you taking a look! Please don’t judge me too harshly 😅