← all repositories
HRuiCcc/RuiC-card-skill

The holographic trading cards your childhood couldn't afford, printed by an agent

A host-agnostic Agent Skill that turns one sentence into a draggable, light-shifting 3D holographic card web page — plus an editable Blender project.

★503 stars JavaScript Creative · DesignCoding Assistants
RuiC-card-skill
Collecting fresh signals — velocity needs a few days of history.
collecting data…
star history

What it does

You give it a sentence (or a reference image) and a multimodal agent does the rest: it paints four layered images — subject, background, line art, and text — on one shared canvas coordinate system, builds a 3D card scene in Blender, and assembles a single-file Three.js viewer you can drag, flip, and fiddle with in the browser. The output isn’t just a web page: you also get the card.blend source project, the four transparent PNG layers, and a card-config.json for names, numbers, and rarity.

The interesting bit

The parallax is real geometry, not a flat texture trick — layers are pushed apart in space (subject forward, background back), and the holographic rainbow phase follows your viewing angle rather than just looping over time. Since glTF can’t carry Blender’s custom node graphs, the web side rebuilds the same shader from a shared UV formula, so what you see in Blender matches what you see in the browser.

Key highlights

  • Host-agnostic and model-agnostic: any agent that reads SKILL.md and runs a multimodal model (it must both generate and inspect images) can drive it
  • Ships with its own acceptance test — verify_web.mjs spins up a headless browser and checks drag, flip, sliders, four finishes, and a 390px narrow screen against actual rendered frames, not just slider values
  • Blender’s official portable build is downloaded, SHA-256-checked, and kept inside the project directory — no system pollution
  • Four card finishes: hot-stamped gold, silver foil, pearlescent, and original art
  • The viewer is a single self-contained file (three.js and icons inlined), immune to ad-blocker interference, with a CSS-3D fallback if hardware acceleration is off

Caveats

  • Requires Python 3.9+ — ensure_blender.py uses Path.is_relative_to and will simply error on 3.6/3.8
  • Text-only models can’t run it; the pipeline needs a model that can both draw and visually judge render frames
  • If the official Blender download is blocked on your network, you point RUIC_BLENDER_BASE at a mirror — but the hash is taken from that same source, so you have to trust the mirror yourself

Verdict

A delightful, unusually well-engineered toy: anyone making collectible cards, game assets, or event gimmicks with a multimodal agent should try it. If you were hoping for a plain 2D card generator, the Blender-and-shader machinery is more than you asked for — in a good way.

Frequently asked

What is HRuiCcc/RuiC-card-skill?
A host-agnostic Agent Skill that turns one sentence into a draggable, light-shifting 3D holographic card web page — plus an editable Blender project.
Is RuiC-card-skill open source?
Yes — HRuiCcc/RuiC-card-skill is an open-source project tracked on heatdrop.
What language is RuiC-card-skill written in?
HRuiCcc/RuiC-card-skill is primarily written in JavaScript.
How popular is RuiC-card-skill?
HRuiCcc/RuiC-card-skill has 503 stars on GitHub.
Where can I find RuiC-card-skill?
HRuiCcc/RuiC-card-skill is on GitHub at https://github.com/HRuiCcc/RuiC-card-skill.

heatdrop uses Google Analytics to see which pages get read — nothing else. Your call. How we handle data.