Website sections

Complete pieces for your next page. Considered layouts, photography and GSAP motion, ready to make your own. Choose a section, change the content and add it to your site.

Designed in full: Typography, imagery and interaction composed as one part of a page.
Easy to make yours: Edit the content, colours and fonts. Plain HTML, CSS and JavaScript.
Included in the Vault: Only in the Vault for now while the collection is small. Included for existing and new owners.

The Vault

Unlock the Vault library for £99

All 236 premium items in the Vault library, plus future additions to the library.

section-020 New Included in the Vault

Studio Team Story

An editorial founder introduction where selecting a person changes the working story and reframes a shared studio photograph.

editorial-layoutresponsive-section

section-019 New Included in the Vault

Team Through the Project

A single team photograph travels between six people as their individual stories enter view during the scroll.

ScrollTrigger scroll-storytelling

section-018 New Included in the Vault

Event Schedule

A practical two-day event programme with day selection, session filters and preparation notes, framed by a bold photographic event rail.

accessible-filteringstate-transition

section-017 New Included in the Vault

Searchable FAQ

A complete help section with searchable answers, topic filters, native disclosures and a clear route to a real person. Built around a warm editorial workspace example.

click-togglestate-transition

section-016 New Included in the Vault

Pricing Comparison

A complete SaaS pricing section with three comparable plans, monthly and yearly billing, clear annual totals and a focused plan-selection handoff.

state-transitionprogressive-enhancement

section-015 New Included in the Vault

Peel to Reveal Offer

A SaaS promotion section with one tactile peelable voucher, a revealed coupon code and a complete copy-to-redemption demonstration.

pointer-interactionclip-path

section-014 New Included in the Vault

Isometric Project Wall

An architectural photography portfolio section with a drifting isometric image wall, a stable six-project index, readable project summaries and a square-on image viewer.

isometricinfinite-loop

section-013 New Included in the Vault

Service Pathway

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.

accessible-tabsstate-transition

section-012 New Included in the Vault

Customer Proof Ledger

A photography-led customer story section pairing three clear customer choices with a large workplace image, illustrative result, quote and expandable working note.

accessible-tabsgenerated-photography

section-011 New Included in the Vault

Transformation Stories

A photography-led transformation section with three room stories, a flexible before-and-after comparison and concise design notes beside the image.

accessible-tabsbefore-after

section-010 New Included in the Vault

Editorial Project Carousel

An art-book featured projects carousel with a dominant image stage, synchronized project facts and outcomes, visible folio progress, case-study links and complete keyboard, button and swipe navigation.

carouseldrag

section-009 New Included in the Vault

Spatial Product Range

A product-first range selector with generated speaker cutouts, a seamless spatial carousel and complete fallback product cards.

webgl-shaderpointer-drag

section-008 New Included in the Vault

Time of Day Hero

A hero for a place that changes through the day: a giant photographic dial turns to the daypart on show, and the panel, headline and colour ground change with it.

state-transitionpointer-drag

section-007 New Included in the Vault

Alpine Stage Route Hero

A cycling hero with two selectable Alpine mountain sprints, original aerial landscapes and animated road-aligned routes.

svg-route-drawingcontainer-queries

section-006 New Included in the Vault

Colour Chapter Showcase

A photography-led editorial section whose entire canvas changes colour as you scroll between three generously composed chapters.

ScrollTrigger scroll-colour

section-005 New Included in the Vault

Kinetic Type Hero

A playful studio hero where five oversized letter objects form a bold composition visitors can drag, nudge, shuffle and reset.

draggable-typographypointer-capture

section-004 New Included in the Vault

Photo Marquee Gallery

A complete photographic showcase with a bold editorial masthead and two edge-to-edge image rows travelling continuously in opposite directions, plus click-to-pause controls, a built-in photo lightbox and static browsing fallbacks.

infinite-marqueeopposing-direction

section-003 New Included in the Vault

Editorial Case Study

A photography-led architecture case study with an indexed focal image, project narrative, key facts and a measured outcomes ledger in one refined editorial section.

accessible-galleryclip-reveal

section-002 New Included in the Vault

Product Feature Story

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.

tabsstate-transition

section-001 New Included in the Vault

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.

image-led-layoutscoped-intro

About website sections

How is a website section different from an effect or a UI element?

An effect provides an animation technique; a UI element provides a control such as tabs or a modal. A website section is a complete content composition: layout, typography, imagery and interaction together. A template supplies a whole website.

How do I get the sections?

While the collection is small, website sections are available only in the Vault for now, for both existing and new owners. They are not available to buy separately, either individually or as a Sections pass. Sign in with your Vault account to download the source. The Effects, Templates and UI Elements passes do not include sections.

Can I change the design?

Yes. Change text, links and images in the HTML, and use the documented CSS variables for colours, fonts and spacing. Some sections may include additional themes; the available choices are listed on each product. There is no shared theme system to install.

Do sections need a framework or a build step?

No. The downloads contain HTML, CSS and JavaScript, with the dependencies and setup documented. Add the section to an existing page or adapt it to your project. Each section documents its keyboard, mobile and reduced-motion behaviour.