2 cases built from this template
Same prompt, different [VARIABLES]. Click one to preview it above.About this template
Dusk Track Racing Game is a browser race on a single page. The first screen is the circuit: a low-poly car on a banked ribbon, a low sun, long shadows, and a sky that runs from warm copper at the horizon to deep blue overhead. A side panel on desktop, or a bottom sheet on a phone, carries the club name and the start button. The car and the track stay in view.
The car is a closed wedge of boxes, cylinders, and a short cabin. It is built in code, not loaded from a model, and it is not a known road car. The loop measures 1000 meters and includes a banked sweeper, a hairpin, four checkpoint gates, and edge obstacles: hay bales, tire stacks, and cones. Drift fills a boost meter that spends as a short burst of speed. Three rivals hold fixed lines. A translucent ghost repeats the best lap saved in this browser. Place, lap, time, and speed sit in the HUD, and a circular minimap shows the ribbon and the field. Off the asphalt the car slows, then returns to the last gate instead of stalling. Three laps end on a podium.
The keyboard covers desktop play. Narrow screens add a steer pad and gas, brake, and drift buttons, placed clear of the minimap. Reduced motion keeps the race and removes camera roll, dust, and extra pulses. Optional sound stays off until switched on.
Developers and indie hackers can reskin the heat from one content file: club, ridge, circuit, car, driver, and the three rivals. Those values rewrite the start panel, the trackside sign, the podium, and the saved-lap key. The ribbon, gates, speeds, and HUD stay the same, so another invented club can run the same race. Times stay in the browser.
The template prompt
The live demo was built from exactly this text — nothing added. The other cases only change the values of the [VARIABLES].
# Dusk Track Racing Game Build this website exactly as described below. Replace the [VARIABLES] with your own values; keep everything else. ## Brief Build [BRAND], a single-page third-person race at [PLACE] on the closed circuit [TRACK]. The player drives the code-built [CAR] for 3 laps at golden hour, against three rivals named in [RIVALS], with checkpoint gates, a drift boost, a lap ghost saved in the browser, a minimap, and a podium. The live scene is the first screen. - Audience: Developers and indie hackers who want a finished, reskinnable Three.js arcade race that runs as static files and plays with a keyboard or on-screen touch controls. - Goal: Ship one complete heat: a start panel, a countdown, a full race, a pause state, and a podium. The player can beat the rivals, save a best lap, and race that lap as a ghost, on both 1440×900 and 390×844. - Tone: Warm, plain, and specific. US English. Club-heat language, no taunts, no military wording, and no real series, manufacturers, or drivers. ## Stack - Framework: Vite 6 + TypeScript 5 - Styling: Vanilla CSS - Libraries: three (MIT), @fontsource/big-shoulders-display (OFL-1.1), @fontsource/outfit (OFL-1.1), @fontsource/share-tech-mono (OFL-1.1) - Build: `npm run build` → static files in `dist/`. No backend, no server code, no external APIs. - Setup: - Scaffold Vite's vanilla TypeScript app. Scripts: dev=vite, build=tsc && vite build, preview=vite preview. Do not add React, a physics engine, a postprocessing stack, or a game framework. - In vite.config.ts set base to './', build.outDir to dist, build.emptyOutDir to true, and build.sourcemap to false. Enable strict TypeScript. - Install three and the three Fontsource packages above. Import Big Shoulders Display 500, 700, and 800, Outfit 400, 500, and 600, and Share Tech Mono 400 only. - Use index.html plus src/content.ts, main.ts, track.ts, cars.ts, drive.ts, race.ts, hud.ts, input.ts, audio.ts, and styles.css, plus public/favicon.svg and ASSETS.md. - Put every name, button label, and sentence in src/content.ts. Read [BRAND], [PLACE], [TRACK], [CAR], [DRIVER], and [RIVALS] from that file. Split [RIVALS] on commas into exactly three trimmed names. - Keep laps at 3, player number 14, rival colors #2f6f62, #d7a441, and #3d4c7a, and rival numbers 7, 22, and 3 for every variable set. A new place changes copy, not the biome, the clock time, the mesh, or the palette. - Gate labels other than the start line stay North Gate, Sweeper, and Hairpin. The start line label is [TRACK] plus the word line. - Derive the localStorage key and the tree seed from the lowercased brand and track, with spaces turned into hyphens. Never hard-code the default names outside content.ts. - Wait for document.fonts.ready before drawing canvas number plates or the hut sign. Set those textures to SRGBColorSpace. Set document.title from content.ts to [BRAND] — [TRACK], and match the static title in index.html to the default. ## Variables - [BRAND] — Racing club (default: "Pennyglass"). Invented club name. Start-screen title, hut sign, and half of the save key. - [PLACE] — Ridge name (default: "Wickpenny"). Invented place. Eyebrow on the start panel and the practice-heat line. - [TRACK] — Circuit name (default: "Barleycut"). Invented circuit. Subtitle, start-line callout, podium, and the other half of the save key. - [CAR] — Car name (default: "Skiff 4"). Invented closed-wheel car. Shown next to the circuit name. The mesh does not change. - [DRIVER] — Player name (default: "Nell Harp"). Invented driver. Podium sentence and the player's result row. - [RIVALS] — Three rivals (default: "Nia Pell, Omar Voss, Bess Calder"). Three invented names, comma-separated, in teal, gold, and dusk-blue order. - [CREDIT] — keep a small "Template by VibeFather" link to https://vibefather.ai/t/dusk-track-racing-game in the footer (default: yes; delete this line to remove it) The copy under Pages & Sections is written for the default values. If your values differ, rewrite every headline, paragraph, label and image for them — same length, tone and structure. Layout, colors, type and motion stay as described. Keep all copy, image paths and links in one content file (for example `src/content.ts`), keyed by section, so the content can be swapped later without touching components. ## Design ### Colors - Ink `#1c1612` — Panels, minimap fill, car roof, tire rubber, start-stripe dark squares - Paper `#f6f1e7` — Text on ink, edge lines, start-stripe light squares, focus rings - Coral `#c4512c` — Player body, primary buttons, player minimap triangle - Gold `#e7c27a` — Center dashes, boost fill, minimap ribbon, drift button - Sun `#ffb067` — Directional light, gate veil, ghost emissive, boost glow - Horizon `#e7a15a` — Sky horizon band and fog tint - Zenith `#1e3a5f` — Sky top and the page background behind the canvas - Asphalt `#3a342e` — Racing surface - Runoff `#6b5344` — Dirt shoulders - Grass `#6d7a45` — Ground plane beyond the runoff - Pine `#3e5340` — Tree cones - Teal `#2f6f62` — First rival - Rival gold `#d7a441` — Second rival - Dusk blue `#3d4c7a` — Third rival - Danger `#d8452f` — Taillights, wrong-way banner, red start lamps ### Typography - Club name, position, speed, and podium place: Big Shoulders Display (OFL), weights 500/700/800 - Body, buttons, and HUD labels: Outfit (OFL), weights 400/500/600 - Lap times: Share Tech Mono (OFL), weights 400 ### Layout & motion - Spacing: 4 px base. Desktop panel padding 28 px and HUD inset 20 px. Mobile inset 14 px plus safe-area. Buttons at least 44 px, coarse-pointer controls at least 72 px. The start sheet on a phone stays within 58 vh and scrolls inside itself. - Radius: 18 px on the start, pause, and podium panels. Pill buttons. The minimap and steer pad are circles. The boost track is a 999 px capsule. World meshes stay faceted, not filleted like UI. - Motion: Chase camera eases with exponential smoothing and may roll up to 4 degrees against the steer. A boost widens FOV by 6 degrees for 1.2 seconds. - Motion: Countdown numerals use a 160 ms scale from 0.92 to 1. Drift dust is 12 short-lived specks. The armed boost bar pulses once. - Motion: Overlays fade over 180 ms and move no more than 8 px. Checkpoint callouts last 0.7 seconds. - Motion: prefers-reduced-motion removes roll, FOV kick, dust, pulses, overlay travel, and countdown scale. The race, ghost, and rivals still move, because that motion is the game. - Imagery: Draw the whole world in Three.js: sky shader, banked ribbon, closed-wheel wedge, gates, bales, tires, cones, pines, hills, a hut, and a grandstand of featureless box spectators. No photographs, generated images, HDRIs, downloaded models, or brand marks. Golden-hour light is one low warm sun and long shadows. The parked car on the ribbon is the first-screen anchor, with the start panel beside it rather than instead of it. ## Pages & Sections ### [BRAND] — [TRACK] (`index.html`) 1. **Race shell and start heat** — The document title is [BRAND] — [TRACK]. States are start, controls, countdown, racing, paused, and podium. Open on start. The eyebrow is [PLACE] in uppercase Outfit 600 at 12 px with 0.14 em tracking. The heading is [BRAND] in Big Shoulders Display 800. The line under it is [TRACK] · [CAR]. The deck is exactly: 3 laps of [TRACK] in the [CAR]. Drift to fill the boost, stay on the asphalt, and beat [first rival], [second rival], and [third rival]. The best-lap line reads Best lap m:ss.ss or No best lap yet. Fine print: A practice heat at [PLACE]. The best lap stays in this browser and comes back as a ghost. Buttons: Start race (primary, Coral) and Controls (Paper text on Ink). Put the optional [CREDIT] link under the fine print. Layout: Body margin 0, overflow hidden, background Zenith #1e3a5f. A fixed canvas fills the viewport. UI is a fixed layer, pointer-events none, with buttons and panels set back to auto. Desktop start panel is 420 px wide, 32 px from the left, vertically centered, Ink at 72% opacity, 8 px backdrop blur, 18 px radius, Paper text. The car sits in the right two-thirds. Under 700 px the panel is a bottom sheet, max-height 58 vh, internal scroll, and the camera lifts so the car and sky occupy the top of the screen. Do not use a loading wall or a type-only cover. Motion: The panel fades in over 180 ms after the first rendered frame. On the start state the car stays parked and the camera may sway 0.15 m over 6 seconds. Reduced motion freezes that sway. Start race moves to countdown and does not reload the page. 2. **Banked golden-hour circuit** — Axes: +x east, +y up, +z south. Build a CatmullRomCurve3 with closed set to true and tension 0.5, through these x,z meters: (0, 0), (72, 6), (136, 32), (168, 96), (128, 152), (56, 168), (-8, 136), (-56, 88), (-72, 32), (-32, -16), then back to the start. Scale x and z about the origin until the curve length is 1000 m. Sample 250 evenly spaced points. Yaw 0 faces +x. Positive yaw turns toward +z. With the nose built on local +z, set the yaw pivot's rotation.y to Math.PI / 2 - yaw. Right vector is normalize(cross(tangent, up)), so positive lateral is right of travel. Build each ribbon cross-section in the right/up plane, rotate it around the tangent by the bank angle, and keep the center point at y = 2. Gameplay lateral is the signed x,z distance to the centerline, not the distance along the tilted surface. Bank is +16 degrees from arc 200 to 500 and +8 degrees from arc 720 to 850, blended with smoothstep over 30 m, and 0 elsewhere. Positive bank raises the right edge. Asphalt half-width is 8 m, color #3a342e. Paper edge lines sit 0.4 m in from each edge. Gold center dashes are 4 m paint and 6 m gap. A start stripe at arc 0 is 0.8 m ink and paper squares across the asphalt, with no logo. Runoff continues to 18 m at 0.35 times the bank, color #6b5344. Beyond that, a grass plane #6d7a45. Curbs on the banked spans only: 0.6 m stripes of #c4512c and #f6f1e7. Layout: Gates at arcs 0, 250, 500, and 750. Each gate is two tapered pylons, 0.7 m at the base and 0.4 m at the top, 5.2 m tall, color #c4653a, placed 1.2 m outside each asphalt edge, with a 0.45 m cream beam at 4.2 m. The arc-0 beam uses the ink-and-paper stripe. A Sun-colored vertical plane between the pylons is opacity 0.22 and does not write depth. Callout names: [TRACK] line, North Gate, Sweeper, Hairpin. Hay-bale stacks, three boxes each in #c4a15a, at arcs 780, 805, and 830, lateral -6.6 m. Two tire stacks of four 8-sided rings, #2c2a28 with a #d4722a band, at arcs 460 and 478, lateral +7.2 m. Four cones, 0.7 m, #e07a2f with a Paper band, at arcs 560, 578, 596, and 614, laterals +6.6, -6.6, +6.6, -6.6. A wood grandstand of three steps, 18 m long, #8a6244, at arc 45, lateral +22, with 18 featureless spectator boxes in Coral, Teal, Rival gold, Dusk blue, Paper, and Ink. No faces. A hut at arc 45, lateral -22, Ink walls and a Coral roof, with one canvas sign reading [BRAND]. A five-lamp gantry at arc 70 is visual only. Fourteen pines and five hill domes must sit at least 22 m from the centerline, placed with a mulberry32 seed from [TRACK], never Math.random. Forty grass tufts may sit in the runoff. The grandstand, hut, gantry, trees, hills, and grass have no collision. Only bales, tires, cones, rivals, and the asphalt edge affect the car. Motion: The world does not rotate on its own. Start lamps are Ink housings, all Danger red during 3, 2, and 1, then #d6e38a for 1.5 seconds on GO, then dark. Reduced motion switches the lamp color without a glow pulse. Shadow casters are the car, gates, hut, and grandstand. 3. **Player car and arcade driving** — Build one closed-wheel wedge and clone it. It is not an open-wheel car and not a known road car: blunt two-step nose, short cabin, small lip spoiler, rectangular lamps, no giant wing, no sponsor livery. Local +z is the nose. Parent the mesh under the yaw pivot so that when yaw is 0 the nose points along world +x. Sill box 4.20 × 0.28 × 1.78 at y 0.36. Nose box 1.35 × 0.32 × 1.62 at z 1.25, y 0.55. Nose tip 0.70 × 0.18 × 1.40 at z 1.85, y 0.48. Tail box 0.85 × 0.36 × 1.70 at z -1.55, y 0.62. Cabin 1.45 × 0.55 × 1.28 at z -0.15, y 1.02, color #241c18. Windshield 0.08 × 0.42 × 1.18, rotated -32 degrees on x, at z 0.55, y 1.08, color #b7d4d8, opacity 0.55. Two spoiler uprights and a blade 1.40 m wide at y 1.12. Four arch boxes over the wheels. Wheels are 10-segment cylinders, radius 0.36, at x ±0.92 and z ±1.28. Hubs #e8d7b0. Headlights emissive #fff1cc. Taillights emissive #d8452f. Player body #c4512c, door number 14 on a 256×128 canvas. MeshStandardMaterial roughness 0.62 and metalness 0.08. Rivals recolor only the body panels. Layout: Simulate on the x,z plane. Speed is along yaw plus a drift slip angle. Each frame, project the car onto the nearest centerline sample, searching only ±40 samples from the last hit so the match cannot jump. Set height from the bank at that lateral offset and roll the mesh to the bank. Camera is a perspective chase: FOV 68, or 76 under 700 px, 7.2 m behind and 2.6 m up, looking 6 m ahead. Under 700 px use 9.2 m behind and 4.0 m up so the bottom sheet and the thumbs do not cover the car. Speed cap is 42 m/s, or 54 m/s while a boost is active. Acceleration is 16 m/s², brake is 28 m/s², and reverse caps at 6 m/s. With no throttle, coast at 3 m/s². Do not add quadratic drag, or the car cannot catch the rivals. Yaw rate eases from 1.6 rad/s at rest to 0.5 rad/s at top speed. Keyboard steer is digital and rate-limited at 3.5 units per second. The steer pad is analog. Motion: Fixed step 1/60, accumulator capped at 0.1 s. Wheels spin with speed and the front wheels steer up to 18 degrees. Drift when throttle is held, speed exceeds 18 m/s, and either the drift control is held or the brake is held with steer past 0.4, and a boost is not active. Slip angle moves toward steer times 16 degrees. The boost meter fills 0.40 per second while drifting and falls 0.15 per second otherwise. At 1 it stays armed. Shift, or releasing drift while armed, spends it: 1.2 s at the boost speed, then the meter is 0. Dust specks spawn only while drifting. Reduced motion skips dust and the FOV kick. Camera smoothing is 1 - exp(-8 dt) on position. 4. **Rivals, ghost, gates, and heat rules** — Three rivals use the same mesh on rails. Order in [RIVALS] maps to teal number 7, gold number 22, and dusk blue number 3. Spawn arcs and laterals: first 52 m and -2.4 m, second 36 m and +2.6 m, third 8 m and +0.4 m. The player spawns at arc 20 m, lateral 0, so the grid is first, second, player, third. Rival target speeds in m/s: 34 from 0–180, 27 from 180–460, 32 from 460–700, 18 from 700–860, and 34 from 860–1000, with acceleration limited to 10 m/s². They do not drift or boost. A rival completes a lap when its arc wraps forward past 0, and the first wrap counts as lap 1. Progress for every car is completed laps times 1000 plus current arc. That order drives the HUD place and the podium. If a rival overlaps the player inside 2.4 m, separate them and multiply both speeds by 0.92. The rival then returns to its lateral at 4 m/s. Obstacle hits multiply speed by 0.72, shove lateral 1.2 m away from the obstacle, and never leave speed under 7 m/s. Cooldown 0.45 s. Layout: Off asphalt means absolute lateral greater than 8 m: cap speed at 26 m/s, cut acceleration to 0.45, and show Back on the asphalt. If that lasts 1.2 s, or absolute lateral exceeds 20 m, reset to the last cleared gate at lateral 0, heading along the tangent, speed 16 m/s. The last cleared gate starts at arc 0, then updates to 250, 500, and 750 as those gates are passed in order. Show Reset for 0.8 s and ignore obstacle hits during it. Do not clear lap flags and do not end the heat. Gates must be taken forward, in order: 250, then 500, then 750, then arc 0. Ignore arc 0 until the player has reached arc 40 once. Crossing arc 0 with the three flags set completes a lap, stores the lap time, and clears the flags. HUD lap reads completed + 1, clamped to 3. The heat ends when the player completes 3 laps. Each car stores its own finish clock. Unfinished rivals sort behind finishers by progress around the lap. Wrong way, when the heading opposes the tangent for 0.4 s, shows Wrong way and does not reset the car. Motion: Record the player's world position and yaw every 100 ms during a lap, capped at 800 samples. If that lap is the best, keep it and write localStorage key [brand-slug]::[track-slug]::best-lap. Replay it as a Coral clone at opacity 0.32, emissive Sun at 0.15, depthWrite false, no shadow and no collision. Restart the ghost each time the player begins a lap. The first visit with no save shows no ghost. Clear ghost deletes the key and hides the clone. Cars stay still through the countdown. On GO the clock starts and input is live. Pause, the hidden document, and the podium freeze the clock and the step. 5. **HUD, minimap, touch, and podium** — During the race show position as 1st, 2nd, 3rd, or 4th; Lap 1 / 3 from the lap counter; the current lap time and Best m:ss.ss or Best — in Share Tech Mono; speed as a rounded km/h integer with a km/h label, prefixed R when reversing. Times use m:ss.ss under 10 minutes. The boost label is BOOST. Banners, one at a time, use the gate name, Back on the asphalt, Reset, or Wrong way. If the next rival is inside 30 m, a small line reads Ahead: and that rival's name, or Behind: when the rival is the car immediately back. Countdown is 3, 2, 1 at 700 ms each, then GO for 400 ms. Podium heading is Heat complete. If the player is first: [DRIVER] took [TRACK]. Otherwise: [DRIVER] finished [ordinal] at [TRACK]. Four rows show place, name, and time. A new best adds New best lap and the time. Buttons: Run it again, Clear ghost when a ghost exists, and Back to start. Pause heading is Paused, with Resume, Restart, and Controls. Layout: Desktop HUD: position and lap at the top left, lap time top center, speed top right, a 168 px minimap 24 px from the bottom right, and a 180×10 boost track bottom center. A Pause button, at least 44 px, is always available. Under 700 px: row one is Pause and speed, row two is position, lap, and lap time, the minimap shrinks to 104 px at the top right, and the boost track sits just above the touch controls. Touch controls show only when the pointer is coarse or the width is under 800 px. Left: a 132 px steer pad, 16 px from the safe-area corner. Right: GAS 92 px in Coral, BRAKE 72 px in Paper, DRIFT 72 px in Gold. Minimap is a 2D canvas, not a second WebGL view: Ink fill, 2 px Gold border, centerline in Gold, +x to the right and +z downward, 14% padding, a Paper tick at arc 0. Player triangle Coral, rivals as 6 px dots in their colors, ghost as a Gold ring, next gate as a Paper tick. The map does not rotate with the car. Motion: Passing a gate shows its name for 0.7 s. The boost fill uses scaleX from the left. An armed meter gets a Paper border and one pulse. Overlays fade 180 ms. Reduced motion uses instant overlay changes and a static full boost bar. Run it again and Restart return to the countdown on the same grid without reloading. Back to start returns to the parked car. Clear ghost can be used from the podium or the start panel. 6. **Controls, sound, and fallback** — Controls heading is Controls. Keyboard rows: W or Up arrow — gas; S or Down arrow — brake; A, D, or the arrow keys — steer; Space — drift; Shift — boost when the bar is full; R — return to the last checkpoint; P — pause. Touch rows: the left pad steers; Gas, Brake, and Drift sit on the right. Button: Back. Keys: W and ArrowUp throttle, S and ArrowDown brake, A and ArrowLeft steer left, D and ArrowRight steer right, Space drift, Shift boost, R reset, P or Escape pause during the race, Enter activates the primary button of the open overlay, Escape closes Controls. Prevent default on those keys so the page does not scroll. Releasing the pointer, blurring the window, or opening an overlay clears every held key and touch so the car cannot stick. Sound is off by default. The toggle reads Sound off or Sound on. When on, after that gesture, play a 440 Hz sine for 80 ms on each count, 660 Hz for 140 ms on GO, a 120 ms noise burst on boost, a quiet sawtooth engine at gain 0.02 whose pitch follows speed, and three short sines at 523, 659, and 784 Hz on the podium. No audio files. If AudioContext fails, leave sound off and do not log a loop of errors. Layout: The controls sheet is 480 px on desktop and a scrollable sheet on mobile, reached from the start panel or from pause, and it returns to that same state. All controls are real buttons with visible 2 px Gold focus rings. The canvas has an accessible name: Third-person race on a banked circuit at dusk. A polite live region announces lap changes, Reset, Wrong way, and the podium sentence, not every speed tick. The minimap is aria-hidden. Pair every sound with the visible countdown, banner, or podium. Motion: Held touch buttons use a 0.96 scale and a filled pressed state without delaying the input. Reduced motion removes that scale. Audio gain ramps over 40 ms. Sound goes silent while paused or when the toggle is off. 7. **Size, lighting, and the two viewports** — Target a clean first frame at 1440×900 and at 390×844, with no horizontal overflow and no console errors. Lighting: hemisphere sky #ffd2a8 and ground #6b5344 at intensity 0.5; one directional light #ffb067 at intensity 2.35 from position (-90, 22, 40); FogExp2 color #e0a06a density 0.011; ACES filmic tone mapping at exposure 1.05; PCF soft shadows, 2048 on desktop and 1024 under 800 px, bias -0.0003. The sky is the inside of a large sphere: Zenith overhead, Horizon at the horizon, #c46a3a below it, and a soft #fff1cc sun disc aligned with the directional light. No stars, no night, no neon, no bloom composer. Cap pixel ratio at 1.75, or 1.25 under 800 px. If the mean frame time over 180 frames exceeds 22 ms, once, drop the pixel ratio to 1 and the shadow map to 1024. Keep the heat rules. If WebGL cannot start, leave the start copy in place and add the sentence This browser could not start the 3D view. Try a browser with WebGL enabled. Do not retry in a loop. Layout: Resize the renderer and camera on viewport changes and honor safe-area insets. The page itself does not scroll. Panels that exceed the viewport scroll inside. Keep dist under 20 MB by using code geometry, instanced grass and spectators, and no image files. Stop the simulation while the document is hidden, and do not auto-resume when it returns; stay paused until Resume or Start race. Motion: Quality cuts never remove gates, rivals, the ghost, or touch controls. Reduced motion is independent of the quality cut: the race stays playable, and only the extra camera and UI motion drops. ## Assets - image: No image files and no generated stills. Draw the sky, track, cars, gates, obstacles, trees, hut, grandstand, number plates, hut sign, and minimap in code. Add an original public/favicon.svg: a 32 viewBox, Ink rounded rectangle, and a Coral five-sided wedge pointing right, with no letters. In ASSETS.md state that the scene is code-drawn and list the favicon as original. - icon: Do not install an icon package. Pause, sound, and the touch labels are text. The steer pad and boost track are CSS. List no third-party icons in ASSETS.md. - font: Self-host Big Shoulders Display, Outfit, and Share Tech Mono through the Fontsource packages named in the stack (OFL-1.1). Import only the weights listed. In ASSETS.md record the local woff2 files, the npm package pages, and the OFL license. Do not request fonts.googleapis.com, fonts.gstatic.com, or any other font CDN. - video: No video, no filmed gameplay, and no audio files. Optional sound is synthesized with Web Audio after the player turns Sound on. ## Don'ts - No backend, accounts, database, analytics, external APIs, multiplayer, or a global leaderboard. The best lap stays in localStorage under a key built from the brand and the track. - No CDN and no remote assets. Self-host fonts, import three from the installed package, use relative paths, and emit minified files to dist/ with source maps off and without copying src/ into dist/. Keep dist under 20 MB. - No routes, marketing sections, prices, or a scroll landing page. The only page is index.html, and the first screen is the parked car on the circuit. - Do not copy a source prompt, one-shot HTML page, filmed run, judge note, or playtest reading. Do not show a speed of 105 or a score of 000749. Do not mention Agent OS, GoldieBench, AI Profit Boardroom, Grok, xAI, or Julian Goldie. - Do not reuse a source car silhouette, circuit layout, gate design, or obstacle placement. Use the control points, gates, bales, tires, and cones specified here. Do not turn the heat into a night city, a hover vehicle, or a brick-breaking game. - No real racing series, manufacturers, circuits, liveries, sponsor marks, or real drivers. No celebrity or public-figure likeness, no faces on the spectators, and no brand logos. The start stripe is a generic ink-and-paper band, not a series identity. - No downloaded models, HDRIs, texture packs, stock photos, placeholder-image services, physics engines, or postprocessing bloom. Geometry and the sky stay in code. - No commercial fonts and no font CDN. Do not hard-code Pennyglass, Wickpenny, Barleycut, Skiff 4, Nell Harp, or the default rivals outside src/content.ts, and do not leave raw variable tokens on screen. - Do not invent dates, entry fees, online player counts, or any claim about VibeFather. The only VibeFather presence is the optional [CREDIT] link. - No autoplay audio, camera shake, full-screen flashing, or a permanent stall. Off-track play slows the car and then resets it to the last gate. Honor prefers-reduced-motion without disabling the race. - Do not let the clock run while paused, hidden, or on the podium. Clear stuck inputs when focus is lost. At 390×844 the steer pad, pedals, minimap, and start sheet must all be usable with no horizontal overflow and no console errors. - If WebGL fails, show the readable fallback sentence and do not throw in a loop. If frames run long, lower the pixel ratio and the shadow map once, and leave the lap rules, rivals, ghost, and controls in place. --- Inspired by Grok 4.7 In The Agent OS: 20 Games, One Shot, Real Scores by @JulianGoldieSEO — https://agentos.guide/grok-4-7-agent-os — Prompt by VibeFather · https://vibefather.ai/t/dusk-track-racing-game · CC BY-NC 4.0 (non-commercial; commercial use needs a VibeFather Pro license) · Request removal: https://vibefather.ai/takedown
Free for personal projects under CC BY-NC 4.0. Commercial use comes with Pro.
DESIGN.md
The design system on its own — colors, type, spacing and motion. Apply this look to a project you already have.
---
name: "Dusk Track Racing Game"
colors:
ink: "#1c1612"
paper: "#f6f1e7"
coral: "#c4512c"
gold: "#e7c27a"
sun: "#ffb067"
horizon: "#e7a15a"
zenith: "#1e3a5f"
asphalt: "#3a342e"
runoff: "#6b5344"
grass: "#6d7a45"
pine: "#3e5340"
teal: "#2f6f62"
rival_gold: "#d7a441"
dusk_blue: "#3d4c7a"
danger: "#d8452f"
typography:
club_name_position_speed_and_podium_place: { family: "Big Shoulders Display", weights: [500, 700, 800] }
body_buttons_and_hud_labels: { family: "Outfit", weights: [400, 500, 600] }
lap_times: { family: "Share Tech Mono", weights: [400] }
spacing: "4 px base. Desktop panel padding 28 px and HUD inset 20 px. Mobile inset 14 px plus safe-area. Buttons at least 44 px, coarse-pointer controls at least 72 px. The start sheet on a phone stays within 58 vh and scrolls inside itself."
radius: "18 px on the start, pause, and podium panels. Pill buttons. The minimap and steer pad are circles. The boost track is a 999 px capsule. World meshes stay faceted, not filleted like UI."
---
# Dusk Track Racing Game — Design System
Apply this design system to an existing project. It describes the look and feel only; for the full site, use prompt.md.
## Colors
- **Ink** `#1c1612` — Panels, minimap fill, car roof, tire rubber, start-stripe dark squares
- **Paper** `#f6f1e7` — Text on ink, edge lines, start-stripe light squares, focus rings
- **Coral** `#c4512c` — Player body, primary buttons, player minimap triangle
- **Gold** `#e7c27a` — Center dashes, boost fill, minimap ribbon, drift button
- **Sun** `#ffb067` — Directional light, gate veil, ghost emissive, boost glow
- **Horizon** `#e7a15a` — Sky horizon band and fog tint
- **Zenith** `#1e3a5f` — Sky top and the page background behind the canvas
- **Asphalt** `#3a342e` — Racing surface
- **Runoff** `#6b5344` — Dirt shoulders
- **Grass** `#6d7a45` — Ground plane beyond the runoff
- **Pine** `#3e5340` — Tree cones
- **Teal** `#2f6f62` — First rival
- **Rival gold** `#d7a441` — Second rival
- **Dusk blue** `#3d4c7a` — Third rival
- **Danger** `#d8452f` — Taillights, wrong-way banner, red start lamps
## Typography
- **Club name, position, speed, and podium place** — Big Shoulders Display (OFL), weights 500/700/800. Self-host the font files.
- **Body, buttons, and HUD labels** — Outfit (OFL), weights 400/500/600. Self-host the font files.
- **Lap times** — Share Tech Mono (OFL), weights 400. Self-host the font files.
## Spacing & shape
- Spacing: 4 px base. Desktop panel padding 28 px and HUD inset 20 px. Mobile inset 14 px plus safe-area. Buttons at least 44 px, coarse-pointer controls at least 72 px. The start sheet on a phone stays within 58 vh and scrolls inside itself.
- Radius: 18 px on the start, pause, and podium panels. Pill buttons. The minimap and steer pad are circles. The boost track is a 999 px capsule. World meshes stay faceted, not filleted like UI.
## Motion
- Chase camera eases with exponential smoothing and may roll up to 4 degrees against the steer. A boost widens FOV by 6 degrees for 1.2 seconds.
- Countdown numerals use a 160 ms scale from 0.92 to 1. Drift dust is 12 short-lived specks. The armed boost bar pulses once.
- Overlays fade over 180 ms and move no more than 8 px. Checkpoint callouts last 0.7 seconds.
- prefers-reduced-motion removes roll, FOV kick, dust, pulses, overlay travel, and countdown scale. The race, ghost, and rivals still move, because that motion is the game.
## Imagery
Draw the whole world in Three.js: sky shader, banked ribbon, closed-wheel wedge, gates, bales, tires, cones, pines, hills, a hut, and a grandstand of featureless box spectators. No photographs, generated images, HDRIs, downloaded models, or brand marks. Golden-hour light is one low warm sun and long shadows. The parked car on the ribbon is the first-screen anchor, with the start panel beside it rather than instead of it.
## Tone
Warm, plain, and specific. US English. Club-heat language, no taunts, no military wording, and no real series, manufacturers, or drivers.
---
Inspired by Grok 4.7 In The Agent OS: 20 Games, One Shot, Real Scores by @JulianGoldieSEO — https://agentos.guide/grok-4-7-agent-os
— Prompt by VibeFather · https://vibefather.ai/t/dusk-track-racing-game · CC BY-NC 4.0 (non-commercial; commercial use needs a VibeFather Pro license) · Request removal: https://vibefather.ai/takedown
Make it yours
- A local karting club: set BRAND to the club, PLACE to the town and TRACK to the circuit, then swap DRIVER and RIVALS for member names on the podium.
- A studio portfolio piece: keep the dusk circuit, set BRAND to your studio name and use CAR and DRIVER to credit the project and the person who built it.
- A birthday or party game: name BRAND after the host, set RIVALS to the guests and keep the three-lap heat as the main event on a laptop or phone.
- A game jam entry: keep the banked ribbon and drift boost, rename TRACK and the three rivals to fit your theme, and publish the static build as the playable demo.
Dusk Track Racing Game: questions and answers
What can I change in the Dusk Track Racing Game without touching the 3D code?
The Dusk Track Racing Game template keeps every name and label in one content file. Set BRAND to your club, PLACE to the ridge, TRACK to the circuit, CAR to the car name, DRIVER to the player and RIVALS to three comma-separated names. Those values rewrite the start panel, trackside sign, podium and the saved-lap key, while the ribbon, gates, speeds and HUD stay the same.
How does the ghost lap and best-lap saving work in the Dusk Track Racing Game?
The Dusk Track Racing Game saves your best lap in the browser and replays it as a translucent ghost on later runs. The save key is built from the lowercased brand and track names, so changing BRAND or TRACK starts a fresh best lap and ghost. Times never leave the browser; there is no account or backend.
How do I change the three rivals and their colors in the Dusk Track Racing Game?
Edit the RIVALS value in the content file as three comma-separated names, in teal, gold and dusk-blue order. The Dusk Track Racing Game keeps rival colors and numbers fixed for every variable set, so the names change but the three cars keep their assigned colors. The rivals hold fixed lines around the banked circuit.
Is the Dusk Track Racing Game free to use, and can I ship it as my own project?
The Dusk Track Racing Game is a free template. Its prompt and DESIGN.md are free for personal, non-commercial use under CC BY-NC 4.0. Commercial use, client work and shipping it as your own product need Pro, which also includes the source code of the demos. The page shows the brief, stack and variables publicly.
What happens when I drive off the asphalt in the Dusk Track Racing Game?
Off the asphalt the car slows, then returns to the last checkpoint gate instead of stalling. The Dusk Track Racing Game loop is 1000 meters with a banked sweeper, a hairpin, four gates and edge obstacles like hay bales, tire stacks and cones. Three laps end on a podium, and the HUD shows place, lap, time and speed.
How do I build a dusk track racing game with AI?
Copy the prompt from this page or run npx vibefather add dusk-track-racing-game, replace [CAR], [BRAND], [PLACE] and [TRACK] with your own content, and paste it into Claude Code, Codex, Cursor or another AI coding agent. The live demos were built from exactly that text.
Which AI model built the Dusk Track Racing Game demo?
The Wickpenny dusk heat case was built by Grok 4.7 in Grok Build; the Bramble wick heat case was built by Grok 4.7 in Grok Build. Each build used the published prompt with nothing added.
What tech stack and pages does the Dusk Track Racing Game template use?
Dusk Track Racing Game is a single-page site built with Three.js, with 3d / webgl and micro-interactions. The prompt fixes the stack so every AI tool builds the same kind of project, and the result runs as a static site you can host anywhere.
Can I use the Dusk Track Racing Game template for a client or a business?
The Dusk Track Racing Game prompt and DESIGN.md are free for personal, non-commercial projects under CC BY-NC 4.0. Client work and commercial use need VibeFather Pro, which also includes the source code of the live demo.
Does the Dusk Track Racing Game template work on mobile?
Yes. Every Dusk Track Racing Game build was tested on a phone-sized screen as well as desktop before it went live, checking layout, text size and touch targets. Open the live demo on your phone, or switch the preview on this page to mobile view, to check it yourself.