MineGeo/docs/cinematics.md

MineGeo cinematics

Deliverables

• public/media/minegeo-discord-banner.gif: 600 × 240, 3-second looping banner at 24 fps. Created in Three.js; the camera, compass sweep and pin targeting return to their initial state at the loop boundary.
• public/media/minegeo-discord-banner.png: 1200 × 480 still fallback.
• public/media/minegeo-trailer.mp4: 1280 × 720, 30 seconds at 30 fps, H.264/AAC, optimized for progressive web playback. Includes an original synthesized ambient soundtrack with no speech.
• public/media/minegeo-trailer-poster.jpg and minegeo-trailer.vtt: poster and English captions.

The trailer combines a Three.js opening and closing with genuine screenshots of the homepage, map catalog, in-game panorama, and map setup, captured through the browser from the local app against the real published catalog. Screenshots are stored in cinematics/screenshots/ and presented in a minimal frame with a brief entrance and a still reading hold; they are still captures, not a gameplay recording. A guest game was opened for the panorama capture; no score was submitted. The intro/closing terrain, hut, arch, pins, particles, compass, typography and sound are generated locally; no third-party footage or music is used. Typography uses the project's existing licensed Monocraft font.

The homepage provides native video controls, captions, a descriptive text alternative, and a download link. The video does not autoplay and uses preload="none".

First visit

FirstVisitIntro runs only on the homepage and lasts 4 seconds. A single isometric map tile enters, a golden pin settles, and the wordmark enters with a 60ms stagger. Text exits at 3.3 seconds, the map exits at 3.5 seconds, and the backdrop exits at 3.75 seconds. The Skip button and Escape dismiss it early. It bypasses the animation when reduced motion is requested and closes if that preference changes during playback.

The minegeo:intro:v1 local-storage key remembers a visit per browser/origin. If local storage is unavailable, it falls back to session storage and then in-memory state. The regular page always renders on the server; JavaScript failure cannot leave it hidden. The welcome does not interrupt an already-open dialog.

Rebuild media

The installed project dependencies supply Three.js, Sharp and Playwright. Install Playwright's Chromium runtime and a local FFmpeg executable if they are not already present. These are production tools; visitors receive only the compressed media and the lightweight CSS intro, without Three.js on the homepage.

node scripts/render-cinematics.mjs
node scripts/render-cinematics.mjs --banner-only
node scripts/render-cinematics.mjs --trailer-only
node scripts/render-cinematics.mjs --preview

The preview binds to 127.0.0.1:3110. Open /?mode=banner for the loop or /?time=16&still=1 for a trailer still. Temporary frames and synthesized audio stay in ignored .data/cinematic-render/; deliverables are written to public/media/. The export uses an isolated headless graphics renderer, does not access user browser sessions, and needs no credentials or network assets.

Motion direction and performance

Rebuilt with the Animate and Animation Performance skills. Entrances and exits use the canonical ease-out curve (0.23, 1, 0.32, 1); the camera move and map-target alignment use ease-in-out (0.77, 0, 0.175, 1). The Discord wordmark stays readable throughout its 3-second loop.

The 30-second trailer opens for 3 seconds, then gives each actual website screenshot 5 seconds: homepage (3–8), catalog (8–13), gameplay (13–18), map setup (18–23). The final 7 seconds hold the brand and site address. Screenshots settle within 300ms and then remain still. The gameplay chapter highlights the existing guess map after 2 seconds. Original audio transitions and captions follow the same chapter boundaries.

The first-visit animation is CSS-only and changes transform/opacity; it has no animated blur, layout properties, perpetual loops or per-frame React updates. Skip and Escape close immediately. Reduced motion bypasses the decorative intro. The offline Three.js renderer caches static terrain shadows; none of that renderer ships to the homepage. Native video playback is opt-in, with no preload or autoplay.

Verification covers timeline/easing tests, browser checks of Skip, Escape, automatic dismissal, repeat visits and reduced-motion bypass, production compilation, and encoded media dimensions/duration/frame count. No physical-phone frame-rate measurement has been made; this is not a verified 60fps claim.