Creative Agency Template

Quick Start

1. Copy the whole advertising-agency-template folder to your site.
2. Open index.html in a browser — it works immediately, no build step.
3. Replace VOLUME with your own name throughout index.html (the wordmark, <title>, the footer legal line and the mailto:/tel: links).
4. Rewrite the copy: the hero headline and lede, the six case studies, the process steps and the contact details are all real prose written for a fictional agency, not lorem ipsum. Swap in your own.
5. Repoint assets/style.css's --accent and --signal (see Brand colours, below) if cobalt and orange are not your colours.
6. Wire up the contact form's action attribute to your form handler (Formspree, Basin, Netlify Forms, or your own endpoint).

Everything is plain HTML, CSS and JavaScript. There is no bundler, no package manager and no build step — deploy the folder as static files anywhere.

Brand colours: how to make it yours

The page uses two deliberate brand colours in assets/style.css:

Code snippet omitted: it ships with the download.

--accent is the cobalt hero field, primary action and active filter colour. White on cobalt measures 6.77:1. --signal is the orange capabilities band and hero emphasis; dark ink on orange measures 5.80:1. Keeping those roles separate is what gives the page its hard editorial colour rhythm without turning every component into a different colour.

If you repaint either token, re-measure the text that sits on it. The complete contrast notes are in the header of assets/style.css.

Palette

The colour tokens all live in :root in assets/style.css. Every translucent colour on the page — hairlines, dimmed type, the marquee mask — is mixed from an -rgb triple rather than written as a literal rgba(...), which is what makes a reskin a short edit instead of a hunt.

Token	Value	Role
--ground	#F1EDDF	Warm editorial paper used through the main page
--card	#FFFBF3	Raised case-study surfaces
--sunk	#DDE3FF	Pale cobalt wash for recessed sections
--paper	#151713	Primary ink colour
--accent	#234BDB	Cobalt hero field and primary actions
--signal	#FF5A2E	Orange emphasis and capabilities band
--deep	#11130F	Contact and footer ground
--light	#F5F0E6	Type on deep surfaces

Dimmed type variants are derived from the active ink token. The full measured table for every pair, at the size it is actually used, is in the header comment at the top of assets/style.css.

Typefaces

Three faces, three jobs, loaded from Google Fonts:

• Archivo Black — display. The wide geometric hero, section titles, marquees, client names and process steps.
• Manrope — body. Every word meant to be read at reading size.
• IBM Plex Mono — labels only: eyebrows, discipline tags, stat units, form labels and legal copy.

Sections and options

Every section is found in assets/script.js by a data-* attribute on its <section> and returns early if that attribute is missing, so you can delete any section from index.html and the rest keeps working.

1. Hero + the reel — [data-hero] [data-reel] (the same section)

The hero is deliberately spare: a two-line “MAKE NOISE.” statement, one compact capabilities label, two actions and a current-campaign rail. Each display line gets its own masked SplitText reveal. Behind it, sixty photographs preload as Image objects and a pinned ScrollTrigger maps scrub progress to a canvas frame, so scroll position is the actual playhead rather than a simulated one.

The reel opens inside a large offset circular aperture against the cobalt field. As the visitor scrolls, the aperture expands to full bleed, the copy exits left and the frame sequence takes over the viewport before handing off to the orange capabilities band. The canvas stays fully transparent until every frame has decoded, so the plain <img class="reel-fallback"> sitting underneath it is what a slow connection sees in the meantime, and what a JS-off visitor sees permanently. Swap the frame count by changing FRAME_COUNT in script.js and the zero-padding in frameSrc() to match your own set; frames live in assets/frames/frame_001.jpg upward.

Case-study results below use data-count / data-count-to, with the final value written directly into the markup so it reads correctly with JavaScript disabled. The counter understands data-count-prefix, data-count-suffix and data-count-decimals, which is how values such as +9.4M render. The primary hero button carries data-magnetic, which pulls it gently toward the cursor on fine pointers; remove the attribute and it is an ordinary link.

2. Capabilities marquee — [data-marquee] (the signature)

An infinite horizontal strip of service names. script.js runs two things on the same track element and lets GSAP composite them into one transform:

• a constant, linear xPercent loop (the marquee never stops moving)
• a skewX value driven by an Observer instance reading live wheel, touch and pointer velocity at the window level, clamped to ±16°

A short idle timer watches for scrolling to stop; once it does, a second quickTo built on a CustomEase (volumeSettle, registered at the top of script.js) eases the skew back to level.

