gitwtfhub

wtf is chinese-phoenixcrown?

aigc17/chinese-phoenixcrown — explained in plain English

Analysis updated 2026-05-18

96TypeScriptAudience · designerComplexity · 2/5Setup · easy

TL;DR

An interactive art website showing seven Chinese phoenix crowns with swinging curtains of text you can brush with your mouse.

Mindmap

mindmap
  root((Phoenix Crown))
    What it does
      Text curtain physics
      Chime sound effects
      Seven crown designs
    Tech stack
      Next.js
      React
      Canvas 2D
      Web Audio API
    Use cases
      Interactive art demo
      Portfolio showcase
      Cultural visualization
    Audience
      Designers
      Creative coders
    Setup
      pnpm install
      pnpm dev
      Click to unlock audio

Code map

Detail Auto

An interactive map of this repo's files and how they connect — its source is parsed live in your browser. Click Visualize to build it.

filefunction / class

Why would anyone build with this?

REASON 1

Explore an interactive art piece showing Chinese phoenix crowns with swinging text curtains.

REASON 2

Study the canvas physics and Web Audio techniques used to animate the character strands.

REASON 3

Use it as a portfolio style reference for combining Canvas 2D visuals with synthesized sound.

REASON 4

Deploy the same v0 connected project to Vercel and customize the crown designs.

What's in the stack?

Next.jsReactTypeScriptTailwind CSS

How it stacks up

aigc17/chinese-phoenixcrownardupilot/node-mavlinkmetanode-trade/asterdex-trading-bot
Stars969696
LanguageTypeScriptTypeScriptTypeScript
Last pushed2025-08-26
MaintenanceQuiet
Setup difficultyeasymoderatemoderate
Complexity2/53/54/5
Audiencedesignerdeveloperdeveloper

Figures from each repo's GitHub metadata at analysis time.

How do you spin it up?

Difficulty · easy Time to first run · 5min

Click once anywhere on the page first to unlock browser audio before the chime effects will play.

No license information is given in the README, so reuse terms are unclear.

Wtf does this do

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.

Yoink these prompts

Prompt 1
Help me run this project locally with pnpm install and pnpm dev, and explain why I need to click once for audio.
Prompt 2
Explain how the Verlet chain physics simulation makes the text curtains swing realistically.
Prompt 3
Walk me through how the Web Audio API is used here to synthesize chime sounds without audio files.
Prompt 4
Show me how the View Transitions API is used to animate switching between the Scene and Gallery views.

Frequently asked questions

wtf is chinese-phoenixcrown?

An interactive art website showing seven Chinese phoenix crowns with swinging curtains of text you can brush with your mouse.

What language is chinese-phoenixcrown written in?

Mainly TypeScript. The stack also includes Next.js, React, TypeScript.

What license does chinese-phoenixcrown use?

No license information is given in the README, so reuse terms are unclear.

How hard is chinese-phoenixcrown to set up?

Setup difficulty is rated easy, with roughly 5min to a first successful run.

Who is chinese-phoenixcrown for?

Mainly designer.

View the repo → Decode another repo

This repo across BitVibe Labs

Don't trust strangers blindly. Verify against the repo.