Acid Sci-Fi Graphic Realism

About this style

Graphic realism sets a convincingly rendered hard-surface object inside the flat, loud language of print design: big fields of fluorescent ink, condensed numerals, part numbers, barcodes and hazard chevrons on a strict grid. It draws on the industrial labeling of aerospace and motorsport hardware, on 1990s techno and rave graphics and on science-fiction concept art. The look of Bungie's Marathon (2026), an extraction shooter that revives the studio's 1994 series, brought acid lime and magenta on bone white to wide attention. Game studios, streetwear labels and tech brands use it for posters, trailers and launch graphics.

Make a 10-second sci-fi briefing in a graphic-realism style: a hard-surface biomech runner shell turns under a scanning pass while loud graphic layers slam, slide and lock onto a strict grid, ending on a faction sigil and a contract card.

<inputs>
If I don't give you something, use the default and don't ask.
- Issuer: Quarrin Combine (fictional), a salvage contractor.
- Kicker: "BRIEFING 0413 // EXTRACTION RUN"
- Shell: LONGSTRIDE, model LR-07, a light recon frame.
- Numeral: 07
- Spec rows: Mass 61.4 kg · Sprint 11.2 m/s · Sensor range 340 m · Frame ceramic over Ti lattice · Endurance 06:40:00
- Callouts, part number and part: VX-114 Visor array · CL-22 Cervical cable loom · P-3A Pauldron stack · SC-01 Section cut
- Contract card: Contract 0413-K · Site Glasswake Basin, Sector 6 · Objective Recover core sample, extract · Window 00:41:00 · Payout 18,400 CR · Risk Class 3 · Status PENDING, then ACCEPTED
- Length: 10 seconds.
</inputs>

<direction>
- Look: graphic realism. One convincingly rendered hard-surface object, lit like a studio product shot, set inside flat, loud print design: huge fields of fluorescent ink, a monumental condensed numeral, technical callouts and part numbers, barcodes, hazard chevrons and registration marks, all locked to a strict grid. The page is printed matter (flat inks, hard edges, halftone and scanline texture); only the shell has depth.
- Palette, five inks on bone: page #E7E3D7 with a faint seeded paper tooth (#DAD5C6 specks at 4%); ink #111216; acid lime #C8FF1A; fluorescent magenta #FF2BD1; signal orange #FF5B1F. The shell: ceramic plates #F2EFE6, undersuit graphite #2A2C31, cable sleeves in signal orange, visor black glass #0B0C0E. Overprints are real: the magenta halftone and the chevron strip print with mix-blend-mode: multiply, so magenta over lime makes a hot red #C82B15 and ink stays ink. In the flat graphics, lime and orange never touch: an ink rule or a bone gap always separates them.
- Grid: 120px margins, 12 columns of 140px with no gutters (lines at x = 120 + 140k), 8 rows of 105px from y 120 to 960, and a 15px baseline subgrid for type. The column lines stay visible as 1px ink hairlines at 12%. Every block aligns to the grid: its edges on column or row lines, or centered in a column.
- Final layout:
  - left column (x 120–820): the kicker at y 150; the title LONGSTRIDE fitted to the 700px column (about 140px) on baseline 300; the subtitle "Runner shell LR-07 · light recon frame" beneath it; five spec rows from y 420 at 36px pitch with 1px ink rules between them; the contract card at x 120–820, y 645–960;
  - a vertical hazard strip at x 870–910 (centered in column 6), y 120–960: ink and signal-orange 45° chevrons 40px apart, multiplied;
  - the lime field at x 960–1800, y 120–960, flat. Its first two columns (x 960–1240) are an annotation column: a magenta halftone block at y 120–435 (dots on a 14px grid at 45°, radius falling from 6px at the top-left to 0 at the bottom-right, multiplied) carrying the faction sigil, and the four callout labels below it at y 455, 565, 675 and 785. A vertical barcode (ink, Code 128 style, 40 × 220) stands at x 1710–1750 (centered in column 12), y 140–360;
  - the numeral 07 in ink, Saira Extra Condensed 900, cap height 560px, baseline at y 900, starting at x 1250 and cropped by the lime field's right edge so the 7 runs off the field: monumental, and behind the shell;
  - the shell, a head-and-shoulders bust 680px tall with its axis at x 1500, its base on the lime field's bottom edge at y 960, in front of the numeral.
