Spotlight Grid
A fine grid revealed by a soft spotlight that follows the cursor, leaving a trail of lit cells. Click to send a ripple through it.
- 3.7 KB .bexode
- 9 live inputs
- Responsive fit Layout
Use it
The code follows your customizations. Install with npm i exodeui.
import { ExodeUICanvas } from 'exodeui';
// spotlight-grid.bexode goes in /public (download it below)
export function SpotlightGrid() {
return (
<ExodeUICanvas
src="/spotlight-grid.bexode"
fit="Layout" // responsive: redraws at any container size
autoPlay
interactive
onTrigger={(name) => {
// fires: 'ripple'
}}
style={{ width: '100%', height: 560 }}
/>
);
}Inputs
| Input | Type | Default | Range |
|---|---|---|---|
title | Text | Light the way in. | — |
sub | Text | Spotlight grid · move your cursor | — |
cell | Number | 44 | 16 – 140 |
radius | Number | 280 | 60 – 900 |
intensity | Number | 1 | 0 – 2 |
dots | Boolean | false | — |
accent | Text | #5b8cff | hex colour |
text | Text | #eef1ff | hex colour |
bg | Text | #06070b | hex colour |
Events (via onTrigger): ripple