twotalesanimation
e6658eae3d
The worker isn't controlling the page on the first visit, so warm-up fetches bypassed it and no images were cached. The page now writes markers, its own JS/CSS/fonts and /set/ straight into the cache and only then shows 'Works offline'. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
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 inpublic/work/and setimage: "/work/name.jpg"(2.39:1 looks best).videoaccepts 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) andpublic/reel-poster.jpg, then setsite.reelandsite.reelPoster. - Logo: the fox mark is a vector in
components/Fox.tsx/public/fox.svg, traced fromG:\_ADMIN\TWOTALESLOGO.png. Favicons areapp/icon.pngandapp/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.