HRuiCcc/RuiC-card-skill

What it solves

It automates the creation of 3D holographic "trading cards" for the web. Instead of manually designing assets and coding shaders, users can generate a complete interactive card—featuring depth, holographic shimmer, and a 3D viewer—from a single text prompt or reference image.

How it works

The project operates as a "Codex Skill" pipeline that converts a prompt into a finished product through several steps:

1. Layered Generation: It creates four distinct image layers (subject, background, line art, and text) on a shared coordinate system.
2. 3D Scene Construction: It uses a portable version of Blender to arrange these layers in 3D space, creating a physical sense of depth (parallax) where the subject pushes forward and the background recedes.
3. Material Application: It applies holographic shaders (laser rainbow, gold foil, silver foil, or pearlescent) that react to the viewer's perspective.
4. Web Assembly: A Three.js viewer is packaged into a single-file HTML page, allowing users to rotate, flip, and adjust the card's depth and gloss in a browser.
5. Delivery: The system outputs a live web link, an editable .blend file, transparent PNG layers, and a configuration JSON.

Who it’s for

• Creatives and Game Devs: For quickly prototyping character cards or indie game assets.
• Pet Owners: For turning photos of pets into "legendary" holographic cards.
• Marketers: For creating interactive digital collectibles or promotional "Easter eggs" for product launches.
• 3D Hobbyists: For experimenting with holographic materials and parallax effects in Blender.

Highlights

• One-sentence generation: Full automation from prompt to interactive web page.
• True 3D Parallax: Uses depth-separated layers rather than a flat image to create a realistic 3D effect.
• Perspective-based Shimmer: Holographic effects shift based on the viewing angle, not just a timed loop.
• Zero-install Blender: Automatically downloads and verifies a portable Blender version to avoid polluting the system environment.
• Single-file Web Viewer: Packages Three.js and assets into one file to bypass ad-blockers and ensure compatibility.
• Automated Verification: Includes a headless browser script to verify interactions (flipping, sliding, scaling) and compare actual frames.