# Image-led Hero > A composed editorial hero that lets one strong photograph carry the setting, while a large crossing headline, practical stay details and a direct booking action give it purpose. Canonical: https://gsapvault.com/sections/image-led-hero-section Live demo: https://gsapvault.com/demos/image-led-hero-section/index.html | Property | Value | |----------|-------| | Type | section | | Tier | paid | | Price | Included only in the Vault | | Difficulty | beginner | | Plugins | Core GSAP only | | Techniques | image-led-layout, scoped-intro, container-queries, responsive-typography | | 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 A broad, image-led hero for places and practices that can make one photograph do real work. On wide screens, an oat-coloured information rail meets a full-height image and the oversized serif promise crosses their boundary. The supporting copy, stay facts and circular action give the composition enough substance to serve as a complete opening section rather than a decorative image reveal. Below 760px the same content moves into a deliberate image-first reading order, with the headline and facts on a calm ground and the action widening for touch. GSAP adds one restrained, root-scoped entrance and a small arrow response; the final still remains complete with JavaScript unavailable or reduced motion enabled. ## Features - One art-directed local photograph with a desktop and mobile crop - Editorial split composition with a headline that crosses the image boundary - Semantic stay details and a clear native-link booking action - Container-aware mobile composition for narrow host columns - Root-scoped colour, type, spacing, split, crop and motion controls - Independent multi-instance mounting with public mount and teardown methods - Visible keyboard focus and a comfortable full-width mobile action - Complete no-JavaScript, missing-dependency and reduced-motion presentation ## Use Cases - Independent hotels, cabins and outdoor retreats - Destination restaurants with a strong sense of place - Architecture and interiors studios opening with one completed project - Cultural residencies and rural event venues ## 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 section uses one container-query-aware CSS grid: on wide hosts the photograph occupies the right two-thirds while the content grid remains in normal flow above it; on narrow hosts the photograph becomes the first block and the text follows. GSAP scopes a short image settle, two-line title entrance and supporting-copy stagger to each root. `window.ImageLedHero.mount(root)` mounts an inserted instance, and the returned `destroy()` reverts only that root's animations and listeners. ## 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 Load `assets/style.css`, GSAP 3.12+ and `assets/script.js`, then copy the single `
` from `index.html`. Keep the `data-*` hooks or update them in the script as well. The surrounding `
` and the body background are demo furniture. _Code snippet omitted: it ships with the download._ ### Make it yours Edit the eyebrow, two headline spans, paragraph, definition-list facts, link label and `href` directly in the HTML. Replace the image `src`, dimensions and alt text together. Keep the subject left of centre for the shipped desktop crop, or change `object-position` on `.ilh-hero__image img` for your photograph. Brand controls are grouped on `.ilh-hero`: `--ilh-ground`, `--ilh-ink`, `--ilh-accent`, `--ilh-photo-ink`, the two font roles, `--ilh-content`, `--ilh-gutter`, `--ilh-split` and `--ilh-corner`. The shipped accent `#bd472b` supports small cream text at 5.04:1; keep replacement accent/text pairs at 4.5:1 or above. For example, an architecture studio can use a pale blue ground, navy ink, a completed-building photograph and a headline such as “Space for new rituals” without touching the layout or timeline. The Google Fonts link in `index.html` loads Cormorant Garamond and Instrument Sans. Replace or self-host those faces when required by your privacy and performance policy. ### Behaviour Every root mounts independently on DOM ready. For content inserted later: _Code snippet omitted: it ships with the download._ `window.ImageLedHero.destroyAll()` tears down every mounted instance. Adjust `--ilh-intro-duration` and `--ilh-image-scale` on the root; the script reads them when mounting. ### Accessibility and integration The demo uses an `h1` because this is a primary hero. Change it to the appropriate heading level in an existing page without changing its class or data hook. The action is a native link with a visible focus style, and the facts use a definition list. Add meaningful alt text for content photography; use an empty alt only when the same information is fully duplicated in nearby text. The section has no pinning, smooth scrolling or host-page scroll changes. It responds to its own container below 760px. Reduced-motion users and pages without JavaScript or GSAP see the finished composition immediately. ### Dependencies and image credit - GSAP 3.12+ core only. The demo is pinned to GSAP 3.15.0. - Photograph by [Amar Preciado on Pexels](https://www.pexels.com/photo/modern-a-frame-cabin-in-the-forest-35224502/), supplied as an optimised local WebP under the [Pexels licence](https://www.pexels.com/license/). Check that licence for your intended use and attribution requirements. The bundled image is 1920 × 1280. Replace it in `assets/img/`, or update `assets/img-manifest.json` and run the repository image-bake workflow if working inside GSAP Vault. ## 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