# Web Design Agency Template

> A one-page site for a web design and development studio, built around a browser mockup that scroll-scrubs through the three stages of a real project: wireframe, then structure, then the finished thing. Services lead with plain price bands and timelines, and the whole page is keyed to one brand colour you swap.

Canonical: https://gsapvault.com/templates/web-design-agency-template
Live demo: https://gsapvault.com/demos/web-design-agency-template/index.html

| Property | Value |
|----------|-------|
| Type | template |
| Tier | paid |
| Price | £10 |
| Difficulty | intermediate |
| Plugins | ScrollTrigger, SplitText, DrawSVG, Flip |
| Techniques | pinning, scrub, mask-reveal, text-animation, svg-draw, flip-layout, filter, count-up, magnetic, scroll-reveal, stagger, progressive-enhancement |
| Uses Lenis | Yes |

## Overview

A production-ready one-page site for a studio that designs and builds websites for other people. It ships as a finished site for a fictional six-person studio, Northbound, with real engagement types, plain price bands, honest timelines and a week-by-week process already written, so what you open reads as a working business rather than a grid of placeholder headings.

It is built to be re-pointed. The whole page is keyed to a single brand colour: set two values, your accent and the type colour that sits on it, and every button, chip, rule, node and progress fill follows. The accent is never used as a text colour anywhere, which is what makes that swap safe for any hue rather than only for the blue it ships with. The rest of the system is a warm greige ground, a lighter card surface and one dark band, all resolved from RGB triples so there is not a single colour literal to hunt down.

The centrepiece is a browser mockup that a pinned, scrubbed timeline moves through three fidelities as you scroll: grey boxes first, then real type at real sizes, then colour and imagery last. It is the studio's own argument about how a project should run, made by showing it rather than claiming it. Around that sit four engagement types with scope lists and price bands, six project cards drawn in CSS with documented image swap points, a process rail that draws week by week, and an enquiry form that asks what a studio actually needs to know.

There is no bundled photography and none is needed: the project cards are composed mockups, so a buyer drops in their own screenshots rather than fighting a graded photo set. Every section is found by a data attribute and separately guarded, so delete the hero, the build sequence, the services, the work grid, the process or the enquiry block and the rest keeps running.

## Features

- A pinned browser mockup that scroll-scrubs through wireframe, structure and finished states, with the wireframe bars and the real type occupying the same grid cell so no line ever changes height between stages
- Keyed to one brand colour: set an accent and its paired on-accent type colour, and buttons, chips, rules, nodes, focus rings and the progress fill all follow, with the accent barred from carrying text so any hue stays legible
- Four engagement types with plain scope lists, indicative price bands and honest timelines, which is the commercial heart of the page and the part most studios have to write from scratch
- Six project cards drawn entirely in CSS, each a browser-framed mockup with a documented image swap point and a designed plate behind it, so an unloaded screenshot leaves the page looking art-directed rather than broken
- A week-by-week process rail with a DrawSVG line that draws as it enters and lit nodes marking each stage
- A work filter built on radio inputs and CSS, so it still filters with JavaScript disabled, with Flip animating the reflow and a min-height lock so nothing below the grid lurches mid-tween
- Count-up studio figures with accent tick marks, and a magnetic primary call to action on fine pointers only
- A hero whose vertical rhythm answers to viewport height as well as width, so the primary call to action stays above the fold on short laptop screens instead of falling below it
- Every measured contrast ratio written into the stylesheet header, including why the relaxed large-text exemption is deliberately not used anywhere
- Accessible throughout: a complete static document with no JavaScript, a full page under reduced motion with the mockup showing its finished state and nothing pinned, and a blocked CDN that degrades to the plain document

## Use Cases

- Web design and development studios that need a site for their own business
- Freelance designers and developers presenting services, process and rates on one page
- Small digital and branding agencies that sell scoped projects rather than retainers alone
- Any studio that wants to lead with what it sells and how it works, rather than with a portfolio wall
- Consultancies that need plain price bands and timelines on the page before the first call
- A starting point for any service business, since the palette is one brand colour and the sections are independent

## Vibe-Code Ready Setup

This template includes `START-HERE-AI.md`, a product-specific copy-paste setup prompt for Cursor, Claude Code, ChatGPT, GitHub Copilot, Windsurf, and other coding assistants. It tells the assistant to inspect the existing stack, integrate the supplied files, preserve the design, scope selectors, retain accessibility and responsive behaviour, add framework-appropriate GSAP cleanup, and report what it tested.

