Skip to content

Add sound effects and an anime.js + PolyCSS board assemble/clear#1

Merged
alowpoly merged 5 commits into
layoutit:mainfrom
apresmoi:sounds-and-intro-animation
Jul 5, 2026
Merged

Add sound effects and an anime.js + PolyCSS board assemble/clear#1
alowpoly merged 5 commits into
layoutit:mainfrom
apresmoi:sounds-and-intro-animation

Conversation

@apresmoi

@apresmoi apresmoi commented Jul 5, 2026

Copy link
Copy Markdown
Contributor

Summary

Adds a sound layer and animated board transitions to VoxJong, built by combining anime.js with PolyCSS. Rebased on the latest main (includes the recent theme/rotation/centering fixes).

Animation — anime.js + PolyCSS (app.vue)

PolyCSS renders each tile as its own DOM element; anime.js drives their transforms:

  • Start-of-game "assemble" — tiles rain in from off-screen with a gravity fall + settle bounce (anime.js inQuad + a keyframe bounce). A support-graph schedule ensures a tile only lands after the tiles beneath it have settled ≥250ms, so nothing lands on a moving surface; same-layer tiles rain at varied speeds.
  • New Game "clear-out" — the current board sweeps off the bottom via a staggered anime.js animation, timed to the clear sound, then the new board rains in.
  • Screen-space transform calibration so tiles fall straight down at any camera angle; the board is hidden until the first drop-in so an un-textured board never flashes; the clock starts only after the last tile lands.
  • Cancellation/teardown via utils.remove; the support-graph scheduling is custom, anime.js runs the tweens.

Rendering (voxels.ts)

  • Each tile's full-span side wall is emitted as a hidden face, so buried tiles fall as complete boxes during the intro while the at-rest exposed-face optimization is preserved.

Sound (useSound.ts)

Small Web Audio player (preloaded/decoded buffers, randomized variants):

  • select/deselect, combine a pair, landing ticks during the intro, clear sweep, hint (glass ping), win (gem collect).
  • Muted by default; a speaker toggle persists to localStorage. Audio only unlocks on a real gesture, never claims the audio session while muted (iOS-friendly), and the context is disposed on unmount.

Dev

  • A dev-only Solve button (hidden in production) fast-forwards the guaranteed-solvable removal order to the final pair, for testing the win state.

Notes

  • Adds one dependency: animejs@4 (~13 KB gzip).
  • Respects prefers-reduced-motion; build + tests pass; assemble/clear/win/New Game flows verified.

@alowpoly
alowpoly merged commit e926ae6 into layoutit:main Jul 5, 2026
1 check passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants