Racing Finish HUD

About this style

A racing game's heads-up display packs a driver's essentials around the view: speed and revs, gear, position, lap count, lap and sector times, the gap to the car ahead and a minimap of the circuit. Arcade racers of the 1990s set the template, and simulation games borrowed the sector colors of motorsport timing screens, where purple marks an overall best and green a personal best. Close finishes are settled by photo-finish cameras, which record a single thin slit at the line over time, so each car appears as a side view laid out by the moment it crossed. Game studios and broadcasters keep refining the look so it reads at a glance at 300 km/h.

Make a 10-second racing game finish seen through its HUD: the last corner and final straight from a chase camera, a speedometer needle and gears working, a minimap, position climbing from P3 to P1, lap splits coloring in, then a freeze-frame photo finish and a results card.

<inputs>
If I don't give you something, use the default and don't ask.
- Event: Saltmere Coast GP (fictional), final lap 12 of 12.
- Drivers (number, name, livery): #27 R. Ashby (you, cream with a teal stripe) · #11 K. Vance (coral) · #4 M. Oduya (lemon) · #8 T. Lindqvist · #19 S. Morell · #33 J. Paik. All fictional.
- Final lap sectors: S1 34.118 (overall best) · S2 37.402 (slower than your best of 37.390) · S3 33.382 (overall best) · lap 1:44.902, fastest of the race. Your previous best lap 1:45.310, so the live delta ends at −0.408.
- Results: 1 #27 Ashby 21:14.387 · 2 #11 Vance +0.012 · 3 #4 Oduya +1.204 · 4 #8 Lindqvist +3.877 · 5 #19 Morell +6.115 · 6 #33 Paik +9.640 · Fastest lap #27 1:44.902.
- Length: 10 seconds.
</inputs>

