---
title: Essentials — Website Design Brief V2
project: Alan / Essentials mobile barber site
version: 2.0
date: 2026-04-27
supersedes: DESIGN-BRIEF-V1.md
status: AWAITING NATHAN + ALAN APPROVAL → triggers Phase 4 build
references:
  - copy-locked-v1.md (UNCHANGED from V1)
  - assets/asset-manifest.md (UNCHANGED from V1)
  - assets/pexels-shortlist.html (UNCHANGED from V1)
  - 03-mobile-barber/brand-kit/essentials-kit-number-system.html
  - 00-profile/profile.md
---

# Essentials — Website Design Brief V2

## What changed from V1

V1's signature moment was a 6-second hero cut that fired once and then handed off to a normal scrolled page.

**V2's signature moment is one moment in two acts: the cut becomes the pole.** A horizontal hairline cuts across the viewport in the hero, then at second 5 it rotates 90° and unwraps into a brass/bone helical barber pole pinned vertically through the rest of the page. The pole is the spine the rest of the site orbits around — content gravitates to it on scroll-driven motion paths, sections compose around it instead of stacking down a column.

Everything else from V1 — copy, palette, type stack, seven sections, banned-pattern audit, technical stack, accessibility — carries forward unchanged. This brief documents only the deltas plus enough context to be self-contained for the build phase.

---

## 1. Thesis (unchanged)

> **A barber that comes to you, built around five essentials — and a website that makes a barber visit feel like the start of a film, not a transaction.**

---

## 2. Signature moment — *The Cut Becomes The Pole*

One moment, two acts. Fires once on first paint. The pole that emerges is persistent for the rest of the page.

### Act One — The Cut (0.0s → 5.0s)

Same as V1. Black viewport, single hairline draws horizontally across the viewport in Brass `#B5894A`, scissor blades draw and close, brand line mask-reveals from the cut, atmospheric photo Ken-Burns drifts behind, sub-line + CTAs render. **Difference from V1:** at 5.0s the brand line + sub-line + CTAs and photo all FADE OUT to ~12% opacity (they remain in the DOM for screen readers and SEO; visually the page goes near-black again, holding only the horizontal cut line).

### Act Two — The Cut Becomes The Pole (5.0s → 7.5s)

- **5.0–5.6s** — The horizontal cut line begins rotating around its centre point. Slow, weighted ease (`power3.inOut`).
- **5.6–6.4s** — As the line passes through 45°, brass/bone helical stripes begin unwrapping onto it via SVG mask animation. The line gains thickness — from 1px hairline to ~64px wide — as the stripes appear. The stripes are NOT red/white/blue (kitsch, banned). They are Brass `#B5894A` + Bone `#EDE6D6` against Char, set on a 14-degree diagonal that drifts upward at ~24px/s for the perpetual barber-pole illusion.
- **6.4–7.0s** — Line completes rotation to 90° (vertical), now fully formed as a tall pole that bleeds beyond the top and bottom of the viewport. Stripes settled into perpetual slow drift.
- **7.0–7.5s** — Brand line, sub-line, CTAs fade back in from 12% opacity → 100%, recomposed AROUND the pole (not centred over it). Brand line shifts to align with the pole's left edge. Scroll cue appears below.

### The screenshot test

The frozen frame at 6.5 seconds shows: a partially-rotated brass-and-bone striped line angled at ~70° across the viewport, brand line ghosting at 12% opacity behind it, atmospheric photo ghosted further back. Unmistakable, brand-specific, no other website has this.

### The "what would be lost" test

Remove Act One — the page becomes "a site with a barber pole on it" (kitsch). Remove Act Two — the page becomes "a cut animation followed by a normal scrolled page" (V1, fine but less unified). Both acts are load-bearing. The transition is the metaphor: every cut Alan makes is the start of something — the pole is what the cut becomes when it stays with you.

### Banned-pattern check

- One signature moment per page (`signature-moments.md` rule) ✓ — the cut and the pole are one moment, two acts. Total elapsed: 7.5s, then perpetual ambient.
- Not kitsch barber-pole red/white/blue ✓ — Brass + Bone only.
- Not stock cinematic footage ✓ — pure code.
- Not the "every section reveals on scroll" cascade ✓ — the pole is the only persistent motion element; rest of the page renders static and gets motion only when ScrollTrigger activates a section's specific orbital choreography.

---

## 3. Page structure — orbital around the pole

