Versus Screen

About this style

A versus screen is the short card a fighting game shows before a match: the two chosen fighters face each other across a split screen with their names and a giant VS between them. It became a fixture of arcade fighting games in the early 1990s and still opens matches in fighting games today. Its key art borrows heavy ink lines, hot rim light, speed lines and halftone from manga and comics. Game studios, esports broadcasts and sports promoters use the format to hype a matchup.

Make a 10-second fighting-game versus screen: two original fighters slam in from opposite sides of a diagonal split, name plates and stat bars lock in, a huge VS collides at the seam, then ROUND 1.

<inputs>
If I don't give you something, use the default and don't ask.
- Game: Ironbloom Circuit (fictional).
- Player 1: KITE, "The Paper Wind", a lean kickboxer. Stats out of 10: Power 5 · Speed 9 · Range 7 · Defense 4.
- Player 2: ANVIL, "The Iron Wall", a heavy brawler with a steel gauntlet. Stats out of 10: Power 9 · Speed 3 · Range 4 · Defense 9. Both total 25.
- Stage line: "STAGE 4 · MARROWGATE NIGHT MARKET"
- Round card: "ROUND 1", then "Best of three · 99 seconds"
- Length: 10 seconds.
</inputs>

<direction>
- Look: a versus screen painted like key art and moving like a game: two cel-shaded fighters with heavy ink lines and hot rim light, a hard diagonal split between two colored worlds, slab type, halftone and speed-line texture, sparks. Everything lands with weight and keeps a little life afterward (breathing, hair, cloth).
- Palette: P1's world oxblood #3A0A16 with halftone dots #7A1428 and speed lines #5A1020, accent persimmon #FF6A2B; P2's world midnight teal #062A31 with dots #0E5A61 and lines #0A4048, accent sea teal #22D3C2; shared gold #FFC23D (sparks, the VS outer rule), cream #FFF2D9 (type, highlights, the seam) and ink #12070B (linework). Colors trade across the seam: each fighter is rim-lit in the other side's accent, so KITE carries a teal edge and ANVIL a persimmon one.
- The split: a seam from (1060, −20) to (860, 1100), a 10px cream band between two 3px gold rules. Each world fills its side with a flat ground, a halftone dot field on a 22px grid whose dots grow toward the seam (2px to 9px), and speed lines radiating from a point behind its fighter's head, drifting outward at 40px/s.
- Fighters: three-quarter-length figures (head to mid-thigh, the frame cutting them off at the bottom) about 820px tall, drawn in Canvas 2D from a 2D skeleton of named joints. Each body part is a closed Bézier shape around its bone, drawn back to front; each material takes three cel tones (base; a shadow cut by a hard terminator line away from the key light at upper center; a hard highlight), an ink outline 5–9px that swells at joints and thins at tips, and a 6px rim of the opposing accent on the side facing the seam. Faces are graphic, not detailed: a jaw line, a nose wedge, eyes as narrowed angular ink shapes with one cream glint each, a strong brow, the mouth a single line.
  - KITE (left half, facing right, final head center (520, 330)): lean and tall in a bladed stance, fists high, the lead fist at about (760, 420) and the rear fist by the chin at (590, 440); a long braid from the back of the head as a chain of nine tapered segments; a short fringe; a cropped cream jacket with persimmon panels, rolled sleeves and a raised collar; hands wrapped in tape (visible bands and one loose end); a persimmon sash at the waist with two trailing tails.
  - ANVIL (right half, facing left, final head center (1440, 360)): broad and heavy, chin down, shoulders 360px wide; a shaved head with a short block beard and two scar ticks; a sleeveless padded vest in teal and charcoal with brass buckles; a huge steel gauntlet on the arm nearest the seam, its fist raised at about (1180, 560): layered forearm plates with rivets, knuckle plates and a teal core slot along the forearm (flat bright teal, no bloom); the other fist up in guard at (1580, 600); a chain belt.
