section-002
AI ready

Product Feature Story

Included in the Vault Get the Vault
Open in new tab

An editorial product feature section where a numbered chapter rail changes the inspected photography, technical facts and substantial story together with a refined, interruptible transition.

intermediate
5 more details
tabsstate-transitionstaggerresponsive-layoutkeyboard-navigation

Released

About this section

A complete product feature story for tangible objects: a large photographic plate, numbered chapter navigation, measured technical facts and substantial editorial copy arranged as one composed section. The worked example is a precision listening system, but the ordinary edit points suit furniture, bicycles, lighting and other products whose design deserves explanation.

Read the full section overview

On desktop, the active photograph and article sit on either side of a narrow index. On mobile, the controls move directly above the image they change. Each chapter replaces the image, caption, facts and narrative as one state; GSAP gives the incoming plate a clipped settle and stages the copy behind it. Repeated input resolves to the last requested chapter without leaving mixed states.

With no JavaScript or a blocked dependency, all three feature stories remain visible as stacked semantic articles. Reduced motion changes chapters instantly. Every instance owns its IDs, listeners, media query and timeline, and its public destroy method restores the readable fallback without touching another section.

Product Feature Story - website section preview

What's included

9 items
  • Complete editorial product composition with large photography, navigation, facts and long-form copy
  • Three coordinated chapters replace image, caption, specifications and narrative together
  • Asymmetrical desktop spread with the numbered chapter rail between photograph and article
  • Mobile controls sit immediately above the content they affect
  • Interruptible GSAP plate and copy transition always settles on the last requested chapter
  • Arrow, Home and End keyboard navigation with native tab semantics and visible focus
  • Reduced-motion instant changes and a complete stacked no-JavaScript fallback
  • Root-scoped variables, local IDs, independent instances and a documented teardown API
  • Bundled, inspected Pexels photography with editable crops and descriptive alternative text

Perfect for

4 use cases
  • Audio and consumer electronics product pages
  • Furniture and lighting collections with material stories
  • Performance bicycles and outdoor equipment
  • Industrial design launches that need detail beyond a hero

How it works

1 section

Each section root discovers its own tab and panel pairs and assigns instance-safe ARIA IDs. Selecting a chapter updates the accessibility state immediately, clears any interrupted visual state, then animates the requested image and story from a known baseline. GSAP matchMedia switches live between the motion and reduced-motion paths. The default CSS presents every article in document flow, while the enhanced class layers matching image and story regions into the designed spread. Destroying an instance removes its IDs, listeners and enhanced state, returning the complete stacked document.

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

Lighthouse, as measured

Google Lighthouse on this website section's demo, from the latest scan. 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.

Product Feature Story comes with the Vault.

Each product gives you the HTML, CSS and JavaScript source, the full documentation and an AI setup prompt, licensed for 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.

£99 Get the Vault See what you get

One payment, over 300 products, and future additions to the library.

Documentation

Quick start

Include assets/style.css, GSAP 3.12+ and assets/script.js, then copy the complete <section class="pfs-section" data-product-feature-story> from index.html. The preview opens directly on that root; the document wrapper is not part of the product. Replace the example specification links with your own destinations.

In your downloadThe working code for this step, in index.html.

The script mounts every matching root on DOM ready. To mount content added later, call ProductFeatureStory.mount(sectionElement).

Make it yours

Edit the kicker, h2, deck and the three .pfs-panel articles in the HTML. Each panel owns its image, alt text, caption, heading, paragraphs, fact list and link, so a content change does not require editing JavaScript. Keep the data-pfs-tab and data-pfs-panel numbers paired.

Replace the bundled files in assets/img/ or update each src, intrinsic width/height, alt, and its scoped object-position. The desktop plate is 4:5; the container query changes it to 5:4 in narrow hosts. Faces and focal points may need a separate mobile object-position.

Rebrand from the variables together at the top of .pfs-section in assets/style.css: graphite ground, chalk ink, signal accent, raised paper, font roles, maximum width, spacing and image radius. All translucent rules derive from the ink RGB triple. Check text and control contrast again after changing colours.

Behaviour

data-duration="0.62" on the section root controls the plate transition in seconds. The script exposes the instance at sectionElement.productFeatureStory:

In your downloadThe working code for this step, in script.js.

destroy() removes only that instance's listeners, generated IDs, media query and animation, then restores the complete stacked fallback. Mount the same root again with ProductFeatureStory.mount(sectionElement).

Accessibility and integration

The feature index uses the ARIA tabs pattern. Arrow keys move between chapters; Home and End move to the first and last. Focus remains visible, touch uses ordinary button taps, and reduced motion changes the complete state immediately. With no JavaScript or missing GSAP, the controls stay hidden and all stories remain readable in document order.

The shipped heading is an h2; change the tag to fit the host document without changing any selector. The section is container-aware and needs no full-width wrapper, pinning, smooth scrolling or fixed height. Links are examples and should point to real destinations.

Dependencies and credits

The Aster A7 name and product claims are fictional demonstration copy.

Also in your download: the full source, worked examples, the events and programmatic API, and the class reference.

Included in the Vault Get the Vault