Studio Team Story

Quick start

Copy the complete <section class="studio-team-story"> from index.html and the assets/ directory beside your page. Load the stylesheet in the page head and the script with defer:

Code snippet omitted: it ships with the download.

The demo main, body background and body margin are preview furniture. The section uses no external library. If scripting is unavailable, both complete profiles appear in normal reading order and the selection controls stay hidden.

Make it yours

Edit the practice name, headline, introduction and contact link in the section header. Each data-profile-panel article owns one founder's role, name, biography, client touchpoints and photo focus. Keep each button's data-profile-select value paired with its article's data-profile-panel value. You can reorder pairs without changing JavaScript. Replace the example email with a destination you control and replace all fictional details before publishing.

The two-person composition is intentional. For a single person, remove the selector and second article; the remaining article stays visible. For a larger team, use a team directory pattern rather than crowding this compact story.

The brand controls sit at the top of assets/style.css on .studio-team-story: ground, ink, dark-panel text, accent, line, font roles, content width and gutter. For example, a lighter brand can change --sts-ground, --sts-ink and --sts-accent together. Recheck text and focus contrast after changing colours.

Replace the photograph

Replace assets/img/alder-fen-founders.webp with an ordinary photograph, or edit the <img> src, intrinsic width and height, and descriptive alt together. The supplied image is 1360×907. Use a similarly wide image showing both people with room around them. The frame is cropped to fit on desktop and to 4:3 on phones. Set each article's data-photo-focus to a horizontal shift, such as 0% or -25%, so its subject remains visible when selected. Adjust these values after replacing the photograph; no image generation or animation edit is required. The compressed JPEG master and prompt in assets/img-src/ are authoring inputs, not buyer files.

Behaviour and integration

The script progressively reveals the two selection buttons, shows one article and pans the photograph toward that founder. Buttons expose their state with aria-pressed and work by keyboard and touch. Repeated selections settle on the last choice. Reduced-motion preferences remove transitions. The section has no fixed host height and does not change page scrolling.

Each root initialises independently. To mount a new root after page load, call window.initStudioTeamStory(root). It returns an instance cleanup function. Call that function, or root.studioTeamStoryDestroy(), before removing the root; cleanup removes listeners and restores both articles as readable content. Reinitialising the same root first cleans up its previous instance.

The heading is an h2; change its tag to fit your page outline without changing its class. The concept caption and sample-content notice identify fictional imagery and details. Replace or remove them when you supply verified practice material.

Credits and licence

• One concept photograph generated with OpenAI image generation on 23 September 2026. It depicts fictional architects at a sample table.
• The section code is covered by the GSAP Vault licence. No image-generation service is needed to use or edit it.