Cauldron Add to Cart: a Halloween micro-interaction

Add the Cauldron Add to Cart to React or Next.js

1. Pick an animation above. Open it in ExodeUI to change its text and colours, or keep it as it is.
2. Download the .bexode file and put it in your public folder.
3. Install the runtime with npm i exodeui.
4. Render it with ExodeUICanvas. Taps and hovers work out of the box.

import { ExodeUICanvas } from 'exodeui';

export function CauldronAddToCart() {
  return (
    <ExodeUICanvas
      src="/ui-gallery/files/cauldron-cart.bexode"
      autoPlay
      style={{ width: 400, height: 300 }}
    />
  );
}

More Halloween micro-interactions

• Pumpkin Like Button
• BOO Hover Button
• Ghost Toggle
• Spider Loader
• Slime Progress Bar
• Bat Menu

Frequently asked questions

Is the Cauldron Add to Cart free to use?

Yes. Try it here, open it in ExodeUI on the free plan or download the .exode file, and ship it with any ExodeUI runtime.

What does the Cauldron Add to Cart do?

The witch hat drops into a bubbling cauldron and the cart ticks up. Tap Add to cauldron to see it.

Can I restyle the Cauldron Add to Cart for my brand?

Open it in ExodeUI and every colour, label, shape and timing is editable, with its states and triggers already wired in the Logic tab.

Does it work outside React?

The same file plays in the Vue, Svelte, Angular, React Native, SwiftUI and Flutter runtimes.

More from ExodeUI