twotalesanimation
ca122ad723
Deploy / deploy (push) Successful in 30s
- 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>
55 lines
2.1 KiB
Markdown
55 lines
2.1 KiB
Markdown
# 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.
|
|
|
|
## 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).
|