Fizz Button

Written for the variant you picked above: Cola

Build a soda-glass pill button that fizzes. Props: children, drink {top, bottom, bubble, label}, onClick and type. The button: a 54px pill filled with a vertical gradient from top to bottom colour, a cold highlight down its left side and a pale band of foam along the top (an overlay gradient), an inset rim, a darker inner shadow at the bottom, and a soft drop shadow in the drink's colour. The label sits above everything with a faint text shadow. Fizz: while hovered, spawn a bubble every 38ms (eight at once on entry). Each bubble's x is drawn from a bell curve centred on the pointer's x (spread three-tenths of the width, or most of it with no pointer) and follows the pointer as it moves; its radius is 1.6–6px (small ones commoner); it rises the full height in a time that shortens as it grows, swaying left and right a few pixels on the way, scaling from 0.4 up and fading in. A bubble is a ring in the bubble colour with a tiny white highlight. Bubbles live in a layer inside the pill, clipped to it. About one in five escapes: when it reaches the rim a twin appears in a layer above the button, hops 10–24px up and pops — a quick scale to 2.2× and fade. Leaving stops the fizz; bubbles already rising finish. Pressing sends a burst of 26 bubbles in quick succession across the whole width, and the label bobs up 3px and settles. Keyboard focus starts the fizz; on touch, a press fizzes for 1.8s. Everything is appended imperatively and animated with the Web Animations API. Reduced motion: no bubbles at all, just the glass. Selected variant — Cola (cola): Cola: liquid from #6a321c to #24100a, cream bubbles rgba(255,228,196,0.8), label #fff3e3, on a #f6ece1 ground. This selection takes precedence over references to other themes or options in the general brief. Implement this selected appearance; do not add a variant picker or alternative appearances unless requested. Implementation requirements: Use React and TypeScript. Keep the component self-contained, with uniquely scoped CSS and no animation libraries. Include required imports, styles and font setup in the result. Interaction: Point at the button and it fizzes, thickest under the pointer; press for a burst. Keyboard focus fizzes too. Motion: Bubbles rise in 0.6–1.6s, swaying; escapees hop and pop in about 0.5s; the label bobs over 520ms on press. Reduced motion shows the still glass. Accessibility: A real button with its text label; the bubbles are decorative and live in aria-hidden layers with pointer-events none. Every drink keeps the label above 4.5:1 against its liquid. Responsive behavior: The button keeps its size; leave about 36px of room above it for escaping bubbles. Touch: A press bursts and fizzes for 1.8s. Preserve keyboard access, visible focus and reduced-motion behavior. Keep fictional demo data and simulated service calls in a separate usage example; expose callbacks for real actions and recover from rejected requests. Keep usage-example links inside the demo: use local buttons or prevent navigation. Demonstration links must not navigate to Vitrine routes or open other pages; preserve real URL support in the reusable component itself. Verify the result at narrow and wide viewport sizes, with keyboard input and reduced motion enabled.

Notes

Interaction

Point at the button and it fizzes, thickest under the pointer; press for a burst. Keyboard focus fizzes too.

Motion

Bubbles rise in 0.6–1.6s, swaying; escapees hop and pop in about 0.5s; the label bobs over 520ms on press. Reduced motion shows the still glass.

Accessibility

A real button with its text label; the bubbles are decorative and live in aria-hidden layers with pointer-events none. Every drink keeps the label above 4.5:1 against its liquid.

Responsive

The button keeps its size; leave about 36px of room above it for escaping bubbles.

On touch

A press bursts and fizzes for 1.8s.