TinyLama Slots

A skinnable, browser-based slot machine starter you can theme and ship quickly.

This project is designed like a build skill: swap art, tune sounds, adjust copy, and you can produce a new themed slot experience with minimal code edits.

Try it.

• Demo Slot Game — demo

What this gives you

• 3×4 slot layout with animated reels
• Overlay reel animation with row masking (no symbol bleed)
• Themeable top/middle/bottom visual panels via image assets
• Lightweight Web Audio engine (ambient hum + spin/click/stop/win sounds)
• Adjustable hold timing and ambient control
• Audit + RTP panel for quick verification
• GitHub Pages-ready output from /docs

Project structure

.
├── artifacts/         # working assets + source index.html
├── docs/              # deploy-ready app (GitHub Pages root)
├── README.md
└── ...

Rule of thumb: edit both artifacts/index.html and docs/index.html together (or edit one and sync), so local iteration and deploy output stay aligned.

Skinning/Theming workflow (quick recipe)

1) Replace visual assets

Drop your PNG/JPG assets into artifacts/ and docs/:

• neon_breath_header_top.png (top section)
• neon_breath_reels_panel.png (reel panel)
• neon_breath_bottom_controls.png (audit/controls panel)
• tile_background.png (middle outer frame)

Then map them in CSS variables (:root) inside index.html:

--headerBg: url("./your_header.png");
--reelsBg:  url("./your_reels_panel.png");
--bottomBg: url("./your_bottom.png");
--middleBg: url("./your_middle.png");

2) Update theme language/copy

Common labels to customize:

• Title badge and pills
• Main button text (Breath in, Hold / release text)
• Slider labels (Om, Hold)
• Audit panel naming

3) Tune symbol set + payouts

In JS:

• SYM = symbols/emojis
• PAY3 = paytable
• REELS = reel strips (distribution)
• PAYLINES = winning lines

Adjust these to change behavior and RTP characteristics.

4) Tune reel feel (motion)

Primary controls:

• BASE_DURATION, STAGGER
• preview spin behavior in startHoldPreview()
• stop easing (EASE_OUT)
• row mask behavior on .reelWindow

5) Tune sound profile

LofiSlotSound controls all audio layers.

• Ambient bed/hum (volume slider controls this only)
• Reel spin bed (soft motion texture)
• Reel clicks (reelTick) and density/timing
• Reel stop bell + win shimmer

For a new skin, target a distinct sound identity:

• Calm/zen: lower transient clicks, warmer lowpass
• Arcade: brighter clicks, tighter stop bells
• Mystic: softer attacks, wider shimmer decay

Local iterative dev

Serve docs/ locally:

cd tinylama-slots/docs
python3 -m http.server 8090

Open: http://localhost:8090

Use hard refresh when changing images/audio behavior.

Deploy (GitHub Pages)

Repo is configured to publish from:

• Branch: main
• Folder: /docs

Push to main, wait for Pages build, then open:

https://<github-user>.github.io/<repo-name>/

Production checklist for new themed slot

• Replace all background assets
• Validate symbol readability at mobile sizes
• Confirm no reel bleed between rows
• Set default hum to subtle level
• Verify click density and loudness on phone speakers
• Run RTP sample and sanity-check payouts
• Update title/branding text
• Test in local server + GitHub Pages

Reuse blueprint (clone-and-skin)

When creating the next experience:

1. Duplicate this repo or branch from it
2. Swap assets + copy
3. Tune symbols/paytable/reels
4. Tune audio character
5. QA on mobile viewport
6. Push and publish

This gives you a repeatable pipeline to pump out themed slot variants quickly without rebuilding core mechanics each time.