section-013
AI ready

Service Pathway

Included in the VaultGet the Vault

A photographic service chooser that keeps three client situations, the active offer, practical fit and a clear next step together in one confident studio section.

intermediate
7 more details
accessible-tabsstate-transitionprogressive-enhancementinterruptible-transitionskeyboard-navigationcontainer-queriesresponsive-section
Service Pathway - website section preview

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

Open the section in a new tab
Open Service Pathway section in new tab

About this section

Service Pathway Section helps a visitor recognise which studio engagement fits their current product situation. A compact three-choice rail sits beside the selected service, its audience, expected outcome, optional scope and specific next step. A large documentary photograph makes the work tangible without pushing the decision below the fold. The fictional Northline Works example covers a new launch, a live-product reset and an embedded senior team.

Read the full section overview

At laptop width, the choices, active offer and action remain in one composed view. On phones all three choices stay adjacent to the result, followed by the active story and a purposeful wide photo crop. Each service has plain-language copy and its own local, replaceable photograph with per-panel focal-position controls.

When scripts are unavailable, the route links point to three complete service articles in a readable stack. With enhancement, the same content becomes an accessible tabbed comparison with fast, interruptible photo and copy transitions. Reduced motion changes state instantly, while independent instances and per-instance teardown keep the section safe inside a larger page.

What's included

10 items
  • Three complete engagements with client fit, duration, outcome, native scope disclosure and a specific CTA
  • Compact situation-led selector with all three choices visible beside the changing content
  • Three coherent generated documentary photographs with local WebP files and per-panel crop controls
  • Accessible enhanced tabs with roving tabindex plus Arrow, Home and End key support
  • One shared route marker and interruptible photo and copy transitions that settle on the last selection
  • Native contact dialog with focus return, Escape close and mail-link fallback
  • Polite live announcement of the selected route and typical duration
  • Complete stacked comparison and native scope disclosures without JavaScript
  • Instant reduced-motion state changes, visible focus and native touch operation
  • Root-scoped tokens, container queries, independent instances and per-instance teardown

Perfect for

4 use cases
  • Digital product studios comparing launch, optimisation and embedded-team engagements
  • Creative agencies routing brand, campaign and retained-partner enquiries
  • Consultancies distinguishing discovery, transformation and fractional leadership offers
  • Architecture practices guiding new-build, renovation and workplace clients

How it works

3 sections

The section begins as three complete service articles with matching route links, local photographs, decision facts, native scope disclosures and mail-link calls to action. That complete reading order remains available when JavaScript or GSAP is unavailable.

With GSAP present, each section becomes its own accessible tabbed comparison. Choosing a client situation updates the visible service, moves the selection signal and brings in the related story and photograph. Repeated or reversed choices interrupt the current transition and settle on the latest request. Arrow keys, Home and End move through the choices, and a polite status message confirms the selected offer and duration. The service action opens a native contact dialog with a clear sample contact, native Escape behaviour and focus return.

Reduced-motion preferences switch every state instantly, including when the preference changes while the section is mounted. Multiple sections can run independently, and the instance API can select a service or restore the original full comparison during teardown.

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

Lighthouse, as measured

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

Accessibility
100
Best practices
100

No performance score, on purpose. That figure depends on how you deploy: your server's compression and caching, your CDN, the connection and the device doing the test, none of which the code controls. The same page can score very differently on two consecutive runs, so measure it where it will live.

Included in the Vault

Get the Vault to use this section.

The Vault includes Service Pathway, 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. Sections are available only in the Vault for now while the collection is small.

Get the Vault

Documentation

Quick Start

Load the stylesheet in your <head>:

Code snippet omitted: it ships with the download.

Copy the complete [data-service-pathway] section marked in index.html and the assets/img/ directory. Then load GSAP and the section script before </body>:

Code snippet omitted: it ships with the download.

The inline html, body styles in index.html are preview furniture outside the extractable section. There is no buyer build step.

Make It Yours

Edit the studio name, heading and introduction directly in the section. Each service has one matching selector link and article. Update its title, client fit, outcome, scope, CTA, data-label and data-duration in the ordinary HTML. Replace every reserved hello@northline.example address with your real studio contact before publishing. The CTA mailto: remains a useful no-JavaScript fallback; with JavaScript it opens the section's native contact dialog.

