# Parting Word CTA

> A closing call to action where the verb of each next step, set in giant wide capitals, parts around a photograph of what happens after the click.

Canonical: https://gsapvault.com/sections/parting-word-cta-section
Live demo: https://gsapvault.com/demos/parting-word-cta-section/index.html

| Property | Value |
|----------|-------|
| Type | section |
| Tier | paid |
| Price | Included only in the Vault |
| Difficulty | intermediate |
| Plugins | Core GSAP only |
| Techniques | flip-reflow, letter-morph, clip-path-reveal, interruptible-transitions, progressive-enhancement, keyboard-navigation, container-queries, responsive-section |
| Uses Lenis | No |

## Overview

Parting Word CTA is the last band before a footer, built for the moment a visitor decides how to get in touch. It offers three next steps, one of them recommended, and says plainly what happens after each click. The verb of the active step fills the width in expanded black capitals and parts around a photograph of that outcome: CALL around the architect who answers, VISIT around a finished house on an open day, START around a homeowner photographing the room they want to change.

Beneath the word, each action has a real link, a one-line promise and three dated steps. The fictional Oriel Studio example is a Bristol architecture practice for house extensions, and the same structure suits a clinic, a school or any service with more than one way in.

The section is ordinary semantic HTML: a heading, a list of actions with their links and steps, and one local photo per action. Every action's steps stay visible at all times, so the choreography adds a preview rather than hiding anything. Replace the fictional copy, generated concept photography and example links with your own.

## Features

- Giant verb of the active next step, parted around a photograph of its outcome
- Letters the two verbs share glide to their new places while the rest roll out and in with the direction of travel
- Photo window re-measures to each photo's own proportion and travels there, with a directional clip-path wipe
- Undoing a choice mid-wipe reverses the wipe instead of starting another
- One clear primary action that the section returns to when the pointer or focus leaves
- Three dated what-happens-next steps per action, always readable, with a rail that draws for the active one
- Verb size fitted to the container so the longest word and widest photo always fit on one line
- Stacked phone layout: the word keeps its own line and the photo drops below at full width
- Complete no-JavaScript fallback and instant changes without GSAP or with reduced motion
- Independent instances, change event, programmatic go() and exact teardown

## Use Cases

- Architects, builders and design studios offering a call, a visit or an online brief
- Clinics offering a call back, a visit or online booking
- Schools and courses offering an open day, a call or an application
- Any service page that needs a confident closing call to action

## 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 action is a list item carrying its verb in data-pwc-verb, a link, a promise and an ordered list of steps. Photos and captions sit in one stage window and are matched to actions by key. Without the script the stage shows the first verb split around its photograph, and every action and step is readable.

With the script, pointing at or focusing an action runs one hand-off. The script records where every letter is on screen, lays out the new verb and frame, then animates each shared letter from its old place and lifts the others out of the flow to roll away. The photo window is positioned against the stage and travels to the frame's new size while the new photo wipes in from the side of travel and the caption rolls. Because every change starts from what is on screen, fast input never jumps, and returning to the previous action mid-wipe reverses it.

The verb size adapts to the words and photo proportions so the widest state fits the container, and adapts again on resize and when fonts load. Leaving the actions returns to the primary action after a short delay. Reduced motion makes every change instant, including when the preference changes while the page is open.

## 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

1. Copy `assets/style.css`, `assets/script.js` and `assets/img/` into your project.
2. Load the font, the stylesheet, GSAP 3.15.0 and the script:

_Code snippet omitted: it ships with the download._

3. Copy the markup between the `Parting Word CTA: copy from here` and `copy to here`
   comments in `index.html`. Everything outside the `<section class="pwc">` is demo page.

GSAP is optional: without it every change is instant.

### Make it yours

#### Text and links

- **Heading:** `.pwc__title` (an `h2`). Change the tag freely; styles use the class.
- **Note:** `.pwc__note`, beside the heading.
- **Actions:** each `<li class="pwc__action">` in `.pwc__actions` holds:
  - `data-pwc-key`: a unique key that matches its photo and caption.
  - `data-pwc-verb`: the word shown on the stage (one word reads best).
  - `data-pwc-split` (optional): how many letters sit before the photo. Default: half, rounded up.
  - `data-pwc-primary` on exactly one item: the recommended action, shown when idle.
  - the link (`.pwc__link`, `.pwc__link--primary` for the filled style), the promise and the steps list.