<direction>
- Look: a modern racing game at golden hour on a coastal circuit, the 3D view bright and fast, the HUD crisp and calm around its edges: translucent ink panels, cream type, one color per meaning. Speed comes from the world (curbs and posts streaming past, fov widening, slipstream streaks), never from blur.
- Palette, scene: sky pale blue #A9CDE8 at the top to peach #F7C9A0 at the horizon; low sun from behind left, light #FFD7AE; the sea beyond the straight #4F8FB5 with sun glints #FFE9C8; asphalt warm grey #55545A with a darker racing line #3E3D43 and fine aggregate; curbs tangerine #FF7A2E and white #F4F1EA in 3 m blocks; paved run-off #8C8A86, gravel #D9C9A8, grass #7FA65A; concrete walls #E9E4DA under blue-grey fences #5E7891; tire stacks teal #2F7F86; the finish gantry steel #C9CDD2 with a dark timing board; liveries: yours cream #F4EFE6 with a teal #1F8A8A stripe, #11 coral #FF5A4E with ink, #4 lemon #E8E14A with ink, the others slate blue #6F86A6.
- Palette, HUD: panels ink #121417 at 72% with 1px cream borders at 18% and 8px radii; text cream #F4EFE6, secondary #A9B1B8; meanings: coral #FF5A4E (needle, FINAL LAP), mint #4FE3B0 (gains, your position), amber #FFB547 (slower than your best), violet #A98BFF (overall best). Sector colors follow the timing convention: violet for an overall best, mint for a personal best, amber for slower.
- The track (1 unit = 1 m): a centerline spline for a fast approach, a 110° right-hander and a final straight to the line, its length matched to the integral of the speed curve below; a ribbon mesh 14 wide with the racing line, white edge lines, curbs as raised meshes, run-off, gravel and grass beyond; walls, fences and tire stacks; marshal posts and lamp posts every 40 m; along the straight a pit building, grandstand blocks whose crowds are a speckled CanvasTexture, and the sea beyond a low wall on the right; at the line a steel truss gantry with a timing board and a checkered band painted across the track.
- The cars (original, built like real prototype racers, 4.7 long): a body lofted from 24 cross-sections (rounded rectangles that widen at high front arches, pinch at a bubble cockpit and run into a long tail with a vertical fin), a dark glossy canopy (MeshPhysicalMaterial, roughness 0.05, clearcoat 1), a front splitter, a rear wing on two swan-neck pylons, a diffuser, a horizontal LED tail-light bar that brightens under braking, and four slick tires on five-spoke rims that turn at road speed. Car paint MeshPhysicalMaterial, clearcoat 1, roughness 0.3, with numbers and stripes from CanvasTextures. Each casts a long soft shadow.
- Motion, closed form: your speed falls from 288 to 176 km/h by 1.3 s (braking), holds 168–182 through the corner, then rises to 312 km/h by 6.2 s; gears 7, then 6, 5, 4 and 3 at 0.3, 0.5, 0.7 and 0.9 s (each downshift a quick rev blip on the tach), then up to 4, 5, 6 and 7 at 3.1, 3.9, 4.7 and 5.6 s (each upshift dips the revs and nudges the needle). #4 brakes later, runs wide over the outside curb mid-corner and loses speed; you pass it on the inside at 2.4 s. #11 leads down the straight 0.35 s ahead; you tuck into its slipstream, pull out to its left at 4.6 s and draw alongside; your nose crosses the line 0.012 s before its nose at 6.2 s. The other cars trail behind, mostly out of view.
- Camera: a chase camera 6.5 behind and 2.2 above your car, fov 62 widening to 70 at top speed; it lags your yaw by 0.15 s through the corner (sampled from the same path) so the car swings slightly across the frame, and it eases 1.2 to the left as you pull out. No shake. Slipstream: thin cream streaks (30%) flowing past the screen edges while you are within 15 m behind #11.
- HUD layout (HTML and inline SVG over the canvas):
  - top left (x 120–480, y 100–300): "POS" in Titillium Web 700, 20px, secondary, over the position in Titillium Web 900 italic, 120px ("3", then "2", then "1") with "/6" in 40px; changes roll vertically over 0.25 s and draw a mint underline; below, "LAP 12/12" in JetBrains Mono 600, 26px, and a coral "FINAL LAP" chip;
  - top right (x 1440–1800, y 100–360): the running lap time in JetBrains Mono 600, 48px (from 1:38.702 to 1:44.902); "BEST 1:45.310" in 22px secondary; three sector rows (S1 34.118 violet, S2 37.402 amber, S3 running from 27.182 to 33.382 and locking violet), each value on a colored 4px bar; the live delta to your best, mint, from −0.120 to −0.408;
  - a gap chip under the timing block: "GAP P2 +0.41", then "GAP P1 +0.35" counting down to "0.00" by 5.4 s, turning mint and holding there while you run side by side;
  - bottom left (x 120–460, y 700–980): a minimap of the whole original circuit as a 6px cream line on an ink panel, sector ticks, car dots in their livery colors with yours ringed in mint, all moving along it;
  - bottom right, centered at (1620, 860), radius 170: a 270° speed dial ticked every 20 km/h and numbered every 40 in JetBrains Mono 500, 20px, a coral needle on a damped spring (it overshoots 2% on fast changes and settles), the digital speed in Titillium Web 900, 72px, with "KM/H", a gear numeral in a box, an inner rev arc in segments shading mint to amber to coral, and seven shift lights across its top that fill steadily as revs rise (they never blink).
- The photo finish: at 6.2 s the 3D frame freezes and dims to 70%, a 1px cream line marks the finish line, and most of the HUD fades to 40%. A strip slides down from the top to x 120–1800, y 150–450, built the way a slit camera would record it at constant speed: each car's orthographic side view laid out by the moment its nose crossed, 10px per millisecond, both facing left, your car in front and lower, #11 behind and slightly higher; a time scale above in thousandths (JetBrains Mono 500, 20px) with a mint marker "#27 0.000" at your nose and a coral marker "#11 +0.012" at its nose, 120px apart; a cream ground with the checkered band as its baseline.
- Results card: x 420–1500, y 500–960, an ink panel at 88%: "RESULT · SALTMERE COAST GP" in Titillium Web 700, 26px, tracked 0.08em; six rows at 62px pitch with position, number, name (Titillium Web 600, 26px) and time or gap (JetBrains Mono 500, 24px, right-aligned); your row on a mint band at 18% with a mint edge; a violet "FASTEST LAP 1:44.902 · #27" badge.
- Light: DirectionalLight #FFD7AE at 2.6 from behind left at 18° elevation with soft shadows (PCFSoftShadowMap, 2048, a shadow camera that follows the cars); HemisphereLight #BFD9F0 / #7A6A58 at 0.9; RoomEnvironment through PMREMGenerator at envMapIntensity 0.7 for paint and canopies; ACESFilmic, exposure 1.1. Cars and track are bright and clear from the first frame.
- Premium: a believable car and circuit, a needle with weight, gears that blip, sector colors that mean something, numbers that add up, and a photo finish that is built the way the real camera works. Cheap: a flat road texture scrolling under a box, a dial with a needle that teleports, rainbow HUD colors, a white flash at the line.
- Banned: real racing series, teams, circuits, sponsors, car makers or logos, motion blur, camera shake, white or full-frame flashes, blinking shift lights, crashes, people, anything flashing more than 3 times per second.
</direction>

