Gooey Toggle
A liquid mercury metaball toggle switch with a stretching fluid bridge during transit, break-away separation physics, liquid splashes, and on/off triggers.
- 4.3 KB .bexode
- 8 live inputs
- Responsive fit Layout
Use it
The code follows your customizations. Install with npm i exodeui.
import { ExodeUICanvas } from 'exodeui';
// gooey-toggle.bexode goes in /public (download it below)
export function GooeyToggle() {
return (
<ExodeUICanvas
src="/gooey-toggle.bexode"
fit="Layout" // responsive: redraws at any container size
autoPlay
interactive
onTrigger={(name) => {
// fires: 'toggle', 'stateOn', 'stateOff'
}}
style={{ width: '100%', height: 360 }}
/>
);
}Inputs
| Input | Type | Default | Range |
|---|---|---|---|
checked | Boolean | false | — |
label | Text | Quantum Superposition | — |
sublabel | Text | Liquid metaball toggle with fluid bridge separation | — |
speed | Number | 1 | 0.1 – 4 |
accent | Text | #06b6d4 | hex colour |
accent2 | Text | #3b82f6 | hex colour |
offColor | Text | #1e2230 | hex colour |
bg | Text | #080a10 | hex colour |
Events (via onTrigger): togglestateOnstateOff