Free creative agency website template

Live demo GitHub Download ZIP Use this template

Repository: github.com/8bsite/creative-agency-website-template · Live demo: 8bsite.github.io/creative-agency-website-template/ · MIT license

Sillage template: first screen on a phone

About this template

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.

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.

Good for:

Creative, advertising or branding agencyPhoto, film or production companyDesign or architecture studio portfolioFashion, beauty or luxury servicesA studio or venue that also rents its space

Free for personal and client work under the MIT license. In collections: one page website templates, github website templates, website templates with animation, parallax website templates.

How to use the creative agency website template

With an AI coding agent

Download the files into your project (Windows PowerShell: curl.exe):

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 give the agent this prompt:

Read AGENTS.md, then edit index.html. Use this template as the base for a site for <your agency or studio: what you do, for whom, your clients and projects, your team, where you are>. 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.

Give the agent the file, not a link. AGENTS.md says what to keep and what to replace. Step by step: templates for Claude Code.

In a terminal

npx degit 8bsite/creative-agency-website-template my-site

No code

Download the ZIP, edit index.html and drag its folder onto Netlify Drop, or click Use this template and turn on GitHub Pages.

Creative agency website design and motion

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.

Motion runs on scroll; the list of sections below says what moves in each.

What is on the page

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
First screen: width-filling cut wordmark, a ruled info line, a full-bleed campaign photo (demo: SILLAGE)
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.
Four width-filling statement lines, a lead, two paragraphs and a ruled line of six verbs
Tied to scroll, the four width-filling statement lines slide in from alternate sides, then the paragraphs rise from a mask.
Selected work
Portfolio: a ruled filter bar over an asymmetric grid of eight projects, plus a reel button
Black and grey plates slide back under each photo as you scroll; filter buttons fade non-matching projects to grey.
The Amber Hour
One featured project on a full-screen stage: tags, giant title, client line, credits, button (demo: The Amber Hour)
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
A looping row of client names set in the wordmark face
Client names run sideways in a continuous loop that pauses on hover or keyboard focus.
Five rooms. One roof.
Dark section: a portrait and five ruled service rows, each with a title and tags
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
Four numbered process steps as a horizontal storyboard (demo: Write, Build, Shoot, Finish & scale)
Pinned, the four steps move sideways as a storyboard, each photo panning and zooming out as its frame enters.
Studio Sillage, Montreuil
A space for hire: large photo, text, five ruled spec rows and a booking button
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
Team: six portraits with names and roles, and a hiring line
Tied to scroll, six portraits start as a tilted pile mid-grid and deal out to their places.
Tell us what should stay
Contact: the main email as a width-filling line, four ruled desks with names, emails, phones, addresses
Footer
The SILLAGE wordmark again, copyright, social links and the Design: 8B credit
Tied to scroll, the wordmark letters gather from wide apart, their black streaks shrinking to nothing.

What is inside

Files: index.html (106 KB, CSS and JavaScript inside), AGENTS.md, CREDITS.md, LICENSE
Motion: GSAP 3.13.0 (ScrollTrigger); Lenis 1.3.27 smooth scroll, loaded from jsDelivr. With reduced motion on, the page shows a complete static version.
Fonts: Instrument Sans and Mozilla Headline from Google Fonts (SIL Open Font License)
Photos: 22 from Unsplash (Unsplash License), loaded from Unsplash's servers and each credited in CREDITS.md
Browsers: Chrome and Edge 111+, Safari 16.2+, Firefox 113+ (it uses color-mix(), container query units, cascade layers, small/dynamic viewport units).
Replace before publishing: Social preview image, favicon, email address, phone number and social media links, plus the invented demo facts (prices, dates, addresses). AGENTS.md lists them.
License: MIT

Good to know

One page, no CMS: texts and prices are edited in the HTML, and there is no checkout or payment built in.
Request the full reel (works) lead to mailto:hello@ (subject Full reel) now; point them to your showreel URL (Vimeo, YouTube), or keep the email.
Request the case (feature) lead to mailto:hello@ (subject The Amber Hour) now; point them to the case study page or film of that project.
Book the studio (studio) lead to mailto:studio@ (subject Studio booking) now; point them to your booking form or calendar; remove the studio section if you have no space to rent.
The stencil slit in the wordmark is drawn in the page colour: while the split wordmark passes over the hero photo the slits show as thin white lines.
On phones the width-filling email line in contact is set small (about 20 px) so a long address fits.
The demo facts are invented. Photos load from Unsplash, the motion libraries from jsDelivr.

Questions about this creative agency website template

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.