Recipe theatre

Build 'Recipe theatre' for an invented Sampleton Citrus Club. Draw an original tall glass and prepare an alcohol free house spritz through six stages: ice, 60 ml orange juice, 15 ml elderflower cordial, 120 ml sparkling water, a gentle stir and an orange garnish. Let the visitor scrub Recipe progress, Jump to step, add the Next ingredient or choose Make it for me. Derive pours, liquid height, bubbles, spoon and garnish from the same progress value, so moving backwards removes what has not happened yet. Add Play, Pause, Reset, a PNG of the recipe frame and a written recipe download with four large ice cubes and those exact quantities. Keep this illustration silent. Fit the complete glass and ingredients within the available canvas, use native controls and text of at least 12px, allow narrow controls to scroll, and begin still for reduced motion.

1. Define one progress value from zero to six. Map each ingredient's amount and each illustrated action to its interval rather than accumulating irreversible drawing changes.
2. Clip the liquid to the glass and draw ice, measured pours, bubbles, stir and garnish from that progress. Report the current step and the combined liquid quantity.
3. Share progress between the slider, step selector and Next ingredient button; entering a manual value stops the automatic recipe sequence.
4. Download the current frame as PNG and a text recipe listing four large ice cubes, 60 ml juice, 15 ml cordial, 120 ml sparkling water and one orange slice.
5. Contain the vessel and ingredients on resize, freeze automatic progress under Pause or reduced motion, and keep every recipe step directly reachable without animation.