# Colour Chapter Showcase

> A photography-led editorial section whose entire canvas changes colour as you scroll between three generously composed chapters.

Canonical: https://gsapvault.com/sections/colour-chapter-showcase-section
Live demo: https://gsapvault.com/demos/colour-chapter-showcase-section/index.html

| Property | Value |
|----------|-------|
| Type | section |
| Tier | paid |
| Price | Included only in the Vault |
| Difficulty | intermediate |
| Plugins | ScrollTrigger |
| Techniques | scroll-colour, editorial-layout, container-queries, responsive-section |
| Uses Lenis | No |

## Lighthouse, as measured

Google Lighthouse on the demo, 15 September 2026. A measurement of the demo as shipped, not a promise for your page.

| Category | Score |
|----------|-------|
| Accessibility | 100 |
| Best practices | 100 |

No performance score is published: it depends on the deployment (server compression, caching, CDN, connection and device) rather than on the code, so measure it where it will live.

## Overview

Give a visual story room to unfold. Colour Chapter Showcase combines a large typographic introduction, three photography-led chapters and a closing editorial line. The whole section moves through peach, lilac and pale green as each new chapter arrives.

Common Form, a fictional architectural journal, is the worked example. Asymmetrical image spreads, short observations and carefully cropped photographs make a finished composition before any animation runs. It also suits collections, destination guides and project stories through ordinary content edits.

The colour stays inside the section. Native scrolling, root-scoped brand controls and container-aware layouts let it live in an existing page without adopting another site's navigation or scroll system.

## Features

- Continuous scroll-driven canvas colour with immediate reversal
- Three complete editorial chapters with photography, captions and narrative
- Oversized introduction and varied image proportions
- Container-aware desktop, phone and narrow-column layouts
- Static chapter colours under reduced motion, missing dependencies and no JavaScript
- Root-scoped palette, typography, width and spacing controls
- Independent instances with explicit mounting and teardown
- Local optimised photography and system fonts

## Use Cases

- Design and architecture journals
- Cultural exhibition stories
- Product collection features
- Travel and destination guides
- Creative portfolio narratives

## Vibe-Code Ready Setup

This website section 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

Each chapter declares a local colour in CSS. A section-scoped ScrollTrigger maps native scrolling to the chapter boundaries and blends the section background as the next chapter enters the viewport. The content remains in normal document flow throughout.

Reduced motion and dependency fallbacks preserve each chapter's static colour and all text and imagery. Instance teardown restores that base document without touching unrelated page animation.

## Documentation

How this website section works and how it goes into a page. The reference you use once you own the files (worked examples, events, the programmatic API, the class list) ships with the download.

### Quick start

Open `index.html` through a local web server, or upload the folder to your hosting. No build step is required. GSAP and ScrollTrigger load from their CDN; photography is bundled locally and fonts use the system Arial/Helvetica stack.

To embed it, copy the marked `SECTION START` through `SECTION END` root into your page. Load `assets/style.css`, then GSAP, ScrollTrigger and `assets/script.js` once. Update relative paths to match your file structure. Omit the preview's `body { margin: 0; }` rule and its outer `main` if your page already has one.

_Code snippet omitted: it ships with the download._

### Make it yours

- **Copy:** edit the mast, `.cc-title`, chapter `.cc-heading`, `.cc-copy`, `.cc-note` and captions directly in HTML. The section opens with `h2`; chapters use `h3`. Change the tags to fit your page hierarchy; styling uses classes.
- **Photography:** replace the three `assets/img/*.webp` files or their `src` paths. Update alt text, captions and intrinsic width/height together. The first photograph is a wide landscape, the second almost square/portrait, and the last wide landscape. Images keep their natural aspect ratio.
- **Brand:** all controls are at `.colour-chapters` in the stylesheet: `--cc-peach`, `--cc-lilac`, `--cc-green`, `--cc-ink`, the two font roles, `--cc-width`, `--cc-gutter`, `--cc-space`, and `--cc-corner`. Keep dark text against light chapter colours, including every intermediate blend.
- **Rebrand example:** turn the essay into a three-stop coastal guide. Replace the title with “Three places to lose track of time”, chapter headings with place names, photographs with landscapes and colours with sand, mist blue and pale sage. No timeline edits are required.

Each article sets `--cc-chapter` to its palette token. Add or remove `.cc-chapter` articles using the existing content pattern; the controller measures actual chapter positions. One chapter simply stays static. After editing colours on a mounted section, call `mountColourChapters(root)` to read them again.

### Behaviour and lifecycle

No pinning, smooth-scroll library, wheel interception or global colour changes. The background changes from when the next chapter is near 80% of the viewport height to when its top reaches 25%. It tracks scroll position directly, without a trailing catch-up animation. Text and photographs do not move independently.

Set `data-colour-motion="off"` on a root before mounting to retain the static chapter backgrounds. Spacing controls the reading distance; the script derives transition positions from the content rather than a fixed page height.

_Code snippet omitted: it ships with the download._

Two roots operate independently and can override their tokens through separate root styles. Destroy a root before removing it in a framework route. Teardown reverts its GSAP/media context and disconnects its observer; it does not kill other animations. Resizing refreshes the section's measurements. Loading the script twice reinitialises existing roots rather than stacking triggers.

### Accessibility and integration

The section uses native document scrolling, so keyboard scrolling and touch remain available. There are no custom controls or focus traps. Reduced motion, including changes while mounted, leaves static coloured chapters. No JavaScript or blocked animation dependencies also leaves the full readable document. Nothing is pre-hidden.

The root can fill a page or a narrow column; below a 760px container width the composition stacks. No sticky ancestors, fixed heights or scroll policy changes are required. Keep the section in the ordinary document scroller; custom nested scrollers need an explicit ScrollTrigger `scroller` integration. The demo's opening label is not a site navigation bar.

### Dependencies and credits

Built with GSAP 3.15.0 and ScrollTrigger. GSAP's licence applies to the libraries; see https://gsap.com/licensing/.

Bundled photographs are cropped, resized and graded WebP derivatives of the following Unsplash sources, used as editorial examples under the [Unsplash licence](https://unsplash.com/license). Do not resell the photos as standalone images or build a competing image library. Replace the imagery for a client's actual projects; the journal does not claim to have designed the pictured buildings.

- Terracotta curves: https://images.unsplash.com/photo-1486718448742-163732cd1544
- White gallery and skylight: https://images.unsplash.com/photo-1439337153520-7082a56a81f4
- Curved facade: https://images.unsplash.com/photo-1493397212122-2b85dda8106b

There is no theme picker, external font, backend, or build-only runtime in the delivered section.

## 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 website section is included only in the Vault, for existing and new owners. It is not sold individually. The standard licence covers unlimited personal and commercial projects; bundled assets retain their own licence requirements.

- [Get the Vault](https://gsapvault.com/pricing)
- [The Vault (£99 one-time, best value): every collection in the Vault library, plus future items added to those collections](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