- The shell (1 unit = 10 cm), an original biomech design built from primitives, each part modeled as the piece it is:
  - cranium: an egg-profile LatheGeometry shell 1.9 wide, 2.4 tall and 2.2 deep, split into a crown plate and two side plates with 0.012 seams that show the graphite beneath, and a back plate with five horizontal vent slats;
  - face, with no human features: a recessed visor band 1.5 wide and 0.3 tall across the front holding curved black glass (MeshPhysicalMaterial, roughness 0.04, clearcoat 1) with one thin, steady acid-lime sensor line along its lower edge; under it a faceted graphite jaw guard (ExtrudeGeometry from a six-sided profile, 0.02 bevel) with two orange stencil ticks;
  - ear pods: a stepped disc on each side (radius 0.34, three turned rings from LatheGeometry), the left one with a short antenna stub;
  - neck, exposed: a column of seven stacked vertebra rings (a cylinder with a metal torus lip) wrapped by twelve synthetic muscle cables (TubeGeometry, radius 0.035–0.06, on seeded curves from skull base to collar), orange sleeves alternating with graphite, each ending in a small lime ferrule;
  - torso to mid-chest: a chest plate extruded from a shield profile with a raised sternum ridge and six rib grooves; two clavicle struts (capsules); a pauldron stack on each shoulder of three overlapping curved plates (partial LatheGeometry shells, 0.04 thick) separated enough that each casts a shadow on the next; on the back, a spine of six segments and a pack of two cylinder canisters;
  - section cuts: the bust ends in clean planar cuts, one across the chest and one through each upper arm (angled outward so it faces the camera), every cut face flat signal orange with ink 45° hatching (a CanvasTexture), like a section on a technical drawing;
  - markings, as CanvasTexture decals: "LR-07" in Saira Extra Condensed on the left pauldron, a small barcode and a row of part numbers across the chest, a warning chevron and a lime dot on the cranium's side plate;
  - materials: plates MeshPhysicalMaterial #F2EFE6, roughness 0.38, clearcoat 0.35 (clearcoat roughness 0.2) with a faint generated orange-peel normal map; graphite undersuit roughness 0.8 with a fine knit normal map; cable sleeves roughness 0.6; fittings (vertebra lips, ferrule bases, antenna) metalness 1, roughness 0.3.
