aigc17/chinese-phoenixcrown — explained in plain English
Analysis updated 2026-05-18
Explore an interactive art piece showing Chinese phoenix crowns with swinging text curtains.
Study the canvas physics and Web Audio techniques used to animate the character strands.
Use it as a portfolio style reference for combining Canvas 2D visuals with synthesized sound.
Deploy the same v0 connected project to Vercel and customize the crown designs.
| aigc17/chinese-phoenixcrown | ardupilot/node-mavlink | metanode-trade/asterdex-trading-bot | |
|---|---|---|---|
| Stars | 96 | 96 | 96 |
| Language | TypeScript | TypeScript | TypeScript |
| Last pushed | — | 2025-08-26 | — |
| Maintenance | — | Quiet | — |
| Setup difficulty | easy | moderate | moderate |
| Complexity | 2/5 | 3/5 | 4/5 |
| Audience | designer | developer | developer |
Figures from each repo's GitHub metadata at analysis time.
Click once anywhere on the page first to unlock browser audio before the chime effects will play.
Chinese Phoenix Crown is an interactive digital art project that shows seven ornate Chinese phoenix crowns floating in a midnight blue scene, each one hung with a curtain of Chinese characters instead of real beads. When you move your mouse across the character curtain, the strands part and swing back like a real string of beads, and the site plays a light metallic chime sound as they settle. Each crown has its own curtain of text pulled from poetry and phrases that match its style. A wedding crown's curtain uses phrases about golden branches and grand dowries, a queen's crown uses phrases about ruling over all under heaven, and an opera crown uses terms from Chinese opera roles. The color of each curtain is also drawn from the real colors seen on that crown, such as kingfisher blue, gold filigree, or ruby red. The project has two main views. The Scene view shows one crown at a time in full detail, with side cards to switch between crowns using a smooth animated transition. The Gallery view lays out three crowns side by side, with the middle one shown larger, and clicking a side crown brings it to the center. Technically, the character curtains are simulated with a chain based physics model drawn on a canvas element, so each strand of text hangs and swings naturally along the outline of the crown image. The chime and cloth sounds are synthesized live using the Web Audio API rather than played from audio files, and their pitch and volume change depending on how fast you swipe. The project is built with Next.js and React, styled with Tailwind CSS, and deployed on Vercel, with performance tuning so thousands of characters can animate smoothly. To run it locally, you install dependencies with pnpm and start the dev server, then click once on the page to unlock audio in the browser before the chime sounds will play. The repository is connected to the v0 platform and deploys automatically whenever changes are merged.
An interactive art website showing seven Chinese phoenix crowns with swinging curtains of text you can brush with your mouse.
Mainly TypeScript. The stack also includes Next.js, React, TypeScript.
No license information is given in the README, so reuse terms are unclear.
Setup difficulty is rated easy, with roughly 5min to a first successful run.
Mainly designer.
This repo across BitVibe Labs
Verify against the repo before relying on details.