← All workCampaign site · Brand launch
Dino Ghosts
A short film's poster became a scroll-driven light switch: the nursery goes dark, the Dino Ghost's skeleton glows, and the campaign asks one question.
The engagement
Dino Ghosts is the brand built around Marty Frees the Dino Ghosts, a short film written and directed by Javier Calleja Erdmann with poster and merch design by Roman Boyan. For the October 2026 Halloween campaign the brand needed a home that builds mystery around "Who freed the Dino Ghosts?", shows the merch, and turns interest into an email list ahead of the film's online premiere in November. The site is live at dinoghosts.co.
01
The challenge
The poster's whole idea is a moment: a boy flips a light switch, the room goes black, and the dinosaur under the bedsheet glows green like a glow-in-the-dark toy. The site had to make that moment happen on scroll, on phones first, from two flat frames of art rather than layered files, without WebGL or video, inside a strict payload budget. Signups had to land in the brand's own isolated contact list on the creator platform, and commerce had to be ready to switch on later without a single price or checkout shipping now.
02
The approach
We cut nine transparent layers from the two textless masters with feathered masks placed by eye on gridded crops, inpainted the base only under each layer's opaque core, and proved the uncompressed layers composite back to the master pixel for pixel. GSAP ScrollTrigger drives the reach, a time-based flip plays the flicker, blackout and glow, and life loops keep the dark scene breathing; reduced-motion visitors get a tap-to-flip crossfade. Signup posts to two SECURITY DEFINER functions through a dedicated restricted database role with per-IP rate limiting and a pinned private CA. A server-owned catalog and a dormant checkout action ship with no keys, proven offline. The executable gate checks the prerendered routes, HTML size, layer budgets, palette drift, spelling, fonts by pixels, the hero's motion in headless Chromium, and that an empty form sends no request.
9hero layers cut from two frames
110 KBlit hero payload at phone width
0prices or checkout buttons shipped
03
Scope of work
- Scroll-driven light-switch hero built from Roman Boyan's lit and glow posters, mobile-first, with a reduced-motion path
- Storybook brand system sampled from the poster: cream ground, crayon green, title brown, glow greens; the title lockup kept as the designer's own art
- Coming-soon merch lookbook with a per-item Notify me that tags interest without taking money
- Signup into the Dino Ghosts contact list on the Euphemios creator platform through a restricted database role
- Stripe-ready catalog and checkout action kept dormant until the brand's entity exists
- Credits and privacy pages, clean URLs, review alias, and the live domain on Cloudflare DNS
04
What we delivered
- dinoghosts.co live on Vercel with www redirecting to the apex
- A nine-layer hero asset pipeline that re-cuts from the masters and self-verifies registration and recomposition
- A signup pipeline that stores consent, 13+ confirmation, merch interests and UTM source in the brand's own list
- A dormant commerce layer with offline tests proving nothing can be bought until keys exist
- An executable check.sh run by CI on every push
- 01
The poster's light-switch moment now plays on scroll or tap on any phone, within a first-view budget well under the 1.5 MB target.
- 02
Every signup lands in an isolated Dino Ghosts list with the demand signal per merch item the first drop will be sized from.
- 03
The brand can turn on checkout later by adding keys, with no redesign.
- 04
Roman's layered files, if they arrive, drop into the same nine ids without touching the site code.
Built with
- Next.js 16
- TypeScript
- GSAP ScrollTrigger
- AVIF/WebP layer pipeline
- Postgres (Supabase) restricted role
- Playwright gates
- Vercel
- Cloudflare DNS