States of matter: solid, liquid, gas
120 particles in a box and a temperature slider: watch matter melt and boil at the molecular level. A model for chemistry and physics class — from one prompt.
✓ Prompt tested in Gemini (signed out): worked 3 out of 3 times
- Level
- Beginner
- You make
- A states-of-matter model in a single HTML file
- Age
- 10+
- Time
- ≈ 25 min
- Tools
- Gemini
- Account
- Not needed
What you’ll get
Cold — the particles stand in a lattice and tremble. Warm — they slide around. Hot — they fly and bounce off the walls. The state and temperature are shown in large letters at the top. Press “Play the example” above — Gemini made it from the prompt below.
Steps
-
Open gemini.google.com. Under 13 — together with a parent, on their device.
-
Copy the whole prompt and send it:
Make a "Solid, Liquid, Gas" model in a single HTML file. Don't load anything from the internet: no Tailwind, no CDN, no fonts, no images and no libraries — only your own CSS and JavaScript inside the file. Don't save anything in the browser's memory. On a canvas, a closed box with 120 particles. A temperature slider from −50 to 150 °C: cold — the particles stand in a neat lattice and only tremble; warm — they slide past each other; hot — they fly freely and bounce off the walls. Particles must not pass through each other. At the top, show the state in large letters: "Solid", "Liquid" or "Gas", and the temperature. Marks for 0 °C (melting) and 100 °C (boiling) on the scale. "Heat" and "Cool" buttons. Everything should look good on a phone. Show the result in Canvas. -
Wait about a minute, click Preview and try all the buttons and sliders.
-
Check the AI (see the question above).
-
Click Download (sometimes it’s under the Export menu) — the file opens in any browser. Show it in class!
Change the prompt
Before sending, swap a few words and you get your own version. Change only the words, and leave the rules about the internet and Canvas as they are.
- “120 particles” → “300 particles”
- “0 °C (melting) and 100 °C (boiling)” → “−39 °C (melting) and 357 °C (boiling)” — that’s mercury! Don’t forget to change the slider range too.
If it doesn’t work
- The AI says it changed everything, but the result is the same? Write:
Nothing changed. Show the updated version in Canvas. - No Preview button? Write:
Show the result in Canvas. - The state doesn’t change? Write: “The temperature slider doesn’t change how the particles move. Fix it, change nothing else.”
Sending work to the gallery opens soon.