Jelly Button
An elastic physics spring-mass button with magnetic cursor suction, dynamic surface bulge, squash-and-stretch on click, liquid sheen, and droplet splash particles.
- 4 KB .bexode
- 7 live inputs
- Responsive fit Layout
Use it
The code follows your customizations. Install with npm i exodeui.
import { ExodeUICanvas } from 'exodeui';
// jelly-button.bexode goes in /public (download it below)
export function JellyButton() {
return (
<ExodeUICanvas
src="/jelly-button.bexode"
fit="Layout" // responsive: redraws at any container size
autoPlay
interactive
onTrigger={(name) => {
// fires: 'jellyClick'
}}
style={{ width: '100%', height: 360 }}
/>
);
}Inputs
| Input | Type | Default | Range |
|---|---|---|---|
label | Text | Touch the Jelly | — |
sublabel | Text | Elastic spring-mass physics with magnetic suction | — |
stiffness | Number | 180 | 40 – 400 |
damping | Number | 14 | 4 – 30 |
accent | Text | #ec4899 | hex colour |
accent2 | Text | #f43f5e | hex colour |
bg | Text | #0c0810 | hex colour |
Events (via onTrigger): jellyClick