Files

T

Deploy / deploy (push) Successful in 35s

Details

Add /set/spill: on-set green screen spill checker

- Phone camera or photo -> WebGL shader that classifies every pixel against
  the sampled screen colour; colour-blind friendly (stripes, motion, words)
- Views: Spill, Screen (flat colour), rough live Key, Evenness
- Spill = worse of lean toward the screen hue and the green/blue despill
  limit, tuned on a real Alexa car-interior plate (teal screen, green bounce)
- Plain-English verdict incl. widespread colour cast; tap for readouts
- Pick screen / pick white (neutral reference), freeze, exposure/WB lock
- Service worker caches each /set page under its own path (spill page no
  longer overwrites the markers page offline); link from /set

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

2026-10-07 11:55:24 +02:00

2.7 KiB

Raw Blame History

twotalesvfx.com

The marketing site for Two Tales VFX: Next.js 16 (App Router), Tailwind CSS v4, exported as static HTML.

npm install
npm run dev      # http://localhost:3000
npm run build    # static site in ./out

Editing content

All copy (studio info, services, projects, contact email) lives in content/site.ts. Items marked TODO are placeholders.

Projects: add an entry to projects. Put stills in public/work/ and set image: "/work/name.jpg" (2.39:1 looks best). video accepts an MP4 path or a Vimeo/YouTube embed URL. Each project gets a page at /work/<slug>/.
Showreel: drop public/reel.mp4 (muted, looping, ideally under 10 MB) and public/reel-poster.jpg, then set site.reel and site.reelPoster.
Logo: the fox mark is a vector in components/Fox.tsx / public/fox.svg, traced from G:\_ADMIN\TWOTALESLOGO.png. Favicons are app/icon.png and app/apple-icon.png.

On-set screen markers (`/set`)

twotalesvfx.com/set is a tool page for production crews (not linked from the site, not indexed). It lists screen-tracking marker images, highlights the one matching the device it's opened on, and shows it full-screen in one tap. It works offline after the first visit.

To add a device, drop PNGs into public/set/markers/ named like:

markers_phone_iPhone-Pro_1179x2556.png                  # full dot grid
edge-markers_phone_iPhone-Pro_2556x1179_landscape.png   # edges only
markers_laptop_1920x1080.png                            # name is optional

Kinds: phone, tablet, laptop, monitor. Any other PNG shows under "Other". Bump CACHE in public/set/sw.js when replacing an existing image so phones fetch the new one.

On-set spill checker (`/set/spill`)

Point a phone camera (or load a photo) at a green or blue screen setup. A WebGL shader classifies every pixel against the sampled screen colour and shows spill as stripe patterns plus a plain-English verdict. It is designed for colour-blind use, so it never relies on red vs green. Views: Spill, Screen (keyed area as one flat colour), Key (rough live key with despill) and Evenness (screen brightness bands). "Pick white" sets a neutral reference, like a white balance pick. The code is in components/set/SpillChecker.tsx; thresholds are tuned on a real Alexa car-interior plate. The camera needs https.

Structure

app/
  page.tsx            home: hero, selected work, services, studio, contact
  work/page.tsx       project index
  work/[slug]/        project detail pages (statically generated)
  sitemap.ts, robots.ts
components/           Header, Footer, Hero, Frame, ProjectCard, Reveal, Timecode…
content/site.ts       all site content

Deployment is covered in DEPLOY.md.

2.7 KiB Raw Blame History