# Sillage, a free creative agency website template > Website for a creative agency or production house, with a portfolio, services, team and studio. One HTML file with GSAP scroll animations, no build step, MIT license. Made by 8B (https://8b.com/). A one-page site for a Paris creative agency and production house working for fashion, beauty and fragrance brands. Black and white, uppercase, hairline-ruled tables, colour only from the photos; the width-filling wordmark carries an offset black trail that splits apart as you scroll, and one project grows from the grid into a full-screen stage. - Page: https://8b.com/templates/sillage/ - Live demo: https://8bsite.github.io/creative-agency-website-template/ - Repository (GitHub template): https://github.com/8bsite/creative-agency-website-template - Download ZIP: https://github.com/8bsite/creative-agency-website-template/archive/refs/heads/main.zip - Size: 106 KB, 22 photos (Unsplash), fonts: Instrument Sans and Mozilla Headline - Motion: GSAP 3.13.0 (ScrollTrigger); Lenis 1.3.27 smooth scroll ## Use it with an AI coding agent Download the files into the project (Windows PowerShell: `curl.exe`): ```bash curl -LO https://raw.githubusercontent.com/8bsite/creative-agency-website-template/main/index.html curl -LO https://raw.githubusercontent.com/8bsite/creative-agency-website-template/main/AGENTS.md curl -LO https://raw.githubusercontent.com/8bsite/creative-agency-website-template/main/LICENSE curl -LO https://raw.githubusercontent.com/8bsite/creative-agency-website-template/main/CREDITS.md ``` Then: ```text Read AGENTS.md, then edit index.html. Use this template as the base for a site for . Keep the layout, the motion and the single-file format; replace the brand name and wordmark, copy, projects, client names, people, photos, links and contacts, and recolour it through the CSS variables if needed. ``` Work on the downloaded file, not on a link. AGENTS.md lists what to keep and what to replace. Or copy the whole repository: `npx degit 8bsite/creative-agency-website-template my-site`. ## Design Sillage is a creative agency website template for a house that writes campaigns and shoots them: filterable portfolio, featured case, services, process, team and a studio for hire. It suits a fashion or beauty agency, a design agency, or a video production company with its own stage to rent. - Palette: #ffffff (page background, cuts through the wordmark), #0b0b0b (text, rules, buttons, dark services section), #676767 (secondary text), #cfcfcf (light rules, grey plates behind photos), #2f2f2f (rules on the dark section) - Fonts: Mozilla Headline (light, extra wide capitals filling the width), Instrument Sans (bold capital headings, small labels, body) A twelve-column grid ruled with hairlines: info line, sticky filter bar in cells, service, spec and contact rows. Each wordmark letter is cut by a thin white line, with a black copy offset behind. Photos are square-cornered in an asymmetric grid; portraits are black and white. ## Sections and motion - **Navigation** (navigation): top bar: wordmark, two groups of section links; phone menu overlay with email and phone - **Sillage, creative agency and production house I L L A G E** (hero): first screen: width-filling cut wordmark, a ruled info line, a full-bleed campaign photo (demo: SILLAGE). Motion: Smooth scrolling runs page-wide; headings slide in trailing echoes. Scrolling away, the wordmark letters fly apart, streaking black, while the photo zooms. - **Not what a brand says. What stays in the room.** (manifesto): four width-filling statement lines, a lead, two paragraphs and a ruled line of six verbs. Motion: Tied to scroll, the four width-filling statement lines slide in from alternate sides, then the paragraphs rise from a mask. - **Selected work** (works): portfolio: a ruled filter bar over an asymmetric grid of eight projects, plus a reel button. Motion: Black and grey plates slide back under each photo as you scroll; filter buttons fade non-matching projects to grey. - **The Amber Hour** (feature): one featured project on a full-screen stage: tags, giant title, client line, credits, button (demo: The Amber Hour). Motion: The stage opens from a centre column to full screen; held while you scroll, the giant title slides in from the right. - **Houses we keep company with** (clients): a looping row of client names set in the wordmark face. Motion: Client names run sideways in a continuous loop that pauses on hover or keyboard focus. - **Five rooms. One roof.** (expertise): dark section: a portrait and five ruled service rows, each with a title and tags. Motion: Service rows brighten as they cross the screen and fade as they leave, while the sticky portrait slowly zooms in. - **From first line to last frame** (method): four numbered process steps as a horizontal storyboard (demo: Write, Build, Shoot, Finish & scale). Motion: Pinned, the four steps move sideways as a storyboard, each photo panning and zooming out as its frame enters. - **Studio Sillage, Montreuil** (studio): a space for hire: large photo, text, five ruled spec rows and a booking button. Motion: The photo opens from a thin horizontal slit to full height, and the spec rows wipe in from the left. - **The people in the room** (crew): team: six portraits with names and roles, and a hiring line. Motion: Tied to scroll, six portraits start as a tilted pile mid-grid and deal out to their places. - **Tell us what should stay** (contact): contact: the main email as a width-filling line, four ruled desks with names, emails, phones, addresses - **Footer** (footer): the SILLAGE wordmark again, copyright, social links and the Design: 8B credit. Motion: Tied to scroll, the wordmark letters gather from wide apart, their black streaks shrinking to nothing. ## Good for - creative, advertising or branding agency - photo, film or production company - design or architecture studio portfolio - fashion, beauty or luxury services - a studio or venue that also rents its space ## Questions **How does the work filter behave?** Six buttons, from All to Activation, fade non-matching projects to grey without reflowing the grid. Each project lists its disciplines in the markup, so one can sit under two filters. **Is there a contact form?** No. Contact is a width-filling email plus four desks with emails, phones and addresses, and the reel, case and studio buttons open pre-addressed emails, so nothing needs a form service. ## Before publishing Replace: social preview image, favicon, email address, phone number and social media links, plus the invented demo facts (prices, dates, addresses). ## License Code MIT. Photos: Unsplash License (credits in CREDITS.md). Fonts: SIL Open Font License 1.1. The "Design: 8B" footer link is optional.