Isometric Project Wall

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
orange-curve.webp	Unsplash photograph
glass-angles.webp	Unsplash photograph
brutalist-block.webp	Pexels photograph
white-spiral.webp	Unsplash photograph
scaled-curve.webp	Unsplash photograph

The five Unsplash images use the Unsplash 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, 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.