# twotalesvfx.com

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

```bash
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`](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](DEPLOY.md).