Golf Shot Tracer

About this style

A shot tracer draws the path of a golf ball on live television, so viewers can follow a ball that is too small and fast to see against the sky. Radar and camera systems measure the ball from the moment it leaves the club, and broadcasts pair the line with live numbers such as ball speed, launch angle, spin, apex height and carry. Tracers became a standard part of tournament coverage in the 2000s and 2010s and now also run on driving ranges and in coaching apps. The graphics are deliberately simple: one bright line, a few numbers and a clean lower third.

Make a 10-second broadcast-style golf shot tracer: a tee shot on a par 3 is drawn as a glowing line over the course as ball speed, launch, spin, apex and carry count up live, then a cut to the green shows the ball landing and rolling up close to the pin.

<inputs>
If I don't give you something, use the default and don't ask.
- Event: Brackenmoor Links Invitational, final round (fictional).
- Player: Tess Varden (fictional), −9.
- Hole: 17th, par 3, 188 yards to the pin. Club: 6-iron.
- Shot: ball speed 129 mph · launch 16.4° · spin 6,350 rpm · apex 96 ft · carry 184 yds · total 187 yds · finishes 3 ft 10 in from the pin.
- Length: 10 seconds.
</inputs>

<direction>
- Look: a live golf broadcast at golden hour: a long telephoto view down a links hole from behind the ball, a single bright tracer line that leaves the turf and arcs over gold fescue toward the green, crisp navy graphics with live numbers, then a hard broadcast cut to a green-side camera as the ball drops in. Calm, precise, real.
- Palette: sky lavender #B7A9D9 at the top to peach #F6C7A1 at the horizon; the sea beyond the green #8F9FC8 with a pale glitter line #F7E3C8; far dunes dusky blue #7D7FA8; fescue rough gold #CFAE5E and russet #A9693A with pale seed heads #E8D49A; fairway and approach cool green #5E9F5A, mown in stripes #6BAA62 and #578F52; green #4E9A5C with finer stripes; bunker sand #E9D3A6 with shaded lips #B79566; the burn #3E5F7A reflecting the sky as #8E93C2; flag cobalt #2F4BC2 on a cream stick #F4EFE6; tracer core #FFF3E0 with a coral glow #FF5C6E; graphics navy #13183A at 90% with a lime rule #C6F25C, cream text #F7F3EA and secondary #AEB3D6. A coral line over gold and green under a lavender sky, with cobalt only on the flag so the tracer never competes with it.
- The hole (1 unit = 1 yard; the tee at the origin, the hole running along +z): a teeing ground of short grass; a meandering burn crossing at z 60–66 with stone-edged banks; rolling fescue dunes on both sides and a corridor of mown approach from z 150; two pot bunkers with revetted sod walls at (−14, 176) and (13, 182); the green, a 32 × 26 oval centered at (−1, 188), raised 1.2 with gentle undulations and a fringe collar; the pin at (−1.5, 188); behind it the dunes fall away to the sea. Terrain is one displaced plane (seeded fBm, flattened under the green, tee and approach) with a ShaderMaterial that paints the mowing stripes, fringe, rough patches and sand from masks; 40,000 instanced fescue blades (thin tapered quads in the rough near each camera) sway on a traveling wind sine; a flag that waves (a vertex-shader cloth ripple) on a 2.3-yard stick in a cup with a white liner.
- The ball's flight, precomputed once at load at a fixed 1/240 s step: launch 57.7 m/s (129 mph) at 16.4°, aimed 0.6° left, backspin 6,350 rpm with a touch of fade spin; drag and Magnus lift with air density 1.2 kg/m³. Tune the drag scale, the lift scale and the launch angle (within 15–18°) at load so the carry is 184 yds, the apex 96 ft and the flight time 5.6 s, launching at 0.6 s and landing at 6.2 s at (−1.8, 184). Then a first bounce of 2.3 yds with restitution 0.32, a short check hop, and a roll that decelerates at a constant rate to stop at (−2.3, 187.0) at 7.6 s, exactly 1.28 yds (3 ft 10 in) from the pin.
- The tracer: a ribbon built each seek along the precomputed flight up to the ball's current position, drawn after the scene with depth testing off, its width constant in screen pixels (computed from clip space in the vertex shader): a 3px cream core inside a 14px coral glow fading to clear at its edges, a little brighter near the head, with a small comet dot at the ball. After landing it stays, easing to 70%. When the ball passes its apex, a small coral tick and the label "APEX 96 FT" (Antonio 700, 22px, cream on navy) appear there. The ball itself is a white sphere with a soft shadow.
- The strike: at 0.6 s a steel iron head (grooved face, a hosel, no shaft above the frame edge and no hands) sweeps through the bottom of the frame in 0.08 s; the ball leaves the turf, a divot of turf flips up behind it and tumbles, and a puff of grass clippings scatters on short arcs.
- Light, bright golden hour from the first frame: a low sun DirectionalLight #FFD9A6 at 2.6 from the west (screen left from the tee), elevation 14°, casting long soft shadows across the stripes (PCFSoftShadowMap, 2048, cascades or a shadow camera fitted to each view); a HemisphereLight #C9BEEB / #6B5A3A at 1.0; light haze toward the horizon (Fog #E9C9B8, near 300, far 900). ACESFilmic, exposure 1.1. Grass reads green, fescue gold and the sky lavender in every frame.
- Cameras, broadcast style, with one hard cut:
  - tee camera (0–4.0 s): behind the ball and 1.7 yds up, fov 22 (telephoto), the green and flag visible far down the hole near the center of the frame; it tilts up smoothly to keep the rising tracer's head in the upper third, never panning fast;
  - green camera (4.0–10 s): behind and right of the green, 6 yds up and 38 yds past the pin, looking back down the hole, fov 24, so the tracer arcs in toward us from the distance and the ball drops onto the green near the flag; a slow 2° drift.
