# Exhibition Artwork Lens > A photographic sculpture exhibition with a tactile magnifying lens, drag and keyboard exploration, artwork captions and practical visit information. Canonical: https://gsapvault.com/sections/exhibition-artwork-lens-section Live demo: https://gsapvault.com/demos/exhibition-artwork-lens-section/index.html | Property | Value | |----------|-------| | Type | section | | Tier | paid | | Price | Included only in the Vault | | Difficulty | intermediate | | Plugins | Core GSAP only | | Techniques | cursor-effects, physics, micro-interaction, 3d-transforms, velocity-reactive, keyboard-navigation, responsive-section, progressive-enhancement, container-queries | | Uses Lenis | No | ## Lighthouse, as measured Google Lighthouse on the demo, 3 October 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 Exhibition Artwork Lens lets visitors handle the exhibition photograph directly. A large optical aperture enlarges the actual image, follows the pointer, banks with movement and springs back to rest. A reachable drag handle and native horizontal/vertical sliders provide touch and keyboard control. The fictional Soft Forms programme at North Gallery pairs the close inspection with three honest captions describing the visible sculptures, clear dates and practical visit information. The artwork remains the main event; all descriptive content stays readable without enhancement. ## Features - Actual photographic magnification from the semantic source image - Large moving aperture with velocity banking and elastic settle - Pointer exploration and a reachable touch drag handle - Native axis sliders and keyboard arrow controls - Spatially associated captions derived from editable markup - Ordinary photograph replacement with automatic optical mapping - Complete static artwork and visit information without JavaScript or GSAP - Independent mounting, teardown and reduced-motion support ## Use Cases - Gallery and museum exhibitions with visible material details - Design collections and sculptural installations - Craft programmes showcasing surface and construction - Art exhibition launches with practical visitor information ## 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 enlarges the same local photograph inside a moving circular aperture. Visitors can move over the picture, drag the lens handle or use native sliders to inspect its surfaces. Movement tilts the lens slightly before it settles with a spring. The nearest artwork caption follows the position while all captions remain readable underneath. The layout also carries exhibition dates and static visiting formats; the example links reach local arrival guidance and do not reserve admission. ## 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 Copy `assets/` beside your page, include `assets/style.css`, then copy the complete `
` from `index.html`. _Code snippet omitted: it ships with the download._ No build step or scroll plugin is required. Keep the Barlow / Barlow Condensed Google Fonts link from the example, self-host licensed copies, or replace the font variables. Demo body styling and the outer `
` landmark belong only to `index.html`; copy the section root into your existing page landmark. ### Using It With Your Own Design Keep the root and `data-art-*` / `data-lens-*` hooks. Edit the title, dates, venue, curatorial text and visit information directly in semantic HTML. The title's heading level can change without affecting styling. The root variables group colours (`--exhibition-ground`, `--exhibition-ink`, `--exhibition-ticket`, `--exhibition-ticket-ink`), display/body fonts, content width, gutter, spacing, corners, lens size and image framing. Text uses opaque cream/cobalt or deep blue/cream. Check contrast after changing colours: normal text needs at least 4.5:1 and meaningful controls 3:1. #### Replace the photograph `[data-art-photo]` is an ordinary image inside a picture. The bundled gallery file is `assets/img/soft-forms-gallery.webp` (1536×1024), with a 768×512 responsive derivative. Edit `src`, both `srcset` paths, `alt` and intrinsic `width` / `height`. Change the root `--exhibition-photo-ratio` and `--exhibition-photo-position` percentage values to frame your subject. The mobile named container rule uses a 4:3 frame. The lens creates one decorative duplicate automatically from the original image's `currentSrc`. It recalculates the actual cover crop and optical translation after image loading, source changes and resizing. No second image path, SVG editing or animation changes are needed. Use a high-resolution source for detailed magnification; the effect cannot invent detail absent from the photograph. #### Artwork captions Each `li[data-art-object]` contains its own heading and description. `data-art-x` and `data-art-y` locate that object's centre in the **source photograph**, as normalized coordinates between 0 and 1. For example, `0.22,0.49` identifies the left terracotta vessel in the supplied landscape photo. Change captions to describe what is actually visible in your replacement photograph, then update those source coordinates. The closest item's caption appears beside the lens experience while all captions remain visible below. Add, remove or reorder complete items, then mount again. Counts are derived from markup; one item works, and zero items removes the spatial readout without disabling magnification. There is no fixed three-item dependency. Visit formats are ordinary static articles. Edit or reorder them freely. The example links reach the local arrival-information block and do not make a reservation. Replace their `href` with your own booking/information destinations and remove `data-visit-link` to leave those destinations untouched. For multiple no-JS copies, use distinct arrival IDs and matching fallback hrefs; enhanced roots create unique IDs automatically. ### Behaviour and Options | Root attribute | Default | Meaning | | --- | --- | --- | | `data-lens-zoom` | `2.5` | Magnification, clamped to 1.25–4 | | `data-lens-response` | `0.2` | Tracking duration in seconds, clamped to 0.08–0.8 | | `data-lens-x`, `data-lens-y` | `0.77`, `0.59` | Initial point as normalized **display frame** coordinates | The rendered `--exhibition-lens-size` controls desktop diameter; the named mobile rule uses a smaller aperture. A generous source frame leaves more room for moving the lens. Bounds keep the aperture and grab handle inside the photograph. _Code snippet omitted: it ships with the download._ `mountAll(container)` returns independent instances inside a document/container. Remounting an existing root first reverts it. Teardown never kills the host's GSAP work. ### Accessibility and Integration Move the desktop pointer over the photograph, or drag the native grab button. Touch drag belongs only to the generous handle, leaving ordinary page scrolling available elsewhere. Arrow keys on the handle move the actual lens; Home centres it. Native horizontal/vertical ranges also support standard keyboard controls. A concise drag cue, labelled horizontal/vertical controls and visible focus are provided. The lens banks slightly with movement and settles elastically. Reduced motion gives direct positioning without tilt or spring, and live preference changes preserve the latest requested point. No autoplay or ongoing ticker runs at rest. Without JavaScript or GSAP, the normal photograph, all captions and static visitor information remain available; enhancement-only controls and instructions are absent. The generated optical image is decorative and its controls have meaningful labels. Captions use their ordinary semantic source markup. The section grows naturally and adapts to its own named container. There is no sticky/pinning, smooth-scroll dependency or global heading/button reset. Mobile places the caption and sliders directly beside the photographic response without clipping longer copy. ### Dependencies and Credits - GSAP core: demo pin 3.15.0; GSAP 3.12+ APIs. [GSAP licence](https://gsap.com/community/standard-license/). - Barlow and Barlow Condensed by Jeremy Tribby, SIL Open Font License. [Google Fonts](https://fonts.google.com/specimen/Barlow). - Generated concept photography depicts fictional sculptures and a fictional exhibition. It is not real artist/venue documentation or a client result. Included local WebPs are ordinary replaceable demo media. Internal direction, image masters/manifests and build-only thumbnail inputs are excluded from buyer delivery. ## 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