minimal-minis

A collection of small, self-contained browser experiments. Each mini runs in its own iframe inside a shared shell with a minimal sidebar nav and light/dark mode toggle.

Projects

#	Name	Description
01	breathing	Animated breathing guide — expand and contract with a visual rhythm cue
02	clock	Neon-styled analog/digital clock
03	word clock	Time displayed as natural language ("it is half past three")
04	color gen	Generate harmonious color palettes and copy hex values
05	flow field	Perlin-noise-driven particle flow field rendered on canvas
06	life in weeks	Visual grid of your life in weeks — put time in perspective
07	mirror draw	Symmetrical canvas drawing with real-time mirror reflection
08	morse	Type text and hear/see it translated to Morse code
09	particles	Interactive particle playground — click and drag to influence the swarm
10	pomodoro	Minimal Pomodoro timer with work/break cycles
11	reaction	Reaction time tester — measure your response speed in milliseconds
12	typing	Typing speed test — measure WPM and accuracy

Structure

minimal-minis/
├── index.html              # Shell: sidebar nav + iframe stage
├── breathing/
│   ├── index.html
│   ├── breathe.js
│   └── style.css
├── color-palette-gen/
├── flow-field/
├── life-in-weeks/
├── mirror-draw/
├── morse-translator/
├── neon-clock/
├── particle-playground/
├── pomodoro/
├── reaction-time/
├── typing-speed-test/
└── word-clock/

Each mini is fully self-contained — its own HTML, JS, and CSS. No build step, no dependencies, no frameworks.

Running locally

# Any static file server works
npx serve .
# or
python3 -m http.server 8080

Then open http://localhost:8080.

Note: Opening index.html directly via file:// will block iframe loads in most browsers due to same-origin restrictions. Use a local server.