25 · Very Small Things: a museum of miniatures you explore through a brass loupe

A fictional museum of miniatures in an old jeweller's shop at 14 Clockmaker's Row, Hatchmere. The page opens on Thimbleton, a whole town built on a sewing thimble, and a brass loupe that follows your mouse and magnifies it six times. What makes people stop is that the loupe is not a filter: it shows a second, live drawing of the town, so the clock keeps your real time, the cat's tail moves and the snail crawls, all sharp at that zoom.

Inspiration

The idea came from the labs of 20 Oct 2026 rather than from one component. GSAP (https://gsap.com) supplies the motion: Flip makes a picked miniature grow into a full exhibit page, ScrollTrigger pins and scrubs the scale walk, ScrambleText types the brass plaque, SplitText brings in the headline. Paper Shaders (https://shaders.paper.design) supplies the warm "god rays" behind the hero. The SVG-filter glass from the kit forms the loupe's refracting rim. Added on top: every miniature is drawn in code, the loupe pans a second copy of the scene by changing its viewBox, and a fully working ticket machine prints a stub.

Visual direction

Theme, kit and licenses

Theme: Showpiece (gallery), loud in technique and quiet in tone. The builder changed one line of the recipe: glass is limited to a single piece, the loupe rim, because the whole page is about looking through one lens. Everything else is solid, so the page holds its frame rate. The nav is not sticky and nothing is blurred.

Kit parts used: glass.js and glass.css (rim around the magnifier), paper.js with paper-data.json (god-rays "Linear" recoloured to warm dust), and fps-chip.js (shown with ?fps). GSAP 3.15 core plus ScrollTrigger, Flip, ScrambleText and SplitText. No tools outside the kit.

Licenses:

References

Why these choices

A museum sells looking closely, so the page makes the visitor do it. Making the loupe a second drawing instead of a CSS zoom keeps it crisp. The finds only count while the visitor is steering, so they cannot be won by leaving the page open. Mouse, touch drag, tap and arrow keys all move the loupe.

Glass is the costly effect, so it is used once, on a small circle, over a mostly still scene. The scale walk is one drawing in millimetres scaled 1000 times, which avoids swapping images. Trade-offs: reduced-motion users get a static walk with four buttons rather than a pinned scroll, the exhibit view traps focus and closes on Escape, and the page still works if GSAP fails to load. Real-device frame rate was not measured.

Who this kind of site is for

It suits museums, collectors, jewellers, watch repair, model makers, archives and any small business whose product rewards a close look. It is the wrong call for task-heavy sites where people want hours and a phone number in two seconds, or for clients with no object worth magnifying. For a real client, swap the town for photos of their own product in the same loupe. The ticket machine pattern also reuses for tours, classes and tastings.

How to make it

Stack and key techniques

The prompt

Build a single-file website (HTML, CSS, JS, no build step) called "The Museum of Very Small Things", a fictional museum of miniatures in an old jeweller's shop at 14 Clockmaker's Row, Hatchmere. Quiet tone, loud technique, slow motion, nothing bounces.

Look: wall #2b2622, parchment #efe6d2, brass #b08d57 and #d9b97c, ink #1a1714, velvet #4a1d27. Cormorant Garamond for text, DM Mono for small labels. Load GSAP 3.15.0 (core, ScrollTrigger, Flip, ScrambleText, SplitText) from jsDelivr. Everything drawn is procedural SVG, no images.

Sections:
1. Hero, headline "Come closer." Draw Thimbleton: a town on a silver thimble on a velvet cushion (clock tower with a clock showing the visitor's real time, bakery, post box, cat in a window with a moving tail, smoke, washing line, ladder with a climber, snail). Generate the SVG twice from one function. Put one copy in a round brass loupe that follows the mouse (touch: drag the loupe, tap to send it; arrow keys also move it) and magnifies 6x by changing the viewBox of the second copy. Wrap the loupe in a refracting glass rim (SVG displacement filter, frost fallback in browsers without it). Add five things to find; they count only while the visitor is steering the loupe. Finding all five adds a "Sharp eyes" stamp to the ticket stub. Warm light rays behind the hero.
2. Cabinet of six drawers. Each opens with GSAP. Each holds a procedural miniature with one action: library lamp switches off, orchestra plays a chord, a letter on a rice grain can be read, lighthouse winds, clockwork snail runs fast, snow marble shakes. Picking one grows it into a full exhibit page with Flip, with a scrambled brass plaque, a Try it button, Escape, arrow keys and a focus trap, then returns with Flip.fit.
3. Scale walk: one drawing in millimetres, pinned and zoomed 1000 times (room, case, dish, grain of rice). Scale bar counts down from 1 m to 1 mm. Labels fade in by zoom. Four buttons jump to each stop.
4. Shop story with a drawn shopfront.
5. Visit: opening hours, an "open now" line, and a ticket machine: ten days skipping Monday and Tuesday, half-hour slots with spaces left, four ticket types, children need a grown-up, running total, a stub that prints in steps, and "Save the stub" as SVG. Footer: "A fictional museum, made for the Brain Melt gallery."

Rules: no sticky or blurred bars, glass only on the loupe rim, prefers-reduced-motion respected (static scale walk with buttons), phone layout at 390 px with no overflow, no em dashes, no console errors. Verify: screenshot at several scroll stops on desktop and mobile, exercise every control, fix, repeat.

Build notes

Stepping down: what you would likely lose

This is an informed estimate, not a measurement. No public benchmark compares these exact models on one-shot frontend work, so every row is extrapolated from the model tiers and from how much of the work the kit already does.

Feature Sonnet 5.5 with this kit Sonnet 5.5 from a blank page
Loupe rim glass Does fine: glass.js is called with a few options. The px-radius gotcha is the likely slip. Likely attempts it with bugs, such as a displacement filter that distorts text or fails off Chrome. Might simplify to a plain circle.
Warm light behind the hero Does fine: a kit call plus recolour. Probably simplifies to a CSS gradient, or hits the Paper texture-loading throw.
Thimbleton drawn twice, loupe pans the viewBox Attempts it, likely with bugs: the copies drift out of step, or the loupe offset is wrong on resize. Probably zooms one copy with CSS, which goes blurry at 6x.
Drawers, Flip exhibit open and close Attempts it with likely bugs: stray inline transforms after Flip, focus not restored. Likely simplifies to a modal with a fade.
Six procedural miniatures Attempts it, likely simpler drawings and fewer details per miniature. Same, with more repeated shapes.
Pinned scale walk, 1000x Attempts it with likely bugs: labels visible at the wrong zoom, button jumps landing off the stop. Likely simplifies to a few stacked images or sections.
Ticket machine and printed stub Does fine on logic. The stepped print animation is likely simplified. Does fine on logic, likely less polished on phones.

Overall, a judgment call: Sonnet 5.5 with the kit would likely keep roughly 65 to 80 percent of the visual impact in one pass. From a blank page, roughly 40 to 55 percent. The gap closes mainly with a screenshot loop and a second pass on the loupe, Flip and the pinned walk, which are the three places a small drift or state bug would show first.

← Previous report