Scrolling particle-based website with live browser-composed music

Prompt

The author shared the full prompt.

Let your creativity and divergent thinking run free, and combine them with your best aesthetic, artistic and engineering skills: design and build a dynamic, animated HTML version of the landing page. No PPT-style paging through static pages, no pseudo-animation of a few moving elements.

Brilliant! Now port it to SvelteKit.

Some text is too small to read comfortably. Follow Tailwind's font-size scale, with text-xs (12px) as the minimum.

One WebGL particle field behind the whole page: up to ~15,000 particles morphing through 23 scroll-driven scenes.

Can you turn the particle Anda logo at the end of the page into a 3D giant panda?"

[photo attached] "It doesn't look quite right. Use this panda. The Anda logo actually comes from this panda crawling; the two legs in the logo are its forelegs."

→ A panda built from ellipsoids and capsules, lit particle by particle, walking toward you. Its head follows your cursor.

Let your creativity and divergent thinking run free: add fitting background music to the landing page. I especially love ENIGMA's 'A New Age of Music' style."

"Got it, no infringement. Just generate the music in code. It must have heavy bass instruments and real stereo depth."

→ An original piece, "Memoria Mutat Futurum", synthesized live with the Web Audio API. No audio files: 808 kick, sub bass, temple drums, a bamboo flute and bells placed in 3D.

Got it, no infringement. Just generate the music in code. It must have heavy bass instruments and real stereo depth."

→ An original piece, "Memoria Mutat Futurum", synthesized live with the Web Audio API. No audio files: 808 kick, sub bass, temple drums, a bamboo flute and bells placed in 3D.

Is there a female voice that fits better than Gregorian chant?"

"OK, build the version you suggested."

→ A wordless eastern chant in the Chinese yu mode, with slides and grace notes. The monks trade eight-bar turns with her.

OK, build the version you suggested."

→ A wordless eastern chant in the Chinese yu mode, with slides and grace notes.

How about striking a drum when the animation is clicked? Also, can the music start automatically for new visitors? Otherwise most people will miss this beautiful music."

"I think a bass drum on click sounds better."

→ Browsers block sound until you interact, so the music starts on your first click or tap, and that click strikes the first drum.

Record this new landing page as a music video. I'll post it on X so people can experience Anda AI through sight and sound."

→ Opus drove the live page on a virtual clock, captured it frame by frame at 1080p60, and rendered the soundtrack from the same event log, so every drum lands on its frame.

Commit to main and add your co-author signature.

Category

Product promos

Stack

Web Audio, WebGL

Made with

Claude Code, SvelteKit, Tailwind

On X

131 likes · 5.2K views · 21 saves