Soda Machine

Component

About

An interactive vending machine. Drag a coin into the slot (it turns edge-on as it nears), pick a drink, and cans and change drop into the tray with real 2D physics and synthesized sounds. Tap a can for a detail view; optional cart.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Soda Machine to your project and fits it to your theme.

Code

How Soda Machine is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import { SodaMachine, type SodaDrink } from "@/components/ui/soda-machine";

const drinks: SodaDrink[] = [
  {
    name: "Cola",
    price: 100,
    color: "#e23b44",
    shade: "#8e1820",
    light: "#ff8b90",
    blurb:
      "Classic cola, ice cold. Vanilla and citrus peel up front, a long sharp fizz behind.",
    notes: ["Vanilla", "Citrus peel", "Caramel"],
    kcal: 140,
    sugar: 35,
    caffeine: 34,
  },
  {
    name: "Melon",
    price: 90,
    color: "#3fbf6c",
    shade: "#176a37",
    light: "#9cefb8",
    blurb:
      "Japanese melon soda. Bright green, sweet and a little nostalgic, like a summer afternoon.",
    notes: ["Musk melon", "Cream", "Light fizz"],
    kcal: 120,
    sugar: 30,
    caffeine: 0,
  },
  {
    name: "Peach",
    price: 120,
    color: "#ff9566",
    shade: "#b8461f",
    light: "#ffd0b8",
    blurb:
      "White peach with a soft floral finish. Juicy, gentle bubbles, best very cold.",
    notes: ["White peach", "Elderflower", "Soft fizz"],
    kcal: 110,
    sugar: 27,
    caffeine: 0,
  },
];

export default function SodaMachineDemo() {
  return <SodaMachine drinks={drinks} brand="skizz" currency="¥" />;
}