English | 中文
HoloCard splits a photo into layers automatically and renders it as an interactive holographic card: the server estimates depth, separates the image into foreground, middle and background layers, assigns each layer its own foil, and the card turns with the pointer or device tilt. Live site: https://holocard.longsizhuo.com
The foil effects and interaction are ported from pokemon-cards-css (Simon Goellner, GPL-3.0). That project requires a hand-drawn foil mask for every card; HoloCard generates the masks with a layering algorithm, so any photo can become a card.
The full documentation is published at https://holocard.longsizhuo.com/docs/en/ ; the sources are in docs-site/.
| Topic | Link |
|---|---|
| Guide | /docs/en/ |
| API | /docs/en/api/ |
Player @holocard/player |
/docs/en/player/ |
File format .layers |
/docs/en/format/ |
| Local development and verification scripts | /docs/en/develop/ |
| Architecture, layering pipeline, renderer | /docs/en/develop/architecture |
| Self-hosting | /docs/en/deploy/ |
The operations runbook for the hosted site (servers, staging, releases) is in deploy/README.md (Chinese).
corepack enable && pnpm install
pnpm dev # front end: http://localhost:5273
pnpm dev:server # layering service: http://localhost:8791 (needs model weights; see Local development)
pnpm docs:dev # documentation siteGPL-3.0-only; see LICENSE.