Build note: a dot grid that only works when you touch it.
I wanted a background for a hero that does nothing until the pointer arrives. Dots near the cursor swell, a tap sends one ring out through the grid, and then it goes back to sleep.
Two things took longer than the drawing itself.
• Sleeping. The first version kept a frame loop running the whole time the page was open. Now every dot is a small spring, and when all of them are at rest the loop ends. I checked the published page: idle is zero frames, and it also stops off screen and in a hidden tab.
• The name. I had it as Dot Field until a search across the marketplace turned up two listings with that name. Took a few minutes to find one that was free.
One habit I picked up this week from reading other people's components: never parse the colour control yourself. Framer hands it over as an rgb() string, and a hex-only parser quietly turns a shadow into rgba(NaN). The colour goes straight to CSS now.
The image is Aisol Ripple Dots behind a mock landing page.
Build note: a dot grid that only works when you touch it.
I wanted a background for a hero that does nothing until the pointer arrives. Dots near the cursor swell, a tap sends one ring out through the grid, and then it goes back to sleep.
Two things took longer than the drawing itself.
• Sleeping. The first version kept a frame loop running the whole time the page was open. Now every dot is a small spring, and when all of them are at rest the loop ends. I checked the published page: idle is zero frames, and it also stops off screen and in a hidden tab.
• The name. I had it as Dot Field until a search across the marketplace turned up two listings with that name. Took a few minutes to find one that was free.
One habit I picked up this week from reading other people's components: never parse the colour control yourself. Framer hands it over as an rgb() string, and a hex-only parser quietly turns a shadow into rgba(NaN). The colour goes straight to CSS now.
The image is Aisol Ripple Dots behind a mock landing page.