- Secondary motion: the braid and the sash tails are spring chains, precomputed once at load at a fixed 1/240 s step from the body's motion (each segment follows its parent with stiffness and damping), so they whip through every entrance and sway after. Idles: KITE bounces on her toes (10px at 1.8 Hz, her lead fist bobbing 6px out of phase); ANVIL sways heavily (6px at 0.9 Hz, shoulders rolling 2°).
- Entrances:
  - KITE dashes in from x −700 in 0.22 s on cubic-bezier(0.1, 0.9, 0.2, 1), leaving three afterimages (flat persimmon silhouettes at 45%, 28% and 14%, 70px apart) that fade over 0.3 s, and lands with a 0.06 s squash (scaleY 0.97, scaleX 1.02);
  - ANVIL charges in from x +700 in 0.3 s on cubic-bezier(0.2, 0.8, 0.2, 1), heavier: on landing a dust burst rolls along the bottom edge on his side and the whole stage nudges 10px down once and recovers in 0.18 s.
- VS: a V and an S in Dela Gothic One 400 at 340px, cream with a 10px ink outline and a 6px gold outer rule, skewed −10°. The V slams in from the upper left and the S from the lower right; they collide at the seam's center (960, 540), overlapping by 30px. On impact a cream shock ring expands from 0 to 520px radius over 0.35 s, thinning and fading; 90 sparks (gold and cream streaks, 2–5px) spray along the seam on closed-form ballistic paths and fade; both fighters flinch 1.5° away and recover.
- Name plates: parallelograms skewed −12°, P1 at x 120–760 and P2 at x 1160–1800, y 800–940, ink at 85% with a 4px accent edge on top; the name in Barlow Condensed 800 italic, 96px, cream; the nickname in Barlow Condensed 600 italic, 30px, in the plate's accent; a "P1" or "P2" tag in Chakra Petch 700, 22px, in a small accent box.
- Stats: at the top, P1 at x 120–520 and P2 at x 1400–1800 (mirrored), four rows at 36px pitch from y 120: the label in Chakra Petch 600, 20px, cream; a bar of ten skewed segments (28 × 16px, 4px gaps), filled segments in the side's accent and the rest ink at 60%; the number in Chakra Petch 700, 22px. Each row fills its segments one at a time, 40 ms apart, the rows starting 0.2 s apart, P1 and P2 together.
- Game title: "IRONBLOOM CIRCUIT" in Chakra Petch 700, 22px, tracked 0.3em, cream, centered on the seam at y 96.
- Round card: an ink band at 75% across the full width at y 420–690, its two halves sliding in from both sides to meet at the center; ROUND 1 in Dela Gothic One 400, 180px, cream with ink and gold rules like the VS, centered at y 535; the subline in Chakra Petch 600, 28px, cream at 80%, centered on baseline 660; the stage line in Chakra Petch 600, 22px, tracked 0.2em, centered at y 1000.
- Background life: embers (persimmon on the left, teal on the right, 2–4px) rise and drift toward the seam; the halftone fields creep toward the seam at 12px/s.
- Premium: two fighters with clear, readable silhouettes and real weight, ink that swells and thins, rim light trading colors across the seam, hair and cloth that whip and settle, slams that land on the frame. Cheap: clip-art figures sliding in, flat untextured halves, a plain red-versus-blue split, a white flash on the VS.
Banned: real fighting games, characters, logos or their fonts, blood or injury, weapons, 3D rendering, photo textures, gradients on the fighters, detailed realistic faces, more than one screen nudge per entrance, white or full-screen flashes, anything flashing more than 3 times per second.
</direction>

