# Separator Ideas — Section Transitions for Prompt Victoria Site

> All entries below are `[drafts]` by the developer. None of these have been
> approved or briefed by the client yet — this is a menu for Rian / Tessa to
> react to. Pick 1–3 favourites and we'll build them out as mockups like
> `wave.html`.
>
> Each idea is scored on three axes:
>
> - **Feel** — what the separator evokes on the page
> - **Motion** — static, subtle loop, or active animation
> - **Build cost** — S (quick), M (medium), L (heavier / asset needs)
>
> Cultural note: anything referencing **Coast Salish / Lekwungen visual
> language** is intentionally excluded from this list. If we ever want to
> incorporate Indigenous design it must go through VIATEC → a local Coast
> Salish artist as a paid commission. Not something we invent in HTML.

---

## A. Coastal Victoria (ocean, harbour, island)

### 1. Ocean wave (baseline — already built as `wave.html`)
- **Feel:** warm, welcoming, "Vancouver Island"
- **Motion:** slow horizontal drift loop
- **Build cost:** S
- Already prototyped. Included here for comparison.

### 2. Shoreline / tideline
A very thin wavy line with tiny "foam" dots scattered above it — like the edge where surf meets wet sand. Much more restrained than a full wave.
- **Feel:** quiet, observant, coastal
- **Motion:** foam dots fade in/out gently; line is static
- **Build cost:** S

### 3. Morning fog band
A blurred horizontal band that fades top-to-bottom with a subtle grain texture. Evokes Inner Harbour fog at dawn. No shapes, just atmosphere.
- **Feel:** calm, cinematic, "Pacific Northwest"
- **Motion:** none, or very slow opacity shift
- **Build cost:** S

### 4. Horizon line with sun
A thin horizontal line with a small circular sun/moon glow somewhere along it. Think "island at sunset." Minimal but evocative.
- **Feel:** grounded, contemplative
- **Motion:** optional slow sun drift left→right over many seconds
- **Build cost:** S

### 5. Lighthouse beam sweep
A dark horizontal band with a single soft light cone that sweeps across once every ~12 seconds. Reference: Fisgard Lighthouse.
- **Feel:** signalling, "finding direction," a little dramatic
- **Motion:** looping sweep
- **Build cost:** M

### 6. Ferry / float plane trail
A thin dashed arc crossing the separator band with a small icon (plane or ferry) drifting along it. A nod to how people get to Victoria.
- **Feel:** journey, arrival, literal "getting there"
- **Motion:** slow looping travel
- **Build cost:** M

### 7. Orca pod silhouette
2–4 small orca silhouettes spaced across, surfacing and diving subtly. Only works if we're comfortable with the motif (risk: feels stock-touristy if overdone).
- **Feel:** playful, local, "Salish Sea"
- **Motion:** gentle vertical bob
- **Build cost:** M

### 8. Nautical rope
A braided rope graphic running edge-to-edge. Static, textural. Works well if the page already feels image-heavy.
- **Feel:** tactile, heritage, slightly Britannia-nautical
- **Motion:** static
- **Build cost:** S

### 9. Topographic contour lines
Horizontal topo-map contour lines suggesting Vancouver Island's ridges (Malahat, Mount Douglas). Very tech-adjacent aesthetic — looks like a map layer.
- **Feel:** intelligent, "the terrain of AI," ties to the conference theme
- **Motion:** static, or lines draw on once when scrolled into view
- **Build cost:** M

---

## B. Pacific Northwest nature (forest, sky)

### 10. Douglas fir / cedar treeline
A silhouette row of evergreens along the separator. Read left-to-right it looks like a skyline of the Island's forests.
- **Feel:** grounded, PNW, organic
- **Motion:** static, or a *very* subtle sway
- **Build cost:** M

### 11. Falling rain streaks
Short diagonal lines drifting down across the separator band. A gentle nod to Victoria's coastal drizzle.
- **Feel:** atmospheric, understated
- **Motion:** continuous loop
- **Build cost:** S
- Risk: on a dark hero this looks great; on a light section below it looks like static

### 12. Starfield / constellation
A thin dark band with small dots — some connected by faint lines to form a constellation. Could be the Big Dipper (visible over Victoria). Also doubles as a "neural network" reference.
- **Feel:** cosmic, thoughtful, "clarity"
- **Motion:** dots twinkle randomly
- **Build cost:** M

### 13. Abalone / iridescent shimmer
A gradient band that shifts hue slowly across the brand palette — evokes the inside of a PNW abalone shell (a recognised coastal material without being Indigenous-specific).
- **Feel:** premium, organic, iridescent
- **Motion:** slow hue drift
- **Build cost:** S

---

## C. Tech / AI (on-brand for the conference)

### 14. Neural network nodes
Dots connected by thin lines forming a network graph. Nodes pulse subtly as if data is flowing along the edges.
- **Feel:** literal AI/ML signifier, on-theme
- **Motion:** pulses along edges
- **Build cost:** M
- Risk: feels generic "AI stock imagery" if not styled well

