React animation example
React Hover Effect: Spotlight Card Grid
A spotlight hover makes a feature grid feel alive without moving the layout around. The light follows the cursor across every card, so neighbours glow a little too, and the card under the pointer lifts and brightens its border. Away from the pointer the grid stays calm and readable.
- 4.2 KB file
- 5 live inputs
- React runtime
How this spotlight hover grid works
- Every card draws a radial gradient centred on the pointer, clipped to its own rectangle, so light spills across gaps.
- Border brightness falls off with distance from the pointer; the hovered card also lifts 4 px on a spring.
- Clicking a card fires "select" with its title.
Add it to your React app
Install exodeui, download the file below, and paste this. The code updates as you customize. Other runtimes are in the other tabs.
import { ExodeUICanvas } from 'exodeui';
// react-hover-effect.bexode goes in /public (download it below)
export function ReactHoverEffect() {
return (
<ExodeUICanvas
src="/react-hover-effect.bexode"
fit="Layout"
autoPlay
interactive
onTrigger={(name) => {
// fires: 'select'
}}
style={{ width: '100%', height: 520 }}
/>
);
}Inputs
| Input | Type | Default | Range |
|---|---|---|---|
items | Text | Physics,State machines,Export,Runtime,AI agents,Responsive | — |
radius | Number | 260 | 120 – 500 |
accent | Text | #a78bfa | hex colour |
ink | Text | #ede9fe | hex colour |
bg | Text | #09080f | hex colour |
Events: select
More React animations
Orbit LoaderThree orbiting dots with motion trails and a live percentage; works as an endless spinner or a determinate loader.Depth Parallax SceneFive depth layers of mountains and sky that shift with the cursor at different speeds.Scramble TextA headline that decodes from random glyphs letter by letter; click to scramble to the next phrase.Shared Element TransitionA card grid where the tapped card springs into a full detail page and back: a shared element transition.Liquid Fill ButtonA button that fills with a liquid wave on hover and morphs into a checkmark on click.Like Heart IconA heart icon that squashes, pops and bursts into particles when liked, with a live counter.
The same idea in other frameworks: JavaScript magnetic confetti button · JavaScript blob cursor links