Loading…
Live block · try it
Freegallery · light · pointer · keyboard · touch
Gallery with Hover Zoom Lens
A pottery's glaze library where you can look closer than a photo usually lets you: a round lens follows your pointer and shows the glaze at two and a half times, picking out every crawl and pinhole; switch glazes from the thumbnails, change the magnification, or hold and drag on a phone.
Placeholder photos by Wilhelm Gunkel, Susan Wilkinson, Spencer Liao and Ivan Pergasi on Unsplash. Replace them with your own before launch.
The mechanic
True-pixel zoom: the lens uses a separate high-resolution source rather than scaling the displayed image, so at 3.5× you see real detail, and the maths keeps the exact point under the cursor centred at any zoom.
How to use it
From prompt to a block in your page.
- 01Try the block
The preview is the shipped block inside a neutral demo page. Scroll, hover, drag: everything is live.
- 02Pick a palette
Token sets re-tint the block live. The prompt carries the one you chose.
- 03Pick your stack
A paste-in snippet, or a component for Next.js, React, Vue, Astro, WordPress, Shopify or Webflow.
- 04Copy the prompt
It quotes the block's markup, styles and script verbatim with the tokens and the rules that keep it self-contained.
- 05Drop it into your page
Add the head lines it names, paste the block, replace the placeholder copy. Tokens live on :root.