- Light, bright and graphic from the first frame: a key DirectionalLight #FFFFFF at 2.6 from the upper front left (elevation 50°) with soft shadows (PCFSoftShadowMap, 2048) so the plates shade one another; a HemisphereLight #FFFFFF / #BDB7A6 at 1.0; two rim lights from behind, magenta #FF2BD1 at 1.4 from the left and signal orange #FF5B1F at 1.2 from the right, so the silhouette carries a thin colored edge on each side; RoomEnvironment through PMREMGenerator at envMapIntensity 0.5 for clean highlights on the visor and fittings. ACESFilmic, exposure 1.15. Lit plates render near #EEEAE0, never grey; the graphite reads as dark grey, never black. The renderer is transparent (alpha: true, clear alpha 0) so the page, numeral and lime field show behind the shell.
- Camera: fov 24 at a heroic low angle (pitch −6°, looking slightly up), so the chest cut shows as a thin orange band and the arm cuts as orange ovals; a 3% push-in across the piece. The canvas covers the whole stage, so projecting 3D anchors to stage pixels is direct.
- Turn: yaw 0° faces the camera and positive yaw turns the face toward screen right. The shell turns from 160° (back three-quarter: pack and spine toward us) to −24° (front three-quarter, the visor turned toward its labels) over 0.8–8.4 s on easeOutCubic, fast at first and slowing to a stop: about 25° at 3.5 s and −18° at 6.0 s.
- The scan: a horizontal scan plane sweeps down the shell from crown to cut over 1.2–3.4 s (easeInOutSine). Above the plane the shell is fully rendered; below it, not yet scanned, every surface is flat unlit ink #111216 carrying 1.5px lime contour lines every 0.1 units of world height (computed in the fragment shader from world y with fwidth, so they stay crisp). At the plane, a 0.05-unit band is flat lime. Add it to every material with onBeforeCompile driven by one uniform. A 2px ink line marks the plane across the lime field (x 1240–1800) at its projected height, with "SCAN 0.00" in Martian Mono riding at its left end and counting to 1.00.
- Graphic motion, three verbs and nothing else:
  - slam: an element arrives at scale 1.12 with a magenta copy of itself 10px down-right behind it, lands at 1.0 in 0.09 s on cubic-bezier(0.2, 0.9, 0.1, 1), and the magenta copy snaps into register over the next 0.12 s; on landing, elements within 240px shift 3px along the slam and recover in 0.1 s. No flash and no change in brightness;
  - slide: blocks travel along a grid line by whole columns or rows (multiples of 140 or 105px) in 0.28 s on cubic-bezier(0.75, 0, 0.1, 1) and stop dead, with no overshoot;
  - lock: on arrival, four 14px ink corner ticks (2px) draw at the element's corners in 0.12 s.
  - Mono fields type on at 45 characters per second behind a 10px ink block cursor; settling numbers scramble through seeded digits at 12 changes per second for 0.35 s, then lock.
  - Secondary life, always quiet: scanlines over the lime field (1px ink lines every 4px at 5%) drift down 8px per second; the halftone dots swell ±8% on a 3 s sine; the visor's sensor line brightens 30% as the scan passes it.
- Callouts: each label is two lines, the part number in Martian Mono 600, 22px, and the part in Archivo 600 (wdth 75), 22px, uppercase, ink on lime. A 2px ink leader leaves the label's right edge at x 1200, runs level, then bends at 45° to end in a 7px ink ring on its part: the visor band, the neck cables, the left pauldron, the left arm's section cut. Leaders follow their anchors every frame as the shell turns, ordered top to bottom so they never cross; a label hides while its part faces away.
- Contract card: an ink #111216 card with a 36px 45° chamfer at its bottom-right corner and a 12px signal-orange tab on its left edge below the header; a 44px lime header strip reading "CONTRACT 0413-K" in Martian Mono 600, 22px, ink; six rows in Martian Mono 400, 22px, bone #E7E3D7, labels at 60% and values at full. The status value shows PENDING in an outlined bone box until the ACCEPTED stamp lands over it: Saira Extra Condensed 800, 56px, signal orange, inside a 4px orange box, rotated −6°.
- Faction sigil (original): a regular hexagon 200px across drawn with a 14px ink stroke, its upper-right edge left open; inside, a solid ink disc (radius 34) left of center and three ink bars (60 × 12px, 20px apart) to its right; one 14px ink slash from the lower-left vertex out past the hexagon. Beneath it, "QUARRIN COMBINE" in Martian Mono 500, 20px, tracked 0.08em, centered.
- Type: kicker in Martian Mono 500, 20px, tracked 0.14em, ink; title in Saira Extra Condensed 900, ink; subtitle in Archivo 500, 26px, ink; spec rows in Martian Mono 400, 22px, the label left and the value right-aligned at x 820.
- Premium: a real, well-lit hard-surface object with plates, seams and cables inside confident flat design: acid ink in big fields, type locked to the grid, annotation that names real parts and lands exactly on them. Cheap: a glowing blue HUD on black, neon gradients, random greebles, type floating off the grid.
Banned: glow or bloom, neon gradients, lens flares, dark or space backgrounds, blue holographic HUDs, radar sweeps, human faces or eyes, weapons, blood, real game, studio or company names and logos, layouts or emblems copied from any existing game, smooth gradients on the page, colors beyond the five inks and their overprint, anything flashing more than 3 times per second.
</direction>

