Skip to main content

Soda Can

A drinks can with a true cylindrical label wrap, condensation and a splash when you click to change flavour.

  • 6.5 KB .bexode
  • 7 live inputs
  • Responsive fit Layout
Live runtime

Use it

The code follows your customizations. Install with npm i exodeui.

import { ExodeUICanvas } from 'exodeui';

// soda-can.bexode goes in /public (download it below)
export function SodaCan() {
  return (
    <ExodeUICanvas
      src="/soda-can.bexode"
      fit="Layout"   // responsive: redraws at any container size
      autoPlay
      interactive
      onTrigger={(name) => {
        // fires: 'ctaClick'
      }}
      style={{ width: '100%', height: 560 }}
    />
  );
}

Inputs

InputTypeDefaultRange
nameTextFIZZ Sparkling—
taglineTextReal fruit, cold-pressed and carbonated hard. Zero sugar, all bite.—
ctaTextGet a 12-pack—
flavorsTextBlood Orange:#ff6a2b:#c2311a:#2a0d08,Yuzu Lime:#c8ef45:#6fa818:#123008,Wild Berry:#e0457b:#8a1d4a:#26061a—
speedNumber10.1 – 3
bgText#0d0b0ahex colour
textText#f7f2echex colour

Events (via onTrigger): ctaClick