# 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.

## 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).