Add showpieces, effect levels, audio reactivity, the Lattice skin, and Synesthesia / Phantom visual passes to the built-in skins

[nulltask]

Summary

Follow-up to #221 (merged): showpiece moments for every built-in skin, an effects level, a cosmic particle-world rework of Synesthesia, a third built-in skin (Lattice), a Phantom cut-in pass, and a text alignment fix.

Shared (all built-in skins)

• Moments: count-in, a cut-in every 100 combo, the gauge crossing the clear line, a full combo, and a combo break. These come from pure state transitions in scene/default/moments.ts.
• Punch and input reaction: judgements and the combo punch in on every hit. Lanes and backgrounds react to each key press through new runtime fields (judgeAtMs, impulseAtMs, impulseKind).
• Misses: a miss shakes the HUD (each skin has its own look).
• Launch outro: select plays a short outro before gameplay (BeMusicSelectRenderer.outroMs, plus launchAt in the frame). Input is ignored while it plays.
• beMusicEffects option ('full' / 'reduced' / 'off'): on the default gameplay, select, and result views, it tones down or disables shake, flashes, particles, and ambient motion. The demo's Debug Menu gains a Skin effects picker.
• BGA: moments make room for a live BGA.
• Minimum text size: HUD labels are at least 9 px.
• Text alignment fix: Pixi sizes a line box from the ink of |ÉqÅM, so top-heavy faces (Anton ≈ 0.12 em, Michroma ≈ 0.10 em) rendered below their anchor. text-metrics.ts measures each face's cap-centre offset once and cancels it through the text pivot. The pivot keeps the correction through per-letter repositioning, rotation, and scaling.

Audio-reactive skins

• Analysis (runtime/audio-analysis.ts): gameplay taps the audio bus output, and select taps the BGM and chart preview (not the one-shot system cues). Each frame produces a BeMusicAudioFrame with:
  • loudness (0..1 and dBFS) and peak
  • bass / mid / high energy
  • a 16-band log spectrum
  • an onset envelope from spectral-flux transient detection
• Where skins get it: renderChrome (runtime.audio), renderLanes / renderBombs (audio), and the select renderer's tick (fourth argument).
• Effects level: audioDrive scales the frame by the effects level (off = silent, reduced = half).
• Phantom: halftone and bursts pump on the bass; slanted spectrum strips under the monitor and along the select list.
• Synesthesia: dust, haze, floor, rivers, and fish schools follow loudness, bass, mids, and onsets. The orb reacts too: each latitude swells and grows fibres with its band, the shell breathes on the bass, and onsets burst it.
• Lattice: on the select page, the needles stand up into an equalizer. Onsets ripple through the field and strike the pendulums. The idle monitor becomes a tile equalizer, and the tally shows a live spectrum and a dB readout.

Phantom

• Torn-paper cut-ins: READY? / GO!!, 100 COMBO!!, and FULL COMBO now rip in on torn strips: a red splash behind a ripped white rim around an ink band, with speed lines. The text is ransom-note lettering: each letter gets its own face, card, and tilt.
• Launch outro: a split screen on a torn diagonal seam, with a red bokeh half and a black-and-white starburst half.
• Result: the entrance wipe tears along a ripped edge.
• Judgements: held back while the full combo covers the page.

Synesthesia (reworked as a cosmic particle world)

• World: black void and an ember horizon; fine ember / gold particles with electric-blue and magenta accents.
• Backdrop: a point-lattice floor, particle rivers, and point-cloud pyramids.
• Audio orb: in the manner of classic music visualizers, it roams the space close to the camera.
  • The orb is a hollow shell of violet / blue / pink sparks, brightest at its silhouette and bristling with fibres.
  • A black moon revolves round it and reflects its light.
• Hits and panels: voxel sparks and lock-on reticles on hits; hairline frames with lock-on corners.
• Schools of fish: three schools of 3D boids (ember / blue / magenta) that tighten on the beat and scatter on key presses.
• Roaming camera: seeded random shots with flies, occasional hard cuts, and a handheld drift. The idle BGA monitor orbits the figure.

Lattice (new, latticeSkin)