The example links (`#book-a-call`, `#open-house`, `#online-brief`) are placeholders.
Point them at your booking page, event page and form.

#### Photos

Each action has one photo and one caption in the stage window, matched by `data-pwc-for`:

_Code snippet omitted: it ships with the download._

- **File:** any ordinary photo. The demo files are 1200 x 800 WebP; supply at least 1200px on the long side.
- **`data-pwc-ratio`:** the width / height of the frame for that photo in the wide layout
  (0.74 is portrait, 1.45 is landscape). It is the frame shape, not the file's shape:
  the photo is cropped to fit with `object-fit: cover`.
- **Crop:** `object-position` on the image sets the focal point.
- **Alt text:** describe what the photo shows.
- The first photo loads eagerly; keep `loading="lazy"` on the others.

To swap a photo, replace the file (or `src`), adjust `object-position` and, if you
want a different frame shape, `data-pwc-ratio`. No animation code changes.

#### Adding, removing or reordering actions

Add, remove or reorder `<li class="pwc__action">` items and their matching photo and
caption. Order in the list sets the direction of travel. The `01`, `02` numbers are plain text: renumber them when you reorder. Two to four actions work
well; a single action shows its verb and photo without any preview behaviour.

The stage markup (`.pwc__part` spans around the frame) is what shows without
JavaScript. Keep its letters in step with the first action, the rest is built by
the script from `data-pwc-verb`.

#### Brand variables

All set on `.pwc`:

| Variable | Default | Use |
|---|---|---|
| `--pwc-ground` | `#ffffff` | Section background |
| `--pwc-ink` | `#0b0b0b` | Type, rules, primary button |
| `--pwc-muted` | `#555555` | Notes, labels, captions |
| `--pwc-accent` | `#8a4a12` | Active steps and focus ring |
| `--pwc-font-display` / `--pwc-font-text` | Archivo | Font roles |
| `--pwc-display-width` / `--pwc-display-weight` | `125` / `850` | Width and weight axes of the display face |
| `--pwc-max-width` / `--pwc-gutter` / `--pwc-space` | | Width, side and vertical spacing |
| `--pwc-radius` | `0px` | Photo corners |
| `--pwc-frame-height` | `2.3` | Photo height relative to the verb size |
| `--pwc-stack-ratio` | `1.2` | Photo shape on narrow screens |

Example rebrand for a clinic:

_Code snippet omitted: it ships with the download._

A narrower display face works too; the verb size is measured from the words, so
it still fits. Check contrast of your colours against the ground.

### Behaviour and options

- Pointing at or focusing an action previews it; the section returns to the primary
  action when the pointer leaves the actions and stage, or when focus leaves the list.
  On touch, tapping an action's text (not its link) previews it; links always navigate.
- `data-pwc-speed="1.2"` on `.pwc` speeds motion up (lower slows it).
- `data-pwc-return-delay="450"` sets the return delay in milliseconds.
- Event: `partingword:change` bubbles from `.pwc` with `{ index, key, verb }`.
- API: `section.partingWord.go('visit')`, `.active`, `.refresh()`, `.destroy()`.
  `window.PartingWord.mount(el)`, `.mountAll(scope)` and `.destroyAll(scope)` handle
  content added or removed later. `destroy()` restores the original markup.

### Accessibility and integration

- The stage letters are hidden from assistive technology; the heading, links,
  promises and steps carry the content. Only the active photo is exposed.
- All steps for every action are always visible; nothing is hidden behind hover.
- Keyboard: Tab through the links; focus previews each one. Focus outlines use the accent.
- Reduced motion makes every change instant, including when the setting changes on the page.
- Below a 720px section width the verb keeps its own line and the photo drops below it.
  The layout responds to the section's width, so it works in narrow columns.
- The section does not pin, scroll-jack or change page scrolling.

### Dependencies and credits

- [GSAP 3](https://gsap.com) core (optional).
- [Archivo](https://fonts.google.com/specimen/Archivo) by Omnibus-Type, SIL Open Font License.
- Photographs: generated concept images of a fictional studio and people. Oriel Studio,
  its clients and its staff are sample content, not real people or results. Replace
  them with your own photography.

## 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