STEM Playground Slides

An interactive HTML + TypeScript lesson set with playful slides across physics, circuits, CS, and data structures.

Topics & slides

• Gravity & air: intro, feather vs stone free-fall, wind-blown cannon arcs, parachute terminal speed.
• Electricity: basics primer, Ohm’s law sandbox, series vs parallel builders.
• Logic circuits: switches/LEDs, AND/OR/NOT, XOR composition, half-adder sum/carry.
• Optics & lenses: refraction angle vs index, convex and concave lens ray diagrams, focus/blur screen demo.
• Friction & slopes: static threshold on a ramp, kinetic friction acceleration, braking distance with grip.
• Waves & sound: waveform sandbox (sine/square/saw), interference overlay, loudness drop with distance.
• Bloom filters: bit-setting demo, false-positive sliders, sizing for target FP.
• Graphs: DFS vs BFS traversal animation, Dijkstra shortest path, Kruskal MST.

Stack

• Vite dev server with hot module replacement
• TypeScript targeting modern browsers
• Vanilla HTML/CSS visuals (no external frameworks)

Getting started

1. Install dependencies (already done for this workspace):

   npm install

2. Start the live reload dev server:

   npm run dev

   The server prints a local URL (default http://localhost:5173). Open it to explore the slides.

Scripts

• npm run dev - launch Vite in dev mode with hot reload.
• npm run build - type-check with tsc and generate the production bundle.
• npm run preview - serve the built assets locally to verify the optimized output.

Project structure

.
├── index.html          # Application shell with root mount point
├── public/             # Static assets served as-is (e.g., favicon)
├── src/
│   ├── main.ts         # Slide logic, simulations, and interactions
│   └── style.css       # Layout, playful theme, and scene styling
├── tsconfig.json       # TypeScript compiler settings for Vite bundler mode

Notes

• Simulations are qualitative and tuned for clarity; not precise engineering models.
• Tweak colors or motion in src/style.css to match your classroom vibe.