Playful web apps with sound and motion

Description

Visual references, audio controls, a motion study, and engineering guidance for building playful web and mobile apps. Includes external links to Tone.js, piano samples, and Lucide icons. Example outputs Glass Groove · 玻璃律动 (Chinese) — GPT-6.1 Sol (xhigh) https://neonbin.com/examples/glass-groove/ Prism Loop (English) — Opus 5.5 (high) https://neonbin.com/examples/prism-loop/ Example prompt: Build a polished browser music playground for desktop and mobile, using Neonbin bin 6487b0c0-7a49-4ee7-973d-567ba89e000f. - Combine an editable piano melody with kick, snare/clap, hi-hat, and bass tracks in a two-bar sequencer. Include tempo, swing, instrument selection, and individual track mute and volume controls. - Start with three deliberately composed presets with distinct moods. Give each a coherent melody, complementary bass, and a balanced drum groove. Make the first preset immediately enjoyable. - Adapt Candy Glass’s translucent artwork into a prominent visualizer. Include Elastic, Orbit, and Bloom modes from the motion reference, with distinct movement responding to playback. - Use the UI references for a clear layout and polished controls. Support touch and keyboard interaction, reduced motion, and saving and reopening loops locally. ------------------------------------- 界面参考、音频控件、动态研究和工程指南，帮助你制作带有声音和动画的网页与移动端应用。附有 Tone.js、钢琴采样和 Lucide 图标的外部链接。 作品示例 Glass Groove · 玻璃律动（中文）— GPT-6.1 Sol（xhigh） https://neonbin.com/examples/glass-groove/ Prism Loop（英文）— Opus 5.5（high） https://neonbin.com/examples/prism-loop/ 提示词示例： 使用 Neonbin 箱子 6487b0c0-7a49-4ee7-973d-567ba89e000f，制作一个适配桌面和手机的浏览器音乐创作台。 - 在两小节音序器中组合可编辑的钢琴旋律、底鼓、军鼓／拍手、踩镲和贝斯，提供速度、摇摆、音色选择及各音轨的静音和音量控制。 - 编排三组情绪不同的预设，每组都有连贯的旋律、相互配合的贝斯与平衡的鼓点。默认预设应当一播放就好听。 - 改编 Candy Glass 的透明玻璃艺术，作为主要可视化。实现动态参考中的 Elastic、Orbit 和 Bloom 模式，让不同的运动随播放变化。 - 借鉴界面参考，保持布局清晰、控件易用。支持触屏、键盘、减少动态，以及乐段的本地保存和重新打开。

Guidance