# 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.

Canonical: https://gsapvault.com/sections/isometric-project-wall-section
Live demo: https://gsapvault.com/demos/isometric-project-wall-section/index.html

| Property | Value |
|----------|-------|
| Type | section |
| Tier | paid |
| Price | Included only in the Vault |
| Difficulty | intermediate |
| Plugins | Core GSAP only |
| Techniques | isometric, infinite-loop, quickSetter, keyboard-navigation, responsive-section, reduced-motion |
| 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

Isometric Project Wall is a complete portfolio section for photographers, architecture practices and visual studios. A diagonal collection of photographic prints establishes the breadth of the work, while a flat project index keeps six choices easy to read and select. The selected project's title, short description and view action stay together outside the moving wall.

The worked example is OBLIQUE, a fictional architectural photography practice. Six licensed stock photographs illustrate studies of building forms; the project names and copy are sample portfolio content, not claims of real commissions. Cool paper, dark typography and a cobalt accent give the composition a clear identity without external fonts.

GSAP core adds alternating, continuously wrapped image lanes with an explicit pause control. A native dialog presents the selected photograph and notes without perspective distortion. Without JavaScript or GSAP, the section remains a complete six-project article grid. Reduced motion keeps the portfolio stationary and the controls available.

## Features

- Complete portfolio composition with an introduction, six photographic projects, concise summaries and fuller project notes
- Isometric image wall with alternating lanes, seamless wrapping and coverage beyond all four edges
- Stable project index for precise selection without chasing moving images
- Square-on project viewer using a native dialog
- Continuous drift through hover, an explicit pause control and automatic suspension while offscreen
- Stationary reduced-motion presentation with operable project controls
- Complete semantic article grid when JavaScript or GSAP is unavailable
- Container-aware layouts with a generous 1920px desktop maximum, mobile and narrow-host compositions
- Root-scoped brand variables, independent instances and instance teardown
- Six local WebP photographs with no remote image or font dependency

## Use Cases

- Architectural photography portfolios
- Architecture and interior design project selections
- Creative studio work indexes
- Furniture and object photography collections
- Visual identity and art direction showcases

## 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 photographic wall drifts in alternating directions while the project index stays still. Visitors can keep browsing the images on hover, select a project from either the wall or the index, and open its photograph and notes in a square-on viewer. The wall fills its frame as the section adapts to desktop, phone or a narrow host column.

Selecting a project pauses the drift so its story can be read without distraction. The pause/play control lets visitors resume or stop it themselves. Keyboard focus and the image viewer suspend motion, and the section stops animation work when offscreen. Reduced motion provides a stationary wall with the same project choices.

The download includes editable HTML, CSS, JavaScript and six local photographs. Replace the sample imagery, project copy and section colours for your own portfolio. Multiple sections can operate independently, and without JavaScript every project remains available in a normal article grid.

## 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

Keep `index.html` and its `assets/` directory together and serve them from your website. No build step is required. To add the section to an existing page, include:

_Code snippet omitted: it ships with the download._

Copy the complete `[data-project-wall]` section from `index.html`, including its project articles and dialog. The extract comments mark its boundary. Adjust asset paths to suit the host page. The surrounding document and preview body styling are demonstration context; the section does not need that page shell.

GSAP core enables the wall and project controls. If JavaScript or GSAP is unavailable, every project remains readable as a complete article in a static grid.

### Make it yours

Replace the introduction and the six `[data-wall-detail]` project articles in `index.html`. Each article supplies `[data-wall-image]`, `[data-wall-title]`, `[data-wall-summary]` and `[data-wall-expanded]` for its photograph, name, short summary and fuller notes. Use meaningful alternative text and update image dimensions when needed. Keep each article's identifier matched to its `[data-wall-select]` index button and `[data-wall-project]` wall photographs. Replace the wall photographs as well as the article image when changing a project. The built-in `[data-wall-open]` action opens the local image viewer; it does not require a case-study route or backend.

The photographs are deliberately different subjects. Replace the fictional copy with your own verified project descriptions before presenting the portfolio as your work. For a furniture collection, for example, replace each architectural study with an object photograph, use the project summary for materials and dimensions, and use the fuller notes for its design story.

The brand controls are collected on `.ipw` at the top of `assets/style.css`: `--wall-paper`, `--wall-ink`, `--wall-muted`, `--wall-rule`, `--wall-accent`, `--wall-white`, `--wall-font`, `--wall-width` and `--wall-gutter`. Add a class to your section root to give one instance a different identity:

_Code snippet omitted: it ships with the download._