<structure>
- 0.0–0.5s: the bone page: the column hairlines draw down from the top, 20 ms apart; registration marks (36px circles with crosshairs, 1.5px ink) slam in at (96, 96), (1824, 96), (96, 984) and (1824, 984); the kicker types on.
- 0.5–1.2s: the lime field slides in from the right edge by six columns and locks (0.8 s); the numeral 07 slams in (0.85 s); the title slams (1.0 s) and the subtitle types on; the shell fades up as an ink silhouette with lime contours at its back three-quarter, already turning.
- 1.2–3.4s: the scan sweeps from crown to cut, resolving the shell plate by plate as it swings toward the front; the spec rows type on in the left column, 0.12 s apart from 1.6 s; the hazard strip slides down four rows into place (2.8 s); the halftone block slams into the lime field's corner (3.2 s).
- 3.4–4.6s: the callouts attach 0.25 s apart from 3.5 s, each leader drawing in 0.2 s and its label typing on; the barcode slides up two rows (3.9 s).
- 4.6–5.6s: the contract card slides up three rows and locks (4.6–4.9 s); its header and rows type on; the status reads PENDING.
- 5.6–6.6s: settled, the shell slowing toward the front. The 6.0 s frame is a complete composition: the shell at a front three-quarter, every callout, the card and all layers in place.
- 6.6–7.6s: the sigil slams onto the halftone block (6.7 s) and its name types on; the payout scrambles and locks at 18,400 CR (6.9–7.25 s); the ACCEPTED stamp hits the status (7.35 s).
- 7.6–8.4s: a last verification pass: a thin lime line runs down the finished shell in 0.6 s, leaving it fully rendered, and the readout changes to "VERIFIED"; the shell comes to rest at −24°.
- 8.4–10.0s: hold; only the scanlines drift.
For other lengths, stretch the scan and the settle; keep each slam's own 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: three.js as an ES module pinned to three@0.160.0 through an import map on jsDelivr (`three` and `three/addons/`). WebGLRenderer with antialias, preserveDrawingBuffer: true and setPixelRatio(window.devicePixelRatio); render once at the end of every seek. Text is HTML over the canvas.
- The page, lime field and numeral are HTML/CSS under the transparent canvas; the annotation, card, sigil, strip and barcode are HTML/CSS and inline SVG over it. The yaw, scan height and every slam, slide and type-on are closed-form functions of t from their start times; leaders are re-projected from their 3D anchors each seek; decals and hatching are drawn into CanvasTextures once after the fonts load.
</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 the shell reads as a biomech head-and-shoulders bust (split cranium plates with seams, the visor band, ear pods, a cabled neck, layered pauldrons, orange section cuts) and its lit plates are near white, never grey; unscanned parts are ink with crisp lime contours; every leader ends on its part and none cross; every block sits on the grid; magenta over lime prints #C82B15; the numeral reads as 07 behind the shell; the 6.0 s frame and the final frame are both complete compositions; and nothing flashes on any slam. 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

Low-Poly Landscape Flyover

Made by us

A slow golden-hour glide down a faceted valley: flat-shaded ridges, a low sun, fog melting the far range into the horiz…

Keynote Product Reveal

Made by us

A device built in three.js rises out of total darkness while a softbox reflection glides along its titanium edge, then…

Isometric Miniature City

Made by us

A toy-like isometric city block that builds itself on a floating slab: bevelled buildings rise floor by floor, cars loo…

Extruded 3D Type

Made by us

Chunky two-tone 3D letters swing into place one by one on a seamless studio sweep, lit like a product shot with soft sh…