A card with a lamp on its outline: the light slides to the point nearest the pointer and takes the colour of the edge it lands on.
About this tool
A card whose outline behaves like a strip of glass with one lamp inside it. The lamp is not a mood: it has a position, and that position is a real point on the border. Move the pointer and the light slides to the exact nearest spot on the rounded rectangle -- the corner arc when you are diagonal to it, the perpendicular foot when you are beside an edge -- and the further your cursor is from the border, the dimmer it burns. Because the distance is measured properly, in pixels, reach is a length that means what it says instead of a unitless sensitivity, and the falloff is even the whole way round rather than pooling in the corners. Colour is never computed. A single conic palette wheel is pinned to the card and painted across the full perimeter; a soft radial mask centred on the lamp decides what you can see, so the light takes the hue of whichever part of the card it is standing on and cycles as you drag. Three layers share that one image: a hard filament on the border itself, a blurred bloom reaching outside it, and a wash bleeding palette into the surface. The card itself paints nothing but a hairline: card and stage both default to transparent and there is no drop shadow, so it lands on whatever background is already on the page instead of arriving on its own dark plate. There is no hover selector and no CSS transition anywhere -- attack and release are eased in the same animation loop the orbit and the intro lap already need, framerate independent, so the exported HTML behaves exactly like the editor. That also means the component has real answers for the cases hover cannot cover: a touch screen and a catalogue tile put the lamp on a clock, keyboard focus lights the card and still gets a proper focus ring, and reduced motion parks the lamp lit rather than removing it. Reach, spread, filament width, halo, brightness, inner wash, three palette colours, ink, card, copy and stage are all controls. Edit it, then export one self-contained HTML file.
UI/UX · HTML / CSS · All tools