Art Gallery Template Template
A one-page site for a contemporary art gallery, built on a cool white ground with one vermilion, whose signature is a walk-the-wall exhibition: the section pins and vertical scroll pans a hang of CSS-drawn artworks sideways, with a medium filter that re-hangs the wall.
About This Template
A production-ready one-page site for a contemporary art gallery's current exhibition, built for a fictional Antwerp gallery, Verge. It runs on a cool white ground with near-black type and a single vermilion, the way a real white-cube space lets the work carry the colour.
The signature is walking the wall: the exhibition section pins, and scrolling down pans a hang of twelve artworks sideways, each an abstract composition drawn entirely in CSS and SVG, mounted and matted like framed work with the piece nearest the centre lifting as you pass. A medium filter re-hangs the wall on the fly, the departing works dissolving out while the pan resets to the first piece and a live count reports what is on view. A featured now-showing piece sits below and enlarges into a full-bleed view on Flip.
The page is structured the way a gallery talks about a show: the exhibition title and dates lead, the wall of work follows, then one piece in depth, the curatorial statement, and the practical visit details. Copy is written in a dry curatorial voice, and there is not a single external image or photograph to license, host, or replace.
Every colour resolves from a short token block, so the whole site reskins from a handful of values, and every section is guarded so a buyer can delete any of them and the rest still runs.
What's Included
- Complete deployable one-page site: sticky nav, type-led hero, walk-the-wall exhibition, featured piece, curatorial statement, visit details and footer
- Signature walk-the-wall exhibition: the section pins and vertical scroll pans twelve framed artworks sideways, with the piece nearest the centre lifting as you pass and a progress bar tracking the walk
- Every artwork is drawn in CSS and SVG, so there are no images to license, optimise, or host, and the page looks finished the moment it opens
- Medium filter re-hangs the wall live: departing works dissolve out, the pan resets to the first piece and the length recomputes, with real aria-pressed controls and a live on-view count
- Featured now-showing piece enlarges into a full-bleed view on Flip, dismissed by click, the close control, or the Escape key
- Masked type reveal on the exhibition title, with the resting position pinned so nothing is left offset
- Clean scroll-reveals bring each section in as it enters the viewport, pre-hidden before first paint so nothing flashes
- Vermilion is held to large display type, marks, and UI because it is deliberately below the body-text contrast floor on this ground, and the token comment says so
- Three-value token block plus RGB triples: change the ground, the ink, and the vermilion and the whole site reskins with no stray literals left behind
- Lenis smooth scrolling wired in, kept in lockstep with the pinned wall, and fully optional
- Accessible: the wall degrades to a native horizontal scroll strip under reduced motion and with no JavaScript, filtering still works, the featured piece enlarges without animation, and every artwork stays reachable with the filter controls simply absent
Perfect For
- Contemporary art galleries and project spaces announcing a current exhibition
- Museums, kunsthalles, and non-commercial spaces presenting a single show
- Artist-run spaces and collectives that want a wall of work as the page's spine
- Design studios, ceramicists, or makers presenting a catalogue of pieces filterable by type
- Pop-up shows, degree shows, and fair booths that need a self-contained microsite with no image pipeline
How It Works
Structure
One script initialises each section inside a single gsap.context with gsap.matchMedia, keyed only on reduced motion so exactly one branch runs on every device. Every section is found by a data attribute and guarded, so a buyer can delete the featured piece, the statement, or the visit block and the wall still filters. The artworks are markup, not images, so the page is a complete static document before any script runs.
Walking the wall
The exhibition section pins with ScrollTrigger and a scrubbed tween pans the track of works horizontally as you scroll down, so vertical travel reads as walking along a hang. The pan length is the track's own overflow, read from a function so it re-evaluates on resize and after a filter, and the pin starts below the fixed nav so the filter bar stays clear. On every update the work nearest the viewport centre gets an is-focus class and lifts, and a progress bar fills. Each work is an abstract composition of layered CSS gradients, clip paths and small SVG shapes, matted in a frame, with its title, artist, year and medium printed beneath where the text keeps its contrast.
Re-hanging the wall
Clicking a medium filter runs a short cross-dissolve: the track fades out, the works that do not match are dropped with an is-off class, ScrollTrigger.refresh recomputes the pan length for the new track width, the pan resets to the first work so a shorter wall can never strand you past its end, and the track fades back. A set small enough to fit centres itself and hides the progress bar and scroll hint, since there is nothing to pan. The filter buttons carry aria-pressed and a live region reports the new on-view count, so the active medium is exposed to assistive technology, not just shown.
The featured piece
The now-showing piece enlarges by moving the same element into a full-bleed overlay and Flipping it from its inline rectangle to the enlarged one, so it is one element that grows rather than a second copy appearing. A veil fades up behind it, and the view is dismissed by clicking the veil, pressing the close control, or hitting Escape, which Flips it back into the page. Focus is moved to the close control on open and returned to the trigger on close.
Reduced motion and no JavaScript
The wall is never pinned unless motion is allowed: its default CSS is a native horizontal scroll strip, so both reduced-motion and no-JavaScript visitors get the same wall of works, scrollable by hand. Under reduced motion filtering toggles instantly and the enlarge runs with no animation, and the CSS media query holds every reveal target visible. With no JavaScript the filter row and the enlarge control are hidden by CSS, all twelve artworks stay on the strip, and the featured piece sits at its inline size, so nothing on the page is ever reachable only through a script.