Supply your own font files if changing the system font. The default `--wall-width` is `120rem` (1920px at the default font size), allowing a wider composition on large screens. `--wall-height`, `--wall-card-w`, `--wall-card-h`, `--wall-gap`, `--wall-tilt` and `--wall-spin` control the wall's proportions. The script measures the projected viewport and repeats lanes and photographs beyond all four edges, so the wall remains filled as it drifts or resizes. Keep `--wall-span` under script control: it is measured for seamless wrapping. Preserve the scoped classes and data attributes used by the script. The tilted wall is decorative presentation; readable project titles and controls remain on the flat page.

Inspect replacement photos in both the cropped wall and the square-on viewer. The article photographs use a 4:3 crop; the wall's image crop follows its card dimensions, while the viewer contains the whole image. Keep important subjects away from crop edges. Replacing imagery and text does not require editing animation internals.

### Behaviour and options

| Attribute | Default | Purpose |
|---|---:|---|
| `data-drift` | `14` | Decorative lane speed in pixels per second. Set `0` for a stationary wall. |
| `data-paused` | `false` | Set `true` to start with motion paused until the visitor resumes it. |

The project index selects a project without opening the viewer. Clicking or tapping a wall photograph offers the same selection. Arrow keys, Home and End move focus between index buttons; Enter or Space selects the focused project. Set `aria-pressed="true"` on one index button to choose the initial project. Selection never advances automatically.

“View project” opens the selected photograph and notes in a native dialog. Close it with its close button, Escape or the backdrop. The native dialog requires browser support for `HTMLDialogElement.showModal()`.

The compact circular pause/play icon controls the decorative drift, with an accessible label and a 44px touch target. Hovering over the wall leaves it moving. Selecting a project pauses motion until the play icon is pressed. Focusing within the section or opening the dialog temporarily suspends drift; hidden tabs and offscreen sections suspend animation work too. Reduced motion keeps the wall stationary and disables the pause button with an accessible reduced-motion description. The script does not install Lenis, use ScrollTrigger, pin the section or intercept wheel input.

Mount content added after page load with:

_Code snippet omitted: it ships with the download._

Before removing a section or replacing its markup, destroy that instance:

_Code snippet omitted: it ships with the download._

Teardown removes only that root's listeners, observers, generated content and GSAP work, and restores the complete article grid. The mount helper can initialise the same root again. Calling it on an already-mounted root does not stack the behaviour.

### Accessibility and integration

- The native project index buttons provide stable keyboard and touch targets, with visible focus, current-selection state and a polite selection announcement. The entire tilted wall is excluded from keyboard navigation and assistive technology; its pointer interaction duplicates the accessible index.
- The native dialog contains the project details, supports Escape and returns focus to its opener when closed.
- `prefers-reduced-motion: reduce` retains project selection and the viewer while stopping decorative motion. The setting can change while the section is mounted.
- No JavaScript or a blocked GSAP request leaves all six complete project articles visible.
- The section uses an `h2` introduction and `h3` project headings. Adjust those levels to fit the host document outline; classes supply the styling.
- The container-aware layout adapts to a narrow host column. No sticky ancestor, full-width breakout or smooth-scroll library is required. Native page scrolling remains owned by the host.
- Multiple roots operate independently. Mount and destroy the relevant root as part of your own application's page lifecycle.

### Dependencies and image credits

GSAP core 3.12+ is the only animation dependency; the demo uses GSAP 3.15.0. No GSAP plugins or external font files are required. The downloaded `assets/img/` directory contains six local 1200 × 900 WebP derivatives, so the photographs need no runtime image service.

| Local file | Source |
|---|---|
| `white-villa.webp` | [Unsplash photograph](https://images.unsplash.com/photo-1523217582562-09d0def993a6) |
| `orange-curve.webp` | [Unsplash photograph](https://images.unsplash.com/photo-1486718448742-163732cd1544) |
| `glass-angles.webp` | [Unsplash photograph](https://images.unsplash.com/photo-1487958449943-2429e8be8625) |
| `brutalist-block.webp` | [Pexels photograph](https://www.pexels.com/photo/4328661/) |
| `white-spiral.webp` | [Unsplash photograph](https://images.unsplash.com/photo-1439337153520-7082a56a81f4) |
| `scaled-curve.webp` | [Unsplash photograph](https://images.unsplash.com/photo-1493397212122-2b85dda8106b) |

The five Unsplash images use the [Unsplash License](https://unsplash.com/license): commercial use and modification are permitted; selling images without significant modification or compiling a competing image service is not. The Pexels image uses the [Pexels License](https://www.pexels.com/license/), which permits use and modification in websites and templates. It does not permit selling unaltered copies, implying endorsement, redistributing images on stock or wallpaper platforms, or using them as a trademark. Image rights remain governed by their respective providers.

The source repository records baking settings in `assets/img-manifest.json`; that build-only manifest is excluded from the buyer download. Replace the delivered WebP files directly with your own appropriately licensed images when integrating the section elsewhere.

## 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