Feral Pictures

Film production company site

by Owais

Repo Live site

Description

Feral Pictures is a one-page site for a made-up film and commercial production company in Los Angeles. Everything is built from one idea, words on white slabs seen in perspective: the loader, logo, menu, hero, cursor and contact line are all slabs. The hero works like a projector, pulling one film card into the gate at a time. The interface is pure black and white, so all the colour comes from the footage.

Use it for:

a site for a production company, director or video studio
a showreel or portfolio built around video
a reference for carrying one bold typographic idea through a whole site

Workflow

Open Claude Code
Install Claude Code, open a terminal in an empty folder and run claude. Pick Claude Opus 5.5 with the /model command.
Paste the prompt
Copy the prompt on this page and send it as your first message. Claude writes the HTML, CSS and JavaScript and saves GSAP, Lenis and the fonts in the folder.
Get footage from Pexels
Download about 20 short, bright clips from Pexels (craft close ups, products, athletes, stadiums) and a music track for the reel, for example from Mixkit. Install ffmpeg so Claude can cut them into short loops with poster images.
Preview and fix
Open index.html in your browser. Watch the hero pull a few cards, open the player and check it on a phone, then ask for one fix per message.
Publish on GitHub Pages
Ask Claude to push the folder to a new GitHub repository. Then open the repository's Settings, choose Pages and deploy from the main branch.

Main prompt

Build a one-page website for Feral Pictures, a film and commercial production company in Los Angeles. Line: "Wild ideas. Real pictures."

Use plain HTML, CSS and JavaScript with GSAP ScrollTrigger and Lenis smooth scroll. Save the libraries and fonts locally so index.html works offline.

The idea: every brand element is a word on a white slab seen in perspective. Words are Anton capitals squeezed narrow to fill each slab, every slab is turned 35°, and neighbouring slabs touch to form a stepped skyline. A slab can roll to a new word.

Design: black background, white text and no accent colour; all colour comes from the footage. Headings mix heavy Inter Tight capitals with Instrument Serif italic. Square corners. Each section opens with a ruled header such as "(01) Studio".

Sections:
1. Loader: one slab counts from 000 to 100, then black blinds fold open.
2. Hero: "WE | ARE | FERAL" slabs on the left. On the right, a row of tilted film cards holds a frame, then pulls the next card in like a projector, flipping the card in the gate to show its title, client and director.
3. Studio: a showreel tile and a statement that lights up word by word on scroll.
4. Manifesto: six full-width lines with small video clips set into the gaps.
5. Index: six films in a staggered grid.
6. Directors: six portrait clips, each with a slab rolling through that director's disciplines.
7. Contact: "GOT A | STORY?" slabs and a big email link, then the footer.

Add a slab logo and menu, a cursor that becomes a "WATCH" slab over films, and a full-screen video player with sound. Use about 20 bright, natural clips with poster images that only play on hover. Make it responsive (the slabs stack on phones) and accessible.