The seven sections from V1 stay. What changes is how each section composes itself relative to the pinned pole. The pole sits dead-centre of the viewport (50% from left), runs full viewport height with bleed, and is z-indexed BELOW the type but ABOVE the photo grounds. Type weaves through it.

| # | Section | Pole presence | Composition relative to pole |
|---|---|---|---|
| 01 | Hero | Born here (Act Two) | Type recomposes around the pole's left edge after Act Two completes |
| 02 | Corporate | 100% opacity | Prose left-anchored at pole edge; 3 cards orbit on a vertical SVG curve to the right of the pole, scroll-scrubbed via MotionPathPlugin |
| 03 | Five Pillars | 60% opacity, dimmed | Each pillar number "wraps" the pole — number sits on the LEFT, pillar name + line on the RIGHT, with a brass underline that crosses behind the pole connecting them. Pin-and-snap per pillar. |
| 04 | Alan portrait | 8% opacity (recedes) | Pole is barely visible — the portrait dominates left, prose right. The pole becomes a faint vertical line in the background only. |
| 05 | Single cuts | 100% opacity | Display type sized at clamp(8rem, 18vw, 18rem) bleeds across the pole — type-as-cut. The pole reads as the precise place the type was severed. |
| 06 | Kit gallery | 30% opacity, faded | Horizontal scroll-pinned track of 6 stills. Pole stays vertical at centre — the photos orbit past it horizontally. The pole reads as the still-point in a moving frame. |
| 07 | Contact | 100% opacity | Number-led form fields (01/02/03/04) align LEFT of pole, form inputs align RIGHT. Pole is the colon between question and answer. |

The pole is not always at full opacity. It dims for sections where the content needs to dominate (Section 04 portrait, Section 06 gallery), holds full strength where the structural metaphor pays off (Sections 02, 05, 07).

---

## 4. Pole specification

### Geometry

- **Width:** 64px desktop, 40px mobile
- **Height:** `100vh + 240px` (bleeds 120px beyond top and bottom of viewport)
- **Position:** `position: fixed; left: 50%; transform: translateX(-50%); top: -120px;`
- **z-index:** Sits between photo grounds (z: 0) and type (z: 10). Pole is z: 5.

### Stripe pattern

Built with CSS `repeating-linear-gradient` — no library, ~14 lines of CSS for the stripes themselves:

```css
.pole {
  background: repeating-linear-gradient(
    14deg,
    var(--brass) 0px,
    var(--brass) 18px,
    var(--bone) 18px,
    var(--bone) 36px
  );
}
```

The 14-degree angle gives the helical illusion. Stripes drift upward via:

```css
@keyframes pole-drift {
  to { background-position: 0 -72px; }
}
.pole { animation: pole-drift 8s linear infinite; }
```

Slow, perpetual, never stops. 24px/s drift speed — slower than typical kitsch barber-pole (which runs at ~80px/s and looks frantic). Slower drift reads as patient, not commercial.

### Containment

The pole sits inside an SVG `<clipPath>` shaped like a tall pill (rounded ends), so the brass/bone stripes don't have hard rectangle edges. The clip-path can also be subtly distorted at scroll milestones — at the start of Section 04, the pole's pill-shape contracts slightly inward (5%) as a cue that the section recedes. Controlled by GSAP `attr` tween on the SVG path's `d` attribute.

### Subtle treatments

- `filter: blur(0.4px)` — softens the stripe edges, prevents the moiré that diagonal CSS gradients cause on retina displays.
- `mix-blend-mode: screen` over photo grounds — the pole brightens darker grounds without losing its colour, blends naturally with atmospheric photography.
- 1px Brass border on the pill clip-path itself — defines the pole's edge against the bg.

### Motion treatments per section

