JavaScript animation example
JavaScript Hover Effect: Blob Cursor and Link Underlines
A custom cursor is a strong signature for a portfolio or agency site. This one is a soft blob that trails your pointer, stretches in the direction of travel when you move fast, and swells into a ring over links. The links themselves draw their underline from left to right on hover and retract to the right on leave.
- 4.3 KB file
- 4 live inputs
- JavaScript runtime
How this blob cursor links works
- The blob follows the pointer with a spring; its stretch and angle come from its current velocity.
- Over a link, the blob grows into a ring and switches to a difference blend so the text stays readable.
- Underlines draw in from the left and out to the right, which reads as continuous motion.
Add it to your JavaScript app
Install exodeui-vanilla, download the file below, and paste this. The code updates as you customize. Other runtimes are in the other tabs.
import { ExodeUICanvas } from 'exodeui-vanilla';
// <canvas id="javascript-hover-effect" style="width: 100%; height: 480px"></canvas>
const player = new ExodeUICanvas({
element: '#javascript-hover-effect',
fit: 'Layout',
onReady: (engine) => { },
});
player.load(await (await fetch('/javascript-hover-effect.exode')).json());
player.play();Inputs
| Input | Type | Default | Range |
|---|---|---|---|
links | Text | Selected work,Studio,Journal,Say hello | — |
accent | Text | #ff5a1f | hex colour |
ink | Text | #f5f5f4 | hex colour |
bg | Text | #121212 | hex colour |
More JavaScript animations
Segmented Ring SpinnerTwelve segments in a ring with a rotating bright head and fading tail: the classic activity spinner.Terminal Typing EffectA terminal that types commands with human rhythm, prints their output and loops through a script.Scroll Reveal TimelineA timeline whose line draws with scroll progress while milestone cards slide in from alternating sides.Particle TextHundreds of particles that assemble into a word, scatter from the cursor and spring back.Curtain Wipe TransitionStaggered curtain panels sweep across, the page swaps underneath and the curtains pull away.Magnetic Confetti ButtonA button that leans toward the cursor like a magnet and bursts into spinning confetti on click.
The same idea in other frameworks: React liquid fill button · React spotlight hover grid