fanhuayishiy/ai-crew-pass
Media & DesignAn interactive 3D badge site where you can drag, flip, edit and download badge images for nine AI characters.
What it is
This is a small web project that gives nine AI assistant characters — DeepSeek, ChatGPT, GLM, Qwen, Gemini, Claude, Kimi, Grok and Doubao — a virtual employee badge. The badge hangs from a lanyard that you can drag, release to swing back, and click to flip between front and back. Each side can be downloaded as a transparent PNG, either individually or as a ZIP.
The project is built with Astro, React and Three.js, uses the React Bits Lanyard and ShinyText components, and ships in Chinese and English. An edit mode lets you replace the text on either face; edited artwork is rendered in the browser and used for both the live 3D view and the downloads. The card artwork is fan-made and unofficial, and the card lines are memes rather than descriptions of product capabilities.
Quick start
You need Node.js 22.12 or newer.
npm install --no-package-lock
npm run dev -- --host 127.0.0.1
npm run build
Open the local address printed by the dev server to use the badge page. For a hosted version, visit the online badge site or its English demo. To change characters, colors or copy, edit src/data/characters.ts and src/data/i18n.ts; after changing card faces, run the two export scripts listed in the README to regenerate downloads, then verify with the Playwright scripts if needed.
Constraints
- The page uses WebGL for the 3D lanyard; when WebGL is unavailable it falls back to a flippable static preview, and downloads still work with JavaScript disabled.
- Sound effects are enabled by default after the first interaction and can be muted from the top-right control; audio is hosted locally and there is no background music.
- The page-view counter is only loaded on
badge.fhysy.comand counts page views, not unique visitors. - Licensing is split per part: the project code is MIT with attribution to the original Hanging Pass author, the React Bits components carry MIT plus Commons Clause, fonts are under SIL OFL 1.1, and character art and downloaded images are non-commercial fan material rather than MIT. Check each notice before reuse or commercial use.
HotRepo's take
The repository was recorded on the TypeScript new-project list on 2026-11-09 with 111 stars and 6 forks, gaining 11 stars in a roughly one-hour window that day. That is a single short snapshot, so it supports only the fact of a modest early burst, not a trend. The project is more clearly a self-contained creative front-end experiment than a growth story: the interaction, edit-and-download pipeline, WebGL fallback and separated licensing are all described in enough detail to judge the scope before building or deploying it.
Written by AI from the project's README, updated . The project's own docs are the source of truth.