The track is written out twice, back to back — that duplication is what makes the loop from xPercent 0 to -50 invisible to wrap. If you add or remove a service name, change it in both copies in index.html or the loop will visibly jump.

3. Work — [data-work]

Six full-width campaign boards (.work-card), each with a data-tags attribute (brand-strategy, film, social, ooh, experiential) and a data-count-driven result stat. On desktop they layer at slightly offset sticky positions, like boards being added to a pitch-room wall; below 900px they return to ordinary document flow.

The discipline filter is pure CSS. A <fieldset> of radio inputs uses :has() to hide cards whose data-tags do not match the checked value — this works with script.js deleted entirely. JavaScript only adds a stagger fade to the cards left visible after a change; it never controls which cards show.

4. Process — [data-process]

Five numbered steps (.step), scroll-revealed as a group via data-reveal-group. Deliberately not pinned or scroll-scrubbed — this is a plain, disciplined reveal.

5. Client trust strip — [data-trust]

A second marquee, calmer on purpose: constant speed, no Observer, no skew, running the opposite direction from the capabilities marquee above it (a fromTo(-50, 0) loop rather than to(-50)). Swap the eight client wordmarks in index.html for your own; they are plain styled text, not logo images.

6. Contact — [data-contact]

A plain HTML <form> (name, organisation, email, project type, budget band, message) plus contact details in a <dl>. The form posts nowhere until you set its action; it keeps working with JavaScript disabled either way.

Photography

Every photograph on the page — the six case-study card images and the sixty-frame reel — is a bundled, optimised WebP/JPEG derivative with VOLUME's duotone grade baked into the pixels, never a redistributed original. Nothing here is a live hotlink.

• Case-study cards: assets/img-manifest.json lists the six source photographs (Unsplash) plus the crop, size and grade for each. Regenerate with bun scripts/build-template-assets.ts advertising-agency-template --force from the site repo, or bake your own replacements by editing the manifest and re-running it — see the script's own header comment for the full manifest shape. Output lands in assets/img/.
• The reel: assets/frames/frame_001.jpg through frame_060.jpg, sixty frames pulled from a single Pexels video clip and downsampled. To use your own footage, encode a short clip and extract frames with:

Code snippet omitted: it ships with the download.

then update FRAME_COUNT in assets/script.js if your count differs from 60, and replace assets/frames/frame_030.jpg as the <img class="reel-fallback"> source in index.html with whichever frame best represents the clip.

Credits (source photographs, before grading):

• Billboard — Unsplash
• Clapperboard — Jakob Owens on Unsplash
• Bottled drinks — Unsplash
• Transit shelter — Unsplash
• Group fitness class — Geert Pieters on Unsplash
• Whiteboard planning session — Unsplash
• Night city street (reel frames) — Pexels

All used under the Unsplash License and the Pexels License, both of which permit free commercial use without attribution; the credits above are kept for your own reference when swapping images, not because they are required.

Dependencies

Code snippet omitted: it ships with the download.

Lenis is optional. Smooth scroll is opt-out (data-smooth="off" on <html>, or ?smooth=off in the URL) and is also off automatically under prefers-reduced-motion. Delete the Lenis <script> tag and its block in script.js to drop it entirely; nothing else depends on it.

These CDN tags carry no integrity attributes on purpose — a template is deployed to a buyer's own domain, and a stale SRI hash would break their site the next time GSAP ships a patch release.

Accessibility

• No JavaScript: the whole page is a complete, readable static document. The hero's canvas never receives a frame, so its plain <img> fallback shows behind the headline in normal flow, nothing pinned; both marquees render as a single static row of the same words (no duplicated copy, no motion), the discipline filter still filters (it is CSS, not JavaScript), and every stat shows its final value.
• Reduced motion: the hero never pins or loads its frame sequence at all — the fallback photograph and the headline show immediately, both marquees freeze on one frame, the hero headline is fully visible with no mask animation, counters show their final values immediately, and nothing needed for the page to make sense is hidden behind a state only prefers-reduced-motion: no-preference reaches.
• Keyboard: every interactive element is a real <button>, <a> with an href, or form control. Campaign boards require no pointer interaction, and the discipline filter is native radio inputs, fully operable by keyboard alone.
• Blocked CDN: script.js removes the has-js class if gsap or ScrollTrigger fail to load, which un-hides everything the CSS had pre-hidden for the animated version. The page degrades to the same static document described above.

Browser support

Built on :has(), which is required for the discipline filter and has been supported in every major evergreen browser (Chrome, Edge, Firefox, Safari) since 2023. In a browser without it, the filter chips are visible but inert and every case study shows — a safe, readable fallback, not a broken one.