• Look: a typographic paper skin in the manner of precise interaction design: graph-paper rules, ink with one cobalt accent.
• Needle field: fine needles that turn like iron filings to the beat, to key presses, toward a milestone, and into a swirl on a full combo.
• Text scramble: used throughout.
• Motion: odometer combo; judgements set letter by letter on a spring.
• Physics: Verlet bead-chain pendulums struck by key presses; select rows, level squares, and the rank drop and bounce.
• Details: live millisecond / beat readouts and tile-flip transitions.
• Fonts: uses Inter, Azeret Mono, and M PLUS 1p (the demo now loads Inter). The text helpers accept the 200 weight.

Notes for reviewers

• Batched drawing: dense Synesthesia backdrop shapes go through ShapeBatch, which quantizes colour and alpha so thousands of dots and lines become a handful of fill / stroke calls. It is used only for additive light, where overlap order does not matter.
• New public export: latticeSkin, in BUILT_IN_BE_MUSIC_SKINS. Everything else added is internal to scene/default.
• Pure helpers with tests: moments, needle field and scramble, Verlet chain and bounce, boids, camera, point clouds, torn edges, ransom layout, and cap-centre offset.
• Stateful effects: boids and pendulums are stepped per frame and keyed per chrome layer / renderer. Everything else is deterministic for (seed, time).
• Not verified: the LR2 theme path (no theme available), manual play (autoplay only, so miss visuals were only seen once), reduced / off visuals, and low-end device performance.

Testing

• vp check: 0 errors (22 existing warnings, unchanged)
• vp test run: 2124 tests pass
• vp pack for @be-music/player-web builds
• Checked visually in the demo with autoplay (SP, DP, no-BGA, BGA, and a generated full-band test track for the audio reactions): all three skins across gameplay, select, and result, plus count-in, milestone, full combo, and launch outros. Measured 60 fps on this Mac at DPR 2, including Synesthesia at combo tier 4 and Lattice gameplay.

[cloudflare-workers-and-pages]

Deploying with    Cloudflare Workers

The latest updates on your project. Learn more about integrating Git with Workers.

Status	Name	Latest Commit	Updated (UTC)
⚠️ Deployment skipped View logs	be-music-player-demo	82063b1	Sep 29 2026, 07:56 AM

[github-actions]

Exports Benchmark

• Base SHA: 8739a6485ec3
• Head SHA: 233a8497597b
• Comparable cases: 82
• Regression threshold: 8.00%
• Overall verdict uses the median change across cases.
• Per-case lists compare median ops/s, not mean.
• Base runs: median of 3
• Head runs: median of 3

Summary

Metric	Value
Overall	unchanged
Median change	-0.37%
Mean change	-0.67%
Cases improved (>= threshold)	1
Cases regressed (<= -threshold)	1
Cases unchanged	80
Cases excluded (sub-timer-resolution)	164
Head benchmarked cases	246
Head skipped cases	21

Top Regressions

API	Base median ops/s	Head median ops/s	Change
player-web.buildAudioBus	683060.11	482625.48	-29.34%

Top Improvements

API	Base median ops/s	Head median ops/s	Change
audio-renderer.writeAudioFile	4363.29	4736.06	+8.54%

Excluded (sub-timer-resolution)

Per-call latency at or below 0.001ms on at least one side — the reported time is measurement noise, not the case's real cost, so no percent change is shown.

API	Base median ops/s	Head median ops/s
audio-renderer.createTimingBuildContext	1953124.99	1923076.92
chart.compareEvents	10416666.69	10416666.69
chart.createBeatResolver	20833332.60	20833332.60
chart.eventToBeat	13888889.10	13888889.10
chart.exWavVolumeCentibelsToLinearGain	15625000.04	15625000.04
chart.getMeasureBeats	20833332.60	20833332.60
chart.isBmsBgmVolumeChangeChannel	17857142.61	17857142.61
chart.isBmsDynamicVolumeChangeChannel	17857142.61	15625000.04
chart.isBmsKeyVolumeChangeChannel	17857142.61	17857142.61
chart.isBmsLongNoteChannel	20833332.60	20833332.60
chart.isLandmineChannel	20833332.60	20833332.60
chart.isPlayableChannel	20833332.60	20833332.60