LyriaBeats
Music, synchronized words, and reactive 3D graphics in three distinct environments: Spark, Chill, and Dream.
APAC Art Tech Hackathon · 24 January 2026
Experience
LyriaBeats explores music as something to watch and interact with. Spark uses a warm particle field, Chill moves through cosmic visuals, and Dream pairs abstract shapes with poetic phrases generated by Gemini.
User Flow
- Choose Spark, Chill, or Dream from the mode navigation.
- Listen as the visuals respond to the audio and lyrics appear in time.
- Tap or click to change patterns and visual seeds.
- Switch modes to explore another track and visual environment.
Architecture
React and TypeScript coordinate playback, mode selection, and lyric timing. Three.js through React Three Fiber renders the scenes, while a Gemini service generates phrases for Dream. Spark and Chill use prepared lyrics.
A simulation mode keeps the visuals moving when audio is unavailable. The prototype separates playback, graphics, and lyrics so a service or browser audio limitation does not stop the entire experience.
Audio Credits
Spark's track is from SoundHelix under GPL v3, Chill's music is by Lof Cosmos on Pixabay, and Dream's audio is from the MDN Learning Area.