```js
// Hero Act Two — cut becomes pole (one-time)
gsap.timeline({ onComplete: enableScroll })
  .to('.cut-line', { rotation: 90, ease: 'power3.inOut', duration: 1.6 })
  .to('.cut-line', { width: 64, height: '100vh+240px', ease: 'power2.out', duration: 1.0 }, '<0.4')
  .to('.pole-stripes', { opacity: 1, ease: 'power2.out', duration: 0.8 }, '<0.2');

// Section 03 (Pillars) — dim pole
ScrollTrigger.create({
  trigger: '.pillars',
  start: 'top center', end: 'bottom center',
  onEnter: () => gsap.to('.pole', { opacity: 0.6, duration: 0.6 }),
  onLeaveBack: () => gsap.to('.pole', { opacity: 1, duration: 0.6 }),
});

// Section 04 (Alan) — recede pole almost entirely
ScrollTrigger.create({
  trigger: '.alan',
  start: 'top center', end: 'bottom center',
  onEnter: () => gsap.to('.pole', { opacity: 0.08, scaleX: 0.5, duration: 1.0 }),
  onLeaveBack: () => gsap.to('.pole', { opacity: 0.6, scaleX: 1, duration: 1.0 }),
});

// Section 06 (Kit) — fade to background
ScrollTrigger.create({
  trigger: '.kit',
  start: 'top center', end: 'bottom center',
  onEnter: () => gsap.to('.pole', { opacity: 0.3, duration: 0.6 }),
  onLeaveBack: () => gsap.to('.pole', { opacity: 0.6, duration: 0.6 }),
});
```

---

## 5. Orbital content choreography

The "content gravitates around the pole" effect is built using GSAP `MotionPathPlugin` (free, in stack). Each orbiting element follows an invisible SVG path defined per section.

### Example — Section 02 corporate cards

Three cards (Half-day / Recurring / Event) orbit on a vertical Bezier curve to the right of the pole. As the user scrolls into Section 02:

```js
gsap.timeline({
  scrollTrigger: { trigger: '.corporate', start: 'top top', end: '+=200%', scrub: 0.4, pin: true }
})
  .to('.card-1', { motionPath: { path: '#orbit-curve-1', align: '#orbit-curve-1', autoRotate: false }, ease: 'none' })
  .to('.card-2', { motionPath: { path: '#orbit-curve-2', align: '#orbit-curve-2', autoRotate: false }, ease: 'none' }, '<0.2')
  .to('.card-3', { motionPath: { path: '#orbit-curve-3', align: '#orbit-curve-3', autoRotate: false }, ease: 'none' }, '<0.2');
```

The cards arc into view from off-screen-right, slow as they approach the pole's vertical, then settle adjacent to it. They never CROSS the pole — they approach it like satellites approaching a planet.

### Example — Section 05 single cuts type bleed

Display type "By appointment." sized to bleed off both edges of the viewport. As user scrolls, the type drifts horizontally — left half drifts further left, right half drifts further right — *the pole is the point at which the type was cleaved.*

```js
gsap.to('.bleed-left', {
  x: '-15vw',
  scrollTrigger: { trigger: '.single-cuts', start: 'top center', end: 'bottom center', scrub: 1 }
});
gsap.to('.bleed-right', {
  x: '+15vw',
  scrollTrigger: { trigger: '.single-cuts', start: 'top center', end: 'bottom center', scrub: 1 }
});
```

The pole stays still; the type moves. Reading order preserves left → right despite the drift.

### What's NOT in the orbital choreography

- Pillar numbers (Section 03) do NOT orbit. They snap-pin at fixed positions on either side of the pole. Snap behaviour, not curve behaviour.
- Alan portrait (Section 04) does NOT orbit. It is static. Stillness is the section's defining characteristic.
- Contact form numerals (Section 07) do NOT orbit. They render static at field positions.

Three of seven sections use orbital motion. Three are static. One is the hero. This keeps motion from saturating.

---

## 6. Updated motion direction

Per `motion-direction.md` — register stays FILM, not AD. The pole adds one new motion category: **persistent ambient motion** (the helical drift), which is novel and worth defending against the banned-patterns list.

### Banned-pattern audit on the pole

- **Marquee phrase ticker** ban: the pole is NOT a marquee. It carries no copy. The drift is not type drifting horizontally across a viewport — it's stripe drift on a vertical fixed element, an entirely different pattern.
- **Reveal cascade on every element** ban: the pole reveals once (Act Two of the signature moment), then is permanent. It does not re-reveal per section.
- **Cinematic stock footage** ban: the pole is code, not footage.
- **Same-section-shape-twice** ban: each section's relationship to the pole differs — opacity, orbital path, alignment. Adding the pole INCREASES the variation between sections, not decreases it.

### What changes about Lenis

Lenis still runs the global smooth scroll. The pole's drift is its own internal animation, decoupled from scroll. The orbital choreography reads scroll position via ScrollTrigger as before. No conflict.

### Reduced-motion behaviour