<structure>
- 0.0–0.6s: the two worlds slide in from opposite edges and meet at the seam at 0.45 s; sparks run along it; the halftones and speed lines start moving.
- 0.6–1.5s: KITE dashes in from the left (0.7 s) with her afterimages and lands in her guard, braid and sash whipping; her plate slides in (1.0 s), the name slams and the nickname types on.
- 1.5–2.4s: ANVIL charges in from the right (1.6 s) and lands with the dust roll and the nudge; his plate slides in (1.9 s).
- 2.4–3.4s: the V and S slam in and collide at 2.6 s: shock ring, sparks, both fighters flinch; the game title types on at the top.
- 3.4–5.2s: the stat bars fill segment by segment from 3.5 s, row by row, the numbers counting up with them; embers rise.
- 5.2–6.6s: the face-off breathes: idles, braid sway, the gauntlet's core brightening 10% on a slow 2 s sine. The 6.0 s frame is complete: both fighters, the VS on the seam, both plates and full stats.
- 6.6–7.6s: both fighters lean in (scale 1.0 to 1.03); the VS shrinks to 40% and rises to (960, 210); the ink band slides in across the center.
- 7.6–8.6s: ROUND 1 slams onto the band (7.7 s) as a horizontal cream streak sweeps through it; the subline types on (8.0 s); the stage line rises in at the bottom (8.2 s).
- 8.6–10.0s: hold: the idles ease to stillness by 9.0 s; only the embers drift.
For other lengths, stretch the face-off beat; keep each slam's timing and at least 1 s of hold.
</structure>

<build>
- One self-contained index.html (inline CSS and JS), a 1920×1080 (16:9) stage scaled to fit the window, designed for 60fps. No image, video, texture or model files: every shape and texture is generated in code.
- window.seek(t), t in seconds, computes every visual from t alone: no CSS transitions or CSS animations, no setTimeout/setInterval, no state carried between frames, randomness only from a seeded PRNG. Anything cumulative is solved analytically from t or precomputed once at load at a fixed step. Past the end, seek clamps to the last frame.
- Without ?render in the URL, drive seek from requestAnimationFrame so it plays in a browser (loop after a 1s end hold); with ?render, don't start that loop.
- Google Fonts via <link> are fine; await document.fonts.load() for each face before defining window.seek.
- Engine: Canvas 2D, repainting every frame from scratch, the backing store sized from CSS size × devicePixelRatio. Canvas won't fetch fonts itself, so the awaited loads matter.
- Each fighter's joint positions are closed-form functions of t (entrance, landing squash, flinch, idle, lean); the spring chains are precomputed at load and read back by t; sparks, dust and embers are seeded closed-form paths. Cache each world's static texture once at load; redraw the fighters every frame.
</build>

<check>
Before showing me, step through one frame per second (t = 0…10): screenshot each and look at it. Fix overlaps, clipped or cramped text, and anything off-style or Banned. Check both fighters read at a glance as people in fighting stances (head, torso, arms, wrapped fists, the gauntlet), their ink swells and thins, each carries the other side's rim color, the braid and sash follow through and settle, the stat bars show exactly 5/9/7/4 and 9/3/4/9, the VS sits across the seam, ROUND 1 reads cleanly on its band, nothing important is within 60px of an edge, and no frame flashes. Confirm seek(10) and seek(11) match, so the final frame holds.
</check>

Ours, and free to use under CC0: copy it, change it, ship it. No credit needed.

Similar prompts

8-Bit Pixel Art Scene

Made by us

An 8-bit attract screen: a dusk forest scrolls in parallax layers as a tiny lantern-carrying hero walks, hops a log and…

Manga Action Panel

Made by us

A black-and-white manga page read right to left: rooftops, narrowed eyes, a silhouetted courier leaping through focus l…

Comic Book Page

Made by us

A five-panel comic page made the old way: blue pencil roughs, weighted black inks, flat process color with Ben-Day dots…

Rubber Hose Cartoon

Made by us

A black-and-white 1930s cartoon: Tippy, an original teakettle with rubber-hose limbs, white gloves and pie-cut eyes, da…