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.