Critical accessibility note. With `prefers-reduced-motion: reduce`:
- The hero cut animation completes in 0.4s instead of 7.5s, no Ken-Burns
- The pole stripes do NOT drift (static stripes only)
- All orbital MotionPath animations become snap-to-final-position (no scrub)
- Lenis disables, native scroll resumes
- Pole opacity transitions per section still happen but at half duration

---

## 7. Type composition (mostly unchanged from V1)

Type stack: **Fraunces** display + **General Sans** body + **Commit Mono** micro. Self-hosted WOFF2.

What's new: **GSAP SplitText** (free since v3.13) handles the mask-reveal at the end of Act One. It splits the brand line into individual lines, wraps each in an `overflow:hidden` mask, and reveals them line-by-line as the cut closes. SplitText replaces V1's plan to hand-roll the mask reveal. Already in the GSAP bundle, zero extra weight.

---

## 8. Colour tokens (unchanged from V1)

| Name | Hex | Role |
|---|---|---|
| Char | `#0B0B0A` | Background |
| Bone | `#EDE6D6` | Primary text + pole stripe |
| Ash | `#7A7268` | Secondary text |
| Brass | `#B5894A` | Accent + cut line + pole stripe |
| Blade | `#A8B0B6` | Cool gray accent |
| Line | `#1F1D1B` | Hairline borders |

The pole uses Brass + Bone alternating stripes. Not red/white/blue. Not Atelier Cognac. The tourist barber pole is rejected explicitly.

---

## 9. Stack confirmation

Recon (this session) confirmed: no new dependencies needed beyond what V1 already specified.

| Tool | Role | Source | License | Already in V1 stack? |
|---|---|---|---|---|
| Astro 4+ | Framework | astro.build | MIT | ✓ |
| GSAP 3.13+ | Animation core | gsap.com | Free for commercial (Webflow, 2024) | ✓ |
| ScrollTrigger | Scroll-linked timelines | GSAP plugin | Free | ✓ |
| **MotionPathPlugin** | **Orbital paths** | **GSAP plugin** | **Free** | **NEW — confirmed needed** |
| **SplitText** | **Mask reveal on type** | **GSAP plugin** | **Free since v3.13** | **NEW — confirmed needed** |
| **DrawSVGPlugin** | **Scissor blade stroke draw** | **GSAP plugin** | **Free** | **NEW — confirmed needed** |
| Lenis | Smooth scroll | darkroomengineering/lenis | MIT, ~4KB, actively maintained | ✓ |

All three "new" plugins are bundled with GSAP — no new HTTP request, no new node_module, no new license to track. Vendor-locked to GSAP, which is fine because GSAP is now free for commercial use.

### What was considered and rejected

- **Theatre.js** — repo stale 8 months. Skip.
- **Vivus** — 3.5 years stale. SplitText/DrawSVG cover its use case. Skip.
- **Matter.js** — 90KB physics for an effect MotionPath does deterministically. Skip.
- **react-kino** — React-only, fights Astro. Skip.
- **Three.js for true 3D pole** — overkill. The 2D CSS gradient + rotation gives the helical illusion at zero weight. Skip unless V3 needs depth.
- **Splitting.js / SplitType** — both obsolete now that SplitText is free. Skip.

### What's hand-rolled

- **Barber pole** — ~80 lines of SVG + CSS + GSAP. No library. Every GitHub repo named "barber pole" was dead or wrong-domain.
- **Orbital SVG paths** — drawn by hand in `<svg>` markup, referenced by GSAP MotionPath. Each section gets its own path, ~3-6 lines of SVG each.

---

## 10. Performance budget update

Pole adds: ~80 lines CSS, ~30 lines JS for animations. Negligible — under 4KB minified.

| Metric | Budget | With V2 changes |
|---|---|---|
| LCP | <1.8s on 3G fast | Still achievable. Pole is CSS-rendered, no image. |
| Total JS payload | <90KB gzipped | GSAP core + ScrollTrigger + MotionPath + SplitText + DrawSVG = ~52KB gz. Lenis 4KB. Site code ~10KB. Total ~66KB. |
| First paint | Pole and type render before any animation begins | Hero cut animation is JS-driven but blocks no critical render — page is interactive at 0.0s, animation overlays on top |
| Reduced motion | All animations short-circuit | Tested via `prefers-reduced-motion` media query |

---

## 11. Risk areas

