Cursor-Driven Gallery
Tactile gallery where images distort, attract, tilt and trail with the cursor.
Install
npx shadcn@latest add "https://webberui.com/r/cursor-driven-gallery.json?t=<install token>"The whole page lands in app/templates/cursor-driven-gallery/. You can also use a long-lived licence key instead: set the Authorization: Bearer <key> header in the registries block of components.json — better for CI or a project several people share. What you may do with the source is in the licence terms.
Sections it ships with
Sections inside one template share the same design tokens, so swapping and reordering them keeps the colours, spacing and animation rhythm consistent. Pick and combine them in the section composer.
- 1
Nav and Oversized-Headline Hero
A dark, immersive hero with the gallery nav bar, colour shards drifting on cursor parallax and an oversized display headline.
hero - 2
Magnetic Permanent-Collection Gallery
An irregular grid of twelve works; each cell magnetises, tilts and scales by cursor distance while a ghosted title surfaces.
gallery - 3
Artist Marquee
The roster of collaborating artists scrolls as an infinite horizontal marquee, alternating light and dark type for rhythm.
team - 4
Piece of the Month
Scroll parallax presents a single featured work: a large image, its credits and the artist's own statement.
product - 5
Gallery Figures
A four-cell divided figures panel that fades in one by one: works held, artists, rooms and visitors.
stats - 6
Book a Tour CTA
A centred headline with two buttons; the custom cursor grows on hover and takes on a booking or subscription label.
cta - 7
Footer
Brand mark, gallery address and visit, explore and support link columns, over a copyright row.
footer
What you get is source code
Not an npm package, not a zip file. Once installed, the page's TypeScript source sits in your repo: edit it however you like, no runtime dependency, no expiry mechanism. Your site keeps running even if ours goes down.
Browse the other 103 templates →