Building an Animated Pattern

Before diving into how this component is built, I think it's important to understand what the three Motion hooks actually do. I also made this component so feel free to check out the code! You can think of this hook as a special variable that can change without re-rendering your component every time it changes. This comes in very handy for this interaction in particular, because when tracking mouse position, the value changes 60+ times per second. Re-rendering your entire component that often would be slow and not very performant. This hook automatically calculates a new value based on other motion values. It creates a reactive chain where when the input changes the output gets updated automatically. This hook adds spring animations to any value change. The pattern itself is just a simple grid made out of individual shapes. The shapes could be anything and they could be laid out in any way you want. First, we need to track the user's cursor position. To do this, we create two motion va

saved by

• Fara Yan