- Graphics (HTML over the canvas):
  - bug at the top left (120, 96): "BRACKENMOOR LINKS · FINAL ROUND" in Plus Jakarta Sans 700, 20px, tracked 0.12em, cream, on navy with a lime left edge;
  - stats panel x 1440–1800, y 300–700: five rows at 80px pitch, the label in Plus Jakarta Sans 700, 20px, uppercase, tracked 0.1em, secondary, the value in Antonio 700, 44px, cream, tabular figures, units in 22px; ball speed and launch count up from 0 over 0.4 s at 0.75 s, spin at 1.0 s, apex counts with the ball's height and locks at the apex with a lime underline, carry counts with the ball's downrange distance and locks on landing; the panel slides in from the right 0.2 s after the strike;
  - lower third x 120–900, y 900–1000: the player's name in Plus Jakarta Sans 800, 34px, cream; a lime score chip "−9"; "17th · Par 3 · 188 yds · 6-iron" in Plus Jakarta Sans 600, 22px, secondary;
  - the finish: a dashed cream line from the ball to the cup with "3 ft 10 in" in Antonio 700, 40px, on a navy pill, and a summary chip in the stats panel: "Total 187 yds".
- Motion: graphics slide 24px and fade over 0.3 s on cubic-bezier(0.22, 1, 0.36, 1); numbers count on easeOutCubic except apex and carry, which follow the ball exactly.
- Premium: a believable links hole at golden hour, a ball flight from real physics, a tracer that stays thin and bright at any distance, numbers that follow the ball and agree with the course. Cheap: a cartoon parabola over a flat green plane, a thick neon line, stats that appear all at once, a ball that stops dead.
Banned: real tournaments, tours, broadcasters, golfers, clubs, balls or sponsor logos; people or crowds (no golfer beyond the iron head); a rainbow or neon tracer; lens flares; bloom over the graphics; camera shake; motion blur; anything flashing more than 3 times per second.
</direction>

<structure>
- 0.0–0.6s: the tee camera: the ball on the turf, the hole stretching to the flag in the low sun; the bug and lower third slide in.
- 0.6–1.2s: the strike: the iron head sweeps through, the divot flips, the ball launches and the tracer starts drawing; the stats panel slides in; ball speed and launch count up, then spin.
- 1.2–4.0s: the tracer climbs over the burn and the fescue, the camera tilting up to keep its head in frame; apex counts up and locks at 96 ft with its tick and label; carry counts.
- 4.0s: a hard cut to the green camera.
- 4.0–6.2s: the tracer arcs in toward us from the distance and steepens as it falls toward the flag; carry keeps counting. At 6.0 s: the ball a moment above the green, the full tracer arc over the hole, the flag waving, every stat but carry locked: a complete composition.
- 6.2–7.6s: the ball lands (carry locks at 184 yds), bounces, checks and rolls toward the hole, stopping at 7.6 s; the tracer eases to 70%.
- 7.6–8.6s: the dashed line and "3 ft 10 in" draw in; "Total 187 yds" appears in the panel.
- 8.6–10.0s: hold: the flag waving, the fescue swaying, the camera still.
For other lengths, add tee-camera time before the strike; keep the real flight time 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 flight, bounces and roll are precomputed once at load at a fixed step (with the tuning) and read back by t; the tracer ribbon is rebuilt from those samples each seek. Cameras, the cut, the flag's ripple, the fescue sway and every graphic are closed-form functions of t.
</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 course reads as a links par 3 with a burn, pot bunkers, a raised green and a flag; the frame is bright golden hour from the first second; the tracer stays a thin, bright constant-width line and starts exactly at the ball; apex locks at 96 ft at the flight's highest point and carry at 184 yds on landing; the ball finishes 3 ft 10 in from the pin and the label says so; the cut at 4.0 s is clean; no person or crowd appears; the 6.0 s and final frames are complete compositions. 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

KPI Dashboard Reveal

Made by us

A light analytics dashboard builds itself from fictional data that adds up: counters roll on tabular figures, sparkline…

Editorial Data Story

Made by us

A newspaper-grade animated chart: serif headline and dek, a two-line chart that draws year by year, a shaded 2020 band,…

Broadcast Lower Thirds

Made by us

A crisp live-sports graphics package over a soft-focus stadium feed: score bug with running clock, layered lower third,…

AI Chat Product Demo

Made by us

A warm, light chat app: a cursor types a question about three coffee shops, the assistant streams its answer word by wo…