Follow Board HTML Element

The <follow-board> is a small custom made HTML element that uses CSS to drive how it interacts visually with the pointer.

Usually (and in most ways, more sensibly), the way this sort of animation would be handled is by using a combination of a <canvas> to draw the element and Javascript to control its interaction with the mouse pointer.

However, whilst <follow-board> elements do use Javascript to set up the colours of the blocks on the board and configure its behaviour to match what it requested in its attributes, the actual animation is done entirely using CSS position anchor points.

Essentially, the element makes use of a <div> element containing a grid of <span> elements that are sized to fit their container. CSS rules and animations then ensure that an ::after pseudo element of the div anchors to whichever <span> element the mouse pointer is over. The anchor point remains persistent, even when the mouse leaves the element, making return interactions flow as expected.

You can see examples of this custom element being used as the background to the main content on many of this site's pages.