The three photographs are ordinary local images:

Service Shipped file Recommended replacement Alt text and crop
Launch assets/img/launch-team.webp 1536×1024 or another 3:2 landscape Edit the adjacent alt; current focus is 50% 48%
Product reset assets/img/improve-team.webp 1536×1024 or another 3:2 landscape Edit the adjacent alt; current focus is 57% 45%
Embedded team assets/img/embed-team.webp 1536×1024 or another 3:2 landscape Edit the adjacent alt; current focus is 52% 48%

To use a different photo, replace the file or edit the <img src>, width, height and alt beside that service. Set its focal point on the surrounding figure:

Code snippet omitted: it ships with the download.

The frame uses object-fit: cover. Wider or portrait sources are safe when the focal point is set deliberately; check both the desktop landscape frame and the wide mobile crop. The animation belongs to the frame and image element, so a replacement needs no timeline change or generated artwork.

All brand controls are together on .spw at the top of assets/style.css:

Code snippet omitted: it ships with the download.

Update the --spw-ink-rgb and --spw-paper-rgb companions when those solid colours change; rules and dimmed text use them. The accent is reserved for selection, focus and small signals. Recheck text and focus contrast after a rebrand.

To add, remove or reorder an engagement, change one [data-pathway-tab] link and its matching [data-pathway-panel] article in the same position. The controller derives the count and relationships from those elements; there is no duplicated JavaScript list or fixed three-item count. A single service is valid, although a static section is usually simpler for that case.

Behaviour and Options

Set the transition time in seconds on the root:

Code snippet omitted: it ships with the download.

Use 0 for instant changes. Remove the attribute to use --spw-duration from the root styles.

Every root exposes an independent API:

Code snippet omitted: it ships with the download.

For content inserted later, use window.ServicePathway.mount(root) or mountAll(container). destroyAll(container) tears down only the instances in that subtree. Repeated input interrupts the active transition and settles on the last requested service.

The native contact dialog contains a sample enquiry prompt, a mail link and a close button. Edit that markup inside [data-pathway-dialog]; it intentionally does not submit a form or imply that an enquiry was sent. Browsers without HTMLDialogElement.showModal() follow the CTA's mailto: link instead.

Accessibility and Integration

  • The example uses h2 for the section and h3 for services. Change those levels to fit the host document; the styles do not depend on heading tags.
  • With enhancement, links become an accessible tab list with unique IDs and roving focus. Arrow keys select adjacent services; Home and End select the first and last. Enter and Space activate the focused choice.
  • Mouse and touch use native link activation. Focus rings remain visible on the dark chooser and light service panel.
  • The enhanced CTA opens a native modal dialog. Focus moves to its close button, stays inside the modal, returns to the invoking CTA on close, and Escape uses the browser's native close behaviour.
  • The live region announces the selected service and typical duration without repeating the whole article.
  • Reduced motion keeps every choice operable and changes state instantly, including when the preference changes while mounted.
  • If JavaScript or GSAP is unavailable, the chooser remains a set of hash links, all complete service articles appear in a readable stack and each CTA uses its reserved example mailto: destination. Native scope disclosures still work.
  • The section has natural height, uses container queries, installs no smooth scrolling and does not intercept the host page's wheel, touch or navigation. It recomposes for a narrow host column as well as a narrow viewport.
  • Teardown removes only listeners, animations, generated accessibility IDs and inline state owned by that section, then restores the authored fallback.

Dependencies and Credits

  • GSAP 3.12+ core only; the demo pins GSAP 3.15.0.
  • No GSAP plugins, Lenis, remote fonts or third-party UI assets.
  • The three demo photographs were created with OpenAI's built-in image generation tool for this fictional example. Source prompts and compressed authoring masters are included in the source project; buyers receive the optimised local WebP files.
  • Northline Works and its engagements are sample content. Replace the claims and calls to action with information you can substantiate before publishing.

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

Your cart

Your cart is empty

The Vault £99

The Vault library, plus future additions to the library.

Or browse effects, templates or UI elements.