| Risk | Severity | Mitigation |
|---|---|---|
| Pole reads as kitsch / corny if stripes are too saturated or drift too fast | HIGH | Brass + Bone (not red/white/blue), 24px/s drift (slow), 14° angle, blur 0.4px. Test with 3 internal viewers before share. |
| Pole "fights" the photo grounds in Section 03 (rotating pillar grounds) | MEDIUM | Pole opacity drops to 60% in Section 03. Photos chosen with central composition that leaves vertical space at 50% width. |
| Section 05 type bleed across pole creates illegibility at certain widths | MEDIUM | Test at 320 / 768 / 1024 / 1440 / 1920 widths. Type bleed may need to clamp at smaller widths so it doesn't bleed off the visible viewport. |
| Cut-becomes-pole transition (Act Two) reads as glitchy if mask animation is rough | MEDIUM | Build phase budgets 1 full day on this transition. Smooth easing, sub-pixel control. |
| Reduced-motion users see no signature moment, page reads as flat | LOW | Acceptable. Reduced-motion is a small audience; static fallback is functional. |
| Mobile rendering of pole drift causes scroll jank on older phones | MEDIUM | Test on iPhone 11 / Android mid-range. Fall back to static stripes if frame rate drops below 30fps (use `requestAnimationFrame` monitoring). |

---

## 12. Files this brief expects

| File | Status | Owner |
|---|---|---|
| `04-website/copy-locked-v1.md` | ✓ Locked 2026-04-27 (V1) | Unchanged |
| `04-website/DESIGN-BRIEF-V1.md` | Superseded by this file | Archive |
| `04-website/DESIGN-BRIEF-V2.md` | ✓ This file | This session |
| `04-website/assets/asset-manifest.md` | ✓ Locked 2026-04-27 (V1) | Unchanged |
| `04-website/assets/pexels-shortlist.html` | ✓ Locked 2026-04-27 (V1) | Unchanged |
| `04-website/site/` | Pending — Phase 4 build | Next session, after V2 approval |

---

## 13. What I need from you and Alan to greenlight Phase 4 build

| # | Question | Owner |
|---|---|---|
| 1 | Sign off on V2 signature moment — cut-becomes-pole — vs revert to V1's cut-only | Alan + Nathan |
| 2 | Confirm pole stripe colours (Brass + Bone) — or argue for an alternate (e.g., Brass + Char for a more subtle pole) | Nathan |
| 3 | Confirm pole opacity per section (per §3 table — 100% / 60% / 8% / 100% / 30% / 100%) — or push different values | Nathan |
| 4 | Sign off on `copy-locked-v1.md` (or flag specific lines for v2) | Alan |
| 5 | Confirm the Five Pillars | Alan |
| 6 | Pick assets from Pexels shortlist (or commission a shoot) | Alan + Nathan |
| 7 | Brand availability sweep on `essentials.com.au` + `@essentials` handles | Nathan to action |
| 8 | Contact-form destination email | Nathan to confirm |
| 9 | Real Alan photo shoot — before launch or after soft-launch | Nathan + Alan |

---

## 14. Phase sequencing

```
Phase 1 — Profile lock                     ✓ DONE
Phase 2 — Brand kit                        ✓ DONE
Phase 3 — Business plan                    ✓ DONE
Phase 3.5 — Copy direction                 ✓ DONE (locked v1)
Phase 3.7 — DESIGN BRIEF V1                ✓ DONE (superseded)
Phase 3.8 — DESIGN BRIEF V2                ← THIS FILE
Phase 4 — Build site                       Pending — gated on V2 approval
   - Day 1: Astro scaffold + sections + pole geometry + copy slots wired
   - Day 2: Hero Act One (cut animation) + Act Two (pole birth)
   - Day 3: Per-section pole opacity transitions + orbital choreography (Sections 02, 05, 06)
   - Day 4: Type-bleed (Section 05) + Pillar snap-pin (Section 03) + form (Section 07)
   - Day 5: Polish, performance pass, reduced-motion, mobile, deploy
Phase 5 — Brand film + social              Pending — post-launch
```

---

## 15. Stop and review

V2 is the decision document. Sign off → build phase fires. The build follows this brief literally — no improvising, no re-scoping, no adding patterns not listed here.

If you want to change the direction, say so now. Once Phase 4 starts I'll burn 5 days of build time — corrections after that point cost real work.

---

*V2 — 2026-04-27. Supersedes V1. Recon report on motion stack confirmed no new dependencies needed. Awaiting Nathan + Alan review.*