How to achieve this Grid Spotlight effect on cursor?
Cruuunchify
Discover how you listen to music.
5 Replies
Inspect and scroll to the top. It's just divs that follow the cursor with some lag. Small dot goes straight there, I assume that big circle might go 10% or something towards your cursor
Yes i understand the laggy part, by how do they make it that the whole website is a grid, and wherever the mouse goes it reveals a little bit?
is it just a real grid design set with lower opacity, and wherever the mouse it, you increase opacity? (just trying to identify the logic)
use the inspector. The grid is a ton of givs with rounded corners and 1px of margin on two sides
the cursor then has a box that follows it with a circular gradient and a z-index set below the boxes, so the gradient shows through the gaps between the divs
here a very simple example, not with a load of cells, but with a repeating background (rounded square svg) and a radial gradient behind it, which position is updated with js (pointer move event)
https://codepen.io/MarkBoots/pen/zYyQGjX