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.

On-set plate comp (/set/plate)

For shooting a foreground against a background plate that's already been shot. Load the plate (fit to width, then drag / pinch / scroll to place it), start the camera, and draw a polygon mask around where the foreground goes: the camera shows inside the mask, the plate everywhere else. "Move plate" and "Draw mask" show the camera faintly over the whole plate for lining up. The plate, its placement and the mask are remembered between visits. The code is in components/set/PlateComp.tsx.

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.