React animation example
React Animated Button: Liquid Fill on Hover
A button animation should answer two questions: "can I click this?" and "did it work?". On hover this button fills from the bottom with a moving wave; on click it ripples, morphs into a circle and draws a checkmark, then returns to its label. Both states are real, so it works as a submit button, not just decoration.
- 4.4 KB file
- 5 live inputs
- React runtime
How this liquid fill button works
- The fill level eases toward 1 while hovered; its surface is two summed sine waves so it never looks static.
- Click starts a short timeline: ripple, width collapse to a circle, checkmark stroke, then reset.
- A "submit" event fires at the start of the timeline so your form can send while the animation plays.
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-animated-button.bexode goes in /public (download it below)
export function ReactAnimatedButton() {
return (
<ExodeUICanvas
src="/react-animated-button.bexode"
fit="Layout"
autoPlay
interactive
onTrigger={(name) => {
// fires: 'submit'
}}
style={{ width: '100%', height: 400 }}
/>
);
}Inputs
| Input | Type | Default | Range |
|---|---|---|---|
label | Text | Get started | — |
done | Text | Done | — |
accent | Text | #3b82f6 | hex colour |
ink | Text | #ffffff | hex colour |
bg | Text | #0a0f1c | hex colour |
Events: submit
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.Like Heart IconA heart icon that squashes, pops and bursts into particles when liked, with a live counter.3D Flip CardA two-sided card that flips in 3D on a spring, with a sliding highlight and hover tilt.
The same idea in other frameworks: Flutter speed dial fab · Flutter animated login form · SwiftUI hold to confirm button