• Export as WebP for best compression. PNG also fine.
• Place files at: /public/card-art/h001.webp etc.
• In CardArt.jsx, replace the emoji block with: <img src={`/card-art/${card.id}.webp`} className="absolute inset-0 w-full h-full object-cover" />
Midjourney v6 — Best quality. Use --ar 8:7 --style raw
DALL·E 3 — Good for specific biblical imagery, very prompt-faithful
Adobe Firefly — Commercially safe license, batch generation
Stable Diffusion XL — Free, use ControlNet for consistent character style
Style brief to include in ALL prompts:
"dark fantasy trading card art, biblical cosmic gothic style, deep jewel-tone colors, dramatic rim lighting, painterly detail, no text, no borders, portrait orientation 8:7"
Art prompt: A chubby golden cherub angel with tiny flaming wings hovers in radiant clouds, divine light from above, dark amber and gold palette, biblical art style
Art prompt: An armored warrior kneeling in prayer on a hilltop at dusk, golden aura around hands clasped, dramatic backlighting, holy glow, ancient biblical setting
Art prompt: A swift angelic messenger in white linen robes with a small scroll, dove perched on shoulder, blue sky and clouds, rays of light breaking through
Art prompt: A stoic stone-faced temple guard in golden armor standing before ornate temple doors, torch-lit, stern expression, deep shadows
Art prompt: A gentle shepherd in white robes holding a glowing crook, small lambs at his feet, green pasture, ethereal light from above, emerald and gold tones
Art prompt: A seraphim angel wielding a blazing sword of purifying orange flame, six wings spread wide, stormy sky, intense orange and gold palette
Art prompt: An ancient prophet standing on a mountaintop with arms raised, voice manifesting as visible golden sound waves, open scroll unfurling, dark storm behind him
Art prompt: A medieval knight in ornate blue and gold armor bearing a covenant shield with holy runes, kneeling before a glowing altar, dramatic side lighting
Art prompt: An elderly scholar with glowing eyes writing in a massive tome, quill dipped in liquid light, stacked scrolls, warm candlelight, teal and amber tones
Art prompt: A towering seraphim captain with six burning wings, sword raised, celestial army in background, commanding fiery expression, orange and gold cinematic lighting
Art prompt: A noble ancient king in purple and gold robes, crown of stars, holding a scepter of light, Jerusalem throne room, regal authoritative pose
Art prompt: A massive supernatural pillar of divine fire rising from desert ground into dark night sky, glowing embers, awed silhouettes in foreground, orange and deep red
Art prompt: A massive armored archangel descending from storm clouds, flaming sword in each hand, divine lightning strikes, golden wings, extreme dramatic lighting, epic battle scale
Art prompt: The prophet Elijah reborn in robes of fire, arms raised calling down fire and rain from a stormy sky simultaneously, intense orange and blue clash, prophet silhouette glowing
Art prompt: Archangel Michael in supreme golden divine armor, cosmic wings spanning universe, holding the sword of God, stars and galaxies behind him, awe-inspiring scale, legendary presence
Current System (CSS + Framer Motion)
SVG/emoji art with CSS gradient backgrounds. Board effects use pure Framer Motion (flood wave, fire columns, lightning bolt, earthquake cracks). Good for performance, no external dependencies.
Level 2 — Particle Systems (Recommended Next Step)
Install @tsparticles/react (~60KB). Each board effect gets real particle emitters: rain drops with physics, fire with turbulence, spark bursts with velocity. Flood = water particles falling + rising wave. Fire from Heaven = upward fire particle columns from sky.
Level 3 — WebGL / Three.js (Full Cinematic)
Three.js is already installed. Create a transparent WebGL canvas overlay on the battle board. Flood = animated water mesh shader (sine wave displacement). Fire = volumetric particle system with GPU simulation. Lightning = procedural bolt mesh. This is the same technique used in Hearthstone and Legends of Runeterra.
Level 4 — Video Sprite Sheets (Highest Quality)
Pre-render effects in Blender/After Effects as WebM videos with alpha channel. Play them as <video> overlays. A 2-second flood.webm at 30fps 480p is only ~200KB. This is how most premium mobile card games do it.