Marlow

Film studio portfolio, ring hero

by Owais

Repo Live site

Description

Marlow is a one-page portfolio for a made-up film studio that makes commercials, fashion films and music videos. Twelve films orbit a giant "Marlow®" wordmark on a tilted ring, passing under and over the word; hover one to see its on-set shot, or drag to spin the ring. Below are a column of every film, a studio statement with small set photos inside the sentence, and a footer of prints you can throw around.

Use it for:

a film, video or photography studio portfolio
a showreel site for a director or production company
a dark and light editorial template with one striking hero

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 whole site in one index.html.
Pick photos on Pexels
Choose two photos per film from Pexels, a final frame and a behind-the-scenes shot, all in warm studio light. Ask Claude to convert them to WebP and to draw the client logos from Simple Icons.
Preview and fix
Ask Claude to start a local preview. Drag the ring, open a few films and switch between dark and light, 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 portfolio for Marlow, an independent film studio in Los Angeles, London and Mexico City that makes commercials, fashion films and music videos for beauty, fashion and music clients.

Use one index.html with inline CSS and JavaScript, Lenis smooth scroll and the Geist variable font. No framework, no build step.

Design: dark by default (black, off-white and two greys) with a Dark / Light toggle that reveals the new theme in a circle from the click. Titles at weight 900 and small uppercase captions. Images are always sharp rectangles, never rounded. A small cursor dot grows into a label such as "Drag" or "Open".

Content: 12 films, each with a final frame and an on-set photo, all in one warm, art-directed look: perfume still lifes, gowns on seamless backdrops, colour-lit portraits and behind-the-scenes shots.

Sections:
1. Header: Marlow, Work, Studio, Contact and the theme toggle, spread across the top.
2. Hero: the 12 film thumbnails on a tilted ring around a giant "Marlow®" wordmark. Films behind the ring pass under the word and films in front pass over it. It spins slowly and can be dragged and thrown; hovering a film pauses it and swaps to its on-set photo with a caption.
3. Intro: a statement whose words light up as you scroll, and a marquee of client logos.
4. Selected work: all 12 films in one centred column at their own frame shapes, each with a big title over the image.
5. Studio: a sentence with small set photos inside it ("We direct [photo], light [photo], shoot [photo] and style [photo] every film ourselves"), then services, directors and awards.
6. Footer: contact emails, set photo prints you can drag and throw, a giant "Marlow®" whose letters get thinner near the cursor, and live clocks for the three cities.

Clicking a film opens a full-screen project sheet with the title, the final frame, a short paragraph, credits and the on-set photo. Check it on desktop and phone in both themes.