[How AI-assisted setup works](https://gsapvault.com/vibe-coding)

## How It Works

### Structure

One script initialises every section inside a single gsap.context, with one gsap.matchMedia whose condition sets cover coarse pointers as well as desktop, so exactly one branch runs on every device. Each block is found by a data attribute and returns early if it is absent, so deleting any section leaves the others working. The page is a complete static document before any script runs.

### The three fidelities

One mockup, one layout, three sets of hooks. Each slot is a grid cell holding both a grey wireframe bar and the real type in the same cell, so a line never changes height as the stages swap. The scrubbed timeline holds on wireframe, crosses the bars out and the type in, holds on structure, then brings colour and imagery up last. The finished state is the default in CSS and the JavaScript gating class winds it back to the wireframe, which is why it renders finished with no JavaScript and under reduced motion.

### One colour to change

The accent and the type colour that sits on it are separate tokens, because which one you need depends on your hue: a mid blue, red, green, purple, teal or pink wants white on it, while orange, yellow and lime want near-black. The accent never colours text anywhere on the page, only fills and non-text marks, so a swap cannot leave a figure or a label unreadable. Every translucent value resolves from an RGB triple, so a reskin is the token block and nothing else.

### The work filter

The filter is radio inputs and CSS selectors rather than JavaScript buttons, so it still works with scripting disabled and the control bar is never a row of dead chips. Flip only animates the reflow on top of that. The grid's height is locked for the duration of the tween and released on completion, because a Flip reflow lifts its items out of normal flow and would otherwise drop the container height and jolt everything below it.

### Without JavaScript

The gating class goes on in the head before first paint, so reveal start states apply to the first frame and nothing is painted visible and then hidden; the script removes that class when GSAP is missing, so a blocked CDN degrades to the plain document. With scripting off the mockup shows its finished state, the filter still filters, the process rail is fully drawn, and every figure shows its final value.

## Integration Preview

How this effect integrates into a page. The full documentation (examples, events, programmatic API, customization guide) ships with the download.

### Quick Start

**1. Copy the folder** and open `index.html`. That is the whole site.

**2. Delete the robots meta.** Line 6 of `index.html` carries
`<meta name="robots" content="noindex, nofollow">` so the demo does not get
indexed. Remove it or your site will not be indexed either. While you are in
`<head>`, set the `<title>` and the `<meta name="description">`.

**3. Set your brand colour.** Four tokens at the top of `assets/style.css`. This
is the change that makes the page yours more than any other, so read
[Brand colour](#brand-colour-how-to-make-it-yours) before you touch it.

**4. Replace the copy.** All of it is plain markup in `index.html`, in the order
it appears on the page: masthead, hero, build sequence, services, work, process,
contact, footer. Each section is fenced by a comment block naming it.

**5. Drop in your project screenshots.** Six commented swap points in the Work
section, one per card, with the CSS already written. See
[The work section and images](#the-work-section-and-images).

**6. Wire the form up.** It is a normal HTML `<form action="#" method="post">`.
Change the `action` to your handler (Formspree, Basin, Netlify Forms, your own
endpoint) and the method if it needs one.

**7. Ship `assets/script.min.js` instead of `assets/script.js`** if you want the
smaller file. Change the last `<script>` tag in `index.html`:

```html
<script src="assets/script.min.js"></script>
```

---

### Dependencies

```html
<script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/ScrollTrigger.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/SplitText.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/DrawSVGPlugin.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/Flip.min.js"></script>
<script src="https://unpkg.com/lenis@1.3.17/dist/lenis.min.js"></script>
```

- **GSAP 3.14.2** and **ScrollTrigger** are required. Without them the script
  removes `has-js` and stops, and you get the plain document.
- **SplitText**, **DrawSVGPlugin** and **Flip** are each optional and detected
  separately, so losing one costs you one effect rather than the page. Without
  SplitText the headline fades up as a block; without DrawSVG the process rail
  is simply already drawn; without Flip the filter still filters, it just cuts
  instead of animating.
- **Lenis 1.3.17** is optional. Delete the tag and the page works the same with
  native scroll.

#### These tags carry no `integrity` attributes, on purpose

Subresource Integrity pins a file to a hash. That is a real protection, but on a
template it is a trap: the hash is only correct for one exact build of one exact
version, and the moment you bump a version, switch CDNs, or copy a tag from
somewhere else, the browser refuses the file and your **deployed site silently
loses its JavaScript**. A stale SRI hash is a much more likely way for this page
to break than a compromised CDN is. The page is also built to survive the
failure either way: if GSAP does not arrive, the gating class comes off and
everything is readable.

**If you want the guarantee anyway, self-host.** Download the six files into
something like `assets/vendor/` and point the tags at them:

```html
<script src="assets/vendor/gsap.min.js"></script>
<script src="assets/vendor/ScrollTrigger.min.js"></script>
<!-- and so on -->
```

That removes the third-party request entirely, which is a stronger answer than
SRI, and it is what to do if your site runs under a strict Content Security
Policy. Check GSAP's licence terms for your use before you redistribute the
files. If you would rather keep the CDN and add SRI, generate the hashes
yourself against the exact files those URLs return, and regenerate them every
time you change a version.

Two rules if you extend the page:

- **Never add `anticipatePin`.** It pins early in proportion to scroll velocity,
  to cover a gap that only exists under native scroll. With Lenis pushing every
  frame into `ScrollTrigger.update` there is no gap, and the early pin is pure
  error: the mockup gets yanked upward exactly as the section arrives.
- **`data-lenis-prevent` is for vertically scrolling panels only.** Putting it
  on something that scrolls horizontally stalls the page for as long as the
  pointer is over it.

---

### Accessibility

- **No JavaScript** gets the complete document: every word readable, the mockup
  showing its finished state, the process rail fully drawn, every figure showing
  its final value, and the work filter still filtering. The gating class is
  added in `<head>` before first paint, so reveal start states apply to the
  first frame and nothing is painted visible and then hidden, and it is
  *removed* by the script if GSAP is missing.
- **A blocked CDN** is the same case as no JavaScript, deliberately. Corporate
  proxies and blockers make this common enough to design for.
- **Reduced motion** gets the full page with nothing pinned and nothing moving.
  Handled twice over: a CSS block that restores every animated start state and
  sets the two states an animation would otherwise have set, and a `matchMedia`
  branch in the script that sets the same elements directly instead of animating
  them.
- **The work filter is radio inputs**, not JavaScript buttons. It is a
  `<fieldset>` with a `<legend>`, the inputs are visually hidden but focusable,
  each has a real `<label>`, and `:focus-visible` on the input draws the ring on
  its chip. It filters with scripting off.
- **Keyboard**: a skip link to the content, a visible focus ring everywhere
  (switched to `--paper` on the dark bands, since an accent ring is not reliably
  visible on dark at every hue), no focus traps, no custom controls, and the
  magnetic button releases its offset on `blur` as well as on pointer leave, so
  it cannot be left displaced after a tab away.
- **Screen readers**: the mockup is one `role="img"` with an `aria-label`
  describing the three fidelities, and everything inside it is `aria-hidden`, so
  it is announced once as a picture rather than read out as forty fragments of
  another company's website. The decorative dots, plates and nodes are
  `aria-hidden` too. The studio facts, service meta and contact details are real
  `<dl>` elements, and the process is an ordered list.
- **Short viewports** (`max-height: 560px`, a landscape phone) skip the pin and
  get the finished mockup, rather than a pinned section with no room to hold it.
- **The narrow phone layout** hides the two non-current stage sentences in the
  build readout, so the mockup keeps the pinned screen; the current stage always
  keeps its sentence.

---

### Browser support

Current Chrome, Firefox, Safari and Edge. Two features are worth knowing about
because they degrade differently:

- **`:has()`** does the work filter. In a browser without it the chips still
  take focus and still show their checked state, but nothing is hidden, so the
  grid always shows all six projects. That is a mild loss rather than a broken
  page. Firefox gained `:has()` in 121; everything else has had it since 2022.
- **Container queries and `cqw` units** size everything inside the browser
  mockup. Without them the `cqw` lengths are invalid and dropped, so the
  mockup's type falls back to inherited sizes and its composition loses its
  proportions. The three fidelities still crossfade, and the rest of the page is
  unaffected. Same support story: Firefox 110 and up, everything else since
  2022.

Also used, all widely supported: `svh` units, `aspect-ratio`, `clamp()`, CSS
custom properties, `clip-path`, `text-wrap: balance` (purely cosmetic where it
is missing) and `:focus-visible`.

## What You Get

- `index.html`: working demo page
- `assets/script.js`: commented, readable source
- `assets/style.css`: effect styles
- `README.md`: full documentation with examples and framework integration notes
- `START-HERE-AI.md`: product-specific copy-paste prompt for AI-assisted setup
- `LICENSE.txt`: standard license terms
- Lifetime updates: re-download anytime from your library

## Get the Code

This is a premium template. The standard license costs £10 one-time and covers unlimited personal and commercial projects with no attribution required. The only restrictions: no redistribution of the code itself and no competing effect libraries.

- [Buy Web Design Agency Template](https://gsapvault.com/templates/web-design-agency-template)
- [Effects & Templates Vault (£39 one-time, best value): every current and future effect and template](https://gsapvault.com/effects)

---

From [GSAP Vault](https://gsapvault.com): production-ready GSAP animation effects. Full catalog for agents: https://gsapvault.com/llms-full.txt