Interactive dot grid with a cursor-tracking spotlight effect.
runed
Installation
Install dependencies
Install the required packages for this component:
Copy the Source Code
Copy and paste the following code into your project:
dot-grid-spotlight.svelte
index.ts
Usage
preview.svelte
Features
- Interactive dot grid with a cursor-tracking spotlight effect
- Customizable dot color, active color, spacing, and radius via props
- Adjustable interaction radius and alpha range for the spotlight glow
Examples
Custom colors
Props
DotGridSpotlight
Canvas dot grid with a pointer-driven spotlight.
| Name | Type | Default | Description |
|---|---|---|---|
dotColor | string | 'rgba(255, 255, 255, 0.05)' | Color used for inactive dots. |
activeDotColor | string | 'rgba(255, 255, 255, 0.1)' | Color used for dots illuminated by the pointer. |
spacing | number | 10 | Distance between dots in pixels. |
baseRadius | number | 1 | Radius of inactive dots in pixels. |
activeRadius | number | 2 | Radius of a dot at the center of the spotlight. |
interactionRadius | number | 128 | Radius of the pointer spotlight in pixels. |
activeMaxAlpha | number | 1 | Opacity applied at the center of the spotlight. |
activeMinAlpha | number | 0.5 | Opacity applied at the edge of the spotlight. |
ref | HTMLCanvasElement | null | null | Bindable reference to the canvas element. |
class | string | undefined | Additional classes applied to the canvas. |