Skip to main content

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
Live runtime

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

InputTypeDefaultRange
checkedBooleanfalse—
labelTextQuantum Superposition—
sublabelTextLiquid metaball toggle with fluid bridge separation—
speedNumber10.1 – 4
accentText#06b6d4hex colour
accent2Text#3b82f6hex colour
offColorText#1e2230hex colour
bgText#080a10hex colour

Events (via onTrigger): togglestateOnstateOff