try it out

003

003

003

Heat Ink Cursor Trail

Ink that darkens where your cursor slows, then cools away. Move slowly, then stop.

Setup

1

Add it above your section. Drop the component in as a sibling directly after the section you want it over, in the same parent. Not inside the section.

2

Fill both axes and pin to all four edges. It should cover the section and keep covering it as the page resizes.

3

Put it on top. Give it a higher z-index than the content beneath. It never catches a click, so it is safe above anything, including links and buttons.

4

Keep the parent clean. Do not wrap it in a layer with opacity under 100%, a filter, or blend isolation. Any of those trap mix-blend-mode, and Multiply stops reaching the page — the ink will look like it is sitting on a grey sheet instead of soaking into the section. If Multiply looks wrong, this is why, every time.

5

Covering a whole page? Set Quality to Low. At Medium on a dense screen a full-viewport overlay is a 3-megapixel field. The effect is soft enough that the resolution drop is invisible, and it roughly halves the fill cost.

Create a free website with Framer, the website builder loved by startups, designers and agencies.