section-023
AI ready

Parting Word CTA

Vault only: not sold separatelyGet the Vault

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.

intermediate
8 more details
flip-reflowletter-morphclip-path-revealinterruptible-transitionsprogressive-enhancementkeyboard-navigationcontainer-queriesresponsive-section

This section reads better at your own screen size than in the frame below:

Open the section in a new tab
Open Parting Word CTA section in new tab

Released

About this section

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.

Read the full section overview

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.

Parting Word CTA - website section preview

What's included

10 items
  • 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

Perfect for

4 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

How it works

3 sections

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.

Difficulty Intermediate
Includes HTML + JS + CSS source, documentation, AI setup prompt, lifetime updates

Vault only

Get the Vault to use this section.

The Vault includes Parting Word CTA, the HTML, CSS and JavaScript source, the full documentation, an AI setup prompt for your editor, and every update we ship to it. Standard license: unlimited personal and commercial projects. Every paid product is tested for desktop and mobile layouts, reduced-motion handling, animation cleanup and keyboard controls wherever there is something to operate. Sections are available only in the Vault for now while the collection is small.

Get the Vault

Documentation

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.

  1. 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 core (optional).
  • 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.

Worked examples, the events and programmatic API, and the class reference ship with the download, alongside the full source.