### 15. Terminal prompt cursor line
A horizontal line styled like a terminal — `~/victoria $ █` — with a blinking cursor. Ties directly to the event name "Prompt Victoria."
- **Feel:** witty, insider, very on-brand for the name
- **Motion:** cursor blink
- **Build cost:** S
- This one is a strong candidate on theme alone.

### 16. Binary / token stream
A horizontal stream of 1s and 0s, or short tokens like `> prompt  > response  > direction` drifting sideways.
- **Feel:** literal, a bit on-the-nose
- **Motion:** marquee drift
- **Build cost:** S

### 17. Circuit board traces
PCB-style right-angled traces with small solder dots. Feels like a motherboard slice.
- **Feel:** engineering, hardware-adjacent
- **Motion:** optional "current pulse" moving along one trace
- **Build cost:** M

### 18. Audio / sound waveform
A flat baseline that spikes into a waveform across the width — like a podcast visualiser. Nods to "conversations" as the core of the conference.
- **Feel:** conversation, speakers, voice
- **Motion:** bars rise/fall in a slow loop
- **Build cost:** M

### 19. Data grid fade
A grid of small squares (pixels) that fades from dense/dark at the top to sparse/transparent at the bottom. Reads as "data dissolving into the page."
- **Feel:** technical, minimal
- **Motion:** individual cells fade in/out randomly
- **Build cost:** S

---

## D. Conceptual — "From Disruption to Direction"

### 20. Compass rose line
A long thin horizontal line with tiny N / E / S / W marks at intervals, plus a small compass rose centered. Ties directly to the tagline *Direction*.
- **Feel:** navigational, purposeful, tagline-resonant
- **Motion:** compass needle twitches, settles
- **Build cost:** M
- Strong thematic fit.

### 21. Directional arrow trail
A single arrow that travels left→right slowly, leaving a faint fading trail behind it. Literal "moving toward direction."
- **Feel:** forward-motion, confident
- **Motion:** loop
- **Build cost:** S

### 22. Path / trail dashes
A dashed horizontal line with a slightly curved path — like a hiker's trail on a map. Reinforces the journey framing.
- **Feel:** journey, step-by-step
- **Motion:** dashes reveal in sequence (once per scroll)
- **Build cost:** S

### 23. Morse code line
Dots and dashes spelling out something relevant: `PROMPT`, `VICTORIA`, or `DIRECTION`. Almost invisible unless you look closely.
- **Feel:** clever, signalling, rewards curiosity
- **Motion:** static, or gently pulses
- **Build cost:** S
- A nice easter egg for the right audience.

---

## E. Minimal / safe defaults

### 24. Gradient band (no shape)
A simple coloured band that fades from the hero's bottom colour into the next section's top colour. The least-is-more option.
- **Feel:** clean, modern, anonymous
- **Motion:** none
- **Build cost:** S
- Fallback if we want zero personality, max safety.

### 25. Diagonal slant
A single hard diagonal cut between sections, using the brand gradient. Feels architectural and confident.
- **Feel:** bold, editorial, "magazine"
- **Motion:** none
- **Build cost:** S

### 26. Dotted / pebble gradient
A row of small dots that vary in size and opacity left-to-right — like a scatter of beach pebbles or a halftone. Texture without a "shape."
- **Feel:** organic, textural
- **Motion:** dots fade in/out subtly
- **Build cost:** S

### 27. Hand-drawn wavy underline
A single wobbly line drawn as if by pen — deliberately *not* a perfect SVG wave. Fights the "AI-generated look" warning from CLAUDE.md directly.
- **Feel:** human, editorial, warm
- **Motion:** static, or line draws in on scroll
- **Build cost:** S

### 28. Film grain / noise band
A thin band of static grain texture. Looks like the noise on a photograph or an old film print.
- **Feel:** analog, editorial, "photography forward"
- **Motion:** subtle grain animation
- **Build cost:** S
- Pairs well with the photo-rich direction in the Planning doc.

---

## F. Hybrid ideas (combine two of the above)

### 29. Contour + horizon (9 + 4)
Topographic contour lines with a single sun/moon circle placed along one contour. Lands as "the Island at dawn, rendered as data."
- **Feel:** thoughtful, layered
- **Build cost:** M

### 30. Terminal prompt + compass marks (15 + 20)
`~/victoria $ find direction █` — the prompt reads as both a real shell command and the event tagline. Arguably the most on-brand idea in this list.
- **Feel:** very on-theme, memorable
- **Build cost:** S

---

## My top picks (if you want a starting shortlist)

1. **#15 Terminal prompt cursor line** — directly references the event name, warm and witty
2. **#20 Compass rose line** — directly references the tagline "From Disruption to Direction"
3. **#9 Topographic contour lines** — Victoria-specific and tech-legible at once
4. **#3 Morning fog band** — quiet, photo-friendly, complements image-heavy sections
5. **#27 Hand-drawn wavy underline** — explicitly anti-"AI-generated feel," matches the second note in CLAUDE.md

Happy to prototype any of these as standalone HTML files the same way `wave.html` was built — say the number and I'll go.