<structure>
- 0.0–1.4s: braking for the last corner behind #4 and #11: tail lights brighten, the needle swings down from 288, downshifts blip the revs, the minimap dots bunch at the corner; the HUD is already in place, POS 3, FINAL LAP.
- 1.4–3.0s: through the right-hander: #4 runs wide over the outside curb as you dive inside; side by side at 2.0 s, ahead at 2.4 s: POS rolls to 2 with its mint underline; the gap chip switches to P1 +0.35.
- 3.0–5.6s: the final straight: upshifts at 3.1, 3.9 and 4.7 s, the speed climbing past 280; the slipstream streaks; the gap counts down; you pull out at 4.6 s and draw alongside #11 as the gantry grows ahead and the sea glitters on the right.
- 5.6–6.2s: the last upshift at 5.6 s. The 6.0 s frame is complete: both cars side by side just short of the line under the gantry, every HUD element live and legible, the speed near 310.
- 6.2s: the noses cross: the frame freezes on that instant, S3 33.382 and the lap 1:44.902 lock in violet, the delta locks at −0.408.
- 6.3–7.2s: the photo-finish strip slides down (6.3–6.7 s); its time scale draws and the two markers type on; POS rolls to 1 (7.0 s).
- 7.2–8.4s: the results card rises 24px as it fades in (7.2 s), its rows staggered 60 ms, your row's mint band sweeping in last; the fastest-lap badge lands (8.0 s).
- 8.4–10.0s: hold on the frozen finish, the strip and the card.
For other lengths, lengthen the straight and the slipstream; keep the pass, the crossing, the photo finish 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.
- Your distance along the track is the closed-form integral of the speed curve; the rivals' distances and lateral offsets are closed-form too, set so the pass happens at 2.4 s and the noses cross 0.012 s apart at 6.2 s; every car's pose comes from the centerline spline at its distance. After 6.2 s the 3D scene is rendered at 6.2 s. The needle is a closed-form damped follow of the speed; gears, revs, timing, gaps and the minimap come from the same functions. The photo-finish strip is drawn into a canvas from two orthographic side renders made once at load; the HUD is HTML and SVG.
</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 cars read as prototype racers (arches, canopy, fin, rear wing, turning wheels) and the circuit as a real track with curbs, walls and a gantry, the needle and digital speed always agree, every gear change shows on the rev arc, the position reads 3, 2 and 1 at the right moments, the sectors are violet, amber and violet and the lap ends at 1:44.902 with the delta at −0.408, the gap counts down to zero before the line, nothing flashes at the freeze, the strip's markers sit 120px apart, the results read exactly as listed, the 6.0 s frame is a complete, sharp racing frame, and HUD text never sits within 60px of an edge. 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

Gradient Mesh Brand Film

Made by us

A slow, ribbon-like gradient mesh flows in a skewed band behind sharp headline type, while white payment, API and chart…

Liquid Glass Interface

Made by us

Glass panels with real refraction float over vivid, striped color: their rims bend what's behind them, two buttons fuse…

Dark UI Precision Glow

Made by us

A dark-mode work tool drawn in hairlines and quiet radial glows: issue rows populate, ⌘K opens a command menu, a comman…

Bento Grid Feature Reveal

Made by us

Rounded tiles spring into a bento grid on warm paper, each acting out one feature in a small animation, then the tiles…