# Studio Team Story > An editorial founder introduction where selecting a person changes the working story and reframes a shared studio photograph. Canonical: https://gsapvault.com/sections/studio-team-story-section Live demo: https://gsapvault.com/demos/studio-team-story-section/index.html | Property | Value | |----------|-------| | Type | section | | Tier | paid | | Price | Included only in the Vault | | Difficulty | beginner | | Plugins | Core GSAP only | | Techniques | editorial-layout, responsive-section, container-queries, accessible-selection, progressive-enhancement, photo-pan | | Uses Lenis | No | ## Lighthouse, as measured Google Lighthouse on the demo, 15 September 2026. A measurement of the demo as shipped, not a promise for your page. | Category | Score | |----------|-------| | Accessibility | 100 | | Best practices | 100 | No performance score is published: it depends on the deployment (server compression, caching, CDN, connection and device) rather than on the code, so measure it where it will live. ## Overview Alder & Fen is a fictional architecture practice led by founders Inez Calder and Rowan Pike. A shared studio photograph and concise introduction establish the practice. Select either founder to see what they lead, when clients work with them and which decisions they handle. The photograph pans toward the selected person, making the change visible without swapping in an unrelated portrait. The selection controls, active profile and image sit together on desktop. On phones the controls lead directly into the changing profile. Without JavaScript, both complete profiles remain in natural reading order. Replace the concept photograph, names, responsibilities, practice information and example contact destination with verified material. ## Features - Two-founder working story with one shared generated concept photograph - Profile selection that updates useful client touchpoints and reframes the image - Responsive layout with adjacent controls and content - No-JavaScript fallback showing both complete profiles - Keyboard and touch operable buttons with pressed-state feedback - Root-scoped brand tokens and independent instance teardown - Fictional sample details identified in the demo and README ## Use Cases - Architecture studios introducing founding partners - Small creative practices explaining how their principals share a commission - Two-person consultancies showing complementary areas of responsibility - Independent craft businesses introducing their owners ## 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 The header explains who leads the practice and offers a direct contact action. A shared worktable photograph sits beside a compact pair of founder selectors. Selecting one person brings forward their biography and the stages of a commission they handle, while the image pans to give them more focus. The script progressively activates the selector. If it does not run, both profile articles remain visible and readable. Profile copy, client touchpoints and photo-focus values live with each article in the markup; the local photograph can be replaced without editing the interaction code. ## 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 Copy the complete `
` 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 `` `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. ## 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