Files

T

Deploy / deploy (push) Successful in 30s

Details

Add /set: on-set screen tracking markers for crews

- Unlinked, noindex page listing marker PNGs from public/set/markers
  (discovered at build time; filenames encode device/resolution/orientation)
- Detects the current screen and offers the closest match first
- One-tap full-screen viewer: wake lock, hidden controls, full grid/edges
  toggle, fill vs fit by aspect, back button closes, deep links via hash
- Offline service worker + home-screen manifest for iPhone full screen
- Marketing chrome moved into an (site) route group so /set has none

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

2026-10-06 09:11:36 +02:00

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

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.1 KiB Raw Blame History

twotalesvfx.com

Editing content

On-set screen markers (/set)

Structure

2.1 KiB

Raw Blame History

On-set screen markers (`/set`)