# Magnifier Loupe Over a Price List
A shadcn/ui block from the [@weinc](https://we.inc/components?utm_source=shadcn.exchange) registry, listed on [shadcn.exchange](https://shadcn.exchange/r/weinc/magnifier-loupe-cursor-over-a-seed-catalogue-price-list).
- Page, with a live preview: https://shadcn.exchange/r/weinc/magnifier-loupe-cursor-over-a-seed-catalogue-price-list
- Screenshot: https://shadcn.exchange/shot/weinc/magnifier-loupe-cursor-over-a-seed-catalogue-price-list/light.png
- Registry item: https://we.inc/r/magnifier-loupe-cursor-over-a-seed-catalogue-price-list.json
- Listed: 2026-10-28, source last changed 2026-10-28
## Install
```bash
npx shadcn@latest add https://shadcn.exchange/r/weinc/magnifier-loupe-cursor-over-a-seed-catalogue-price-list.json
```
Run it in a project that has shadcn/ui set up. It adds the files below and installs what they depend on.
## Dependencies
- npm packages: `framer-motion`
## Files
### `components/we-inc/magnifier-loupe-cursor-over-a-seed-catalogue-price-list.tsx`
```tsx
import { useEffect, useRef } from "react";
import { useReducedMotion } from "framer-motion";
const ZOOM = 1.8; // magnification inside the loupe
const LENS = 240; // loupe diameter in px
const seeds = [
{ name: "Broad bean, Winter Lantern", note: "Sow Feb to Apr. Thirty seeds.", price: "$3.40" },
{ name: "Pea, Hedgerow Sugar", note: "Sweet flat pods, climbs to 5 ft.", price: "$3.10" },
{ name: "Beetroot, Cellar Blood", note: "Deep red globes that store well.", price: "$2.80" },
{ name: "Carrot, Long Barn", note: "Tapered roots for heavy soil.", price: "$2.60" },
{ name: "Lettuce, Velvet Oak", note: "Pick-again leaves, bronze tips.", price: "$2.90" },
{ name: "Chard, Five Lamps", note: "Stems in gold, pink and white.", price: "$3.00" },
{ name: "Tomato, Ridge Cherry", note: "Small fruit, early, very sweet.", price: "$3.80" },
{ name: "Squash, Pale Moon", note: "Grey-blue skin, dense orange flesh.", price: "$3.60" },
{ name: "Leek, Frost Hold", note: "Stands all winter in the bed.", price: "$2.70" },
{ name: "Kale, Black Crow", note: "Crinkled leaves, sweeter after frost.", price: "$2.90" },
{ name: "Sweet pea, Old Parlour", note: "Strong scent, mixed soft colours.", price: "$3.50" },
{ name: "Calendula, Ember Mix", note: "Edible petals, self-seeds gently.", price: "$2.40" },
];
function SeedList() {
return (
Spring sowing list
Price per packet
{seeds.map((s) => (
-
{s.name}
{s.note}
{s.price}
))}
);
}
export default function MagnifierLoupeCursorOverASeedCataloguePriceList() {
const reduce = useReducedMotion();
const rootRef = useRef(null);
const sheetRef = useRef(null);
const lensRef = useRef(null);
const cloneRef = useRef(null);
useEffect(() => {
const root = rootRef.current, sheet = sheetRef.current, lens = lensRef.current, clone = cloneRef.current;
if (!root || !sheet || !lens || !clone || reduce || !matchMedia("(hover: hover) and (pointer: fine)").matches) return;
root.setAttribute("data-on", "");
const R = LENS / 2;
let x = 0, y = 0, tx = 0, ty = 0, live = false, frame = 0, idle = 0;
const t0 = performance.now();
const fit = () => { clone.style.width = `${sheet.clientWidth}px`; };
const loop = (now: number) => {
if (!live) {
const t = (now - t0) / 1000;
tx = sheet.clientWidth * (0.5 + 0.38 * Math.sin(t * 0.42)); ty = sheet.clientHeight * (0.5 + 0.36 * Math.sin(t * 0.9 + 0.5));
}
x += (tx - x) * 0.18; y += (ty - y) * 0.18;
lens.style.transform = `translate(${x - R}px, ${y - R}px)`;
clone.style.transform = `translate(${R - x * ZOOM}px, ${R - y * ZOOM}px) scale(${ZOOM})`;
frame = requestAnimationFrame(loop);
};
const start = () => { if (!frame) frame = requestAnimationFrame(loop); };
const stop = () => { cancelAnimationFrame(frame); frame = 0; };
const onMove = (e: PointerEvent) => {
if (e.pointerType === "touch") return;
const r = sheet.getBoundingClientRect();
tx = e.clientX - r.left; ty = e.clientY - r.top;
live = true; clearTimeout(idle); root.removeAttribute("data-kb");
};
const onLeave = () => { idle = window.setTimeout(() => { live = false; }, 1500); };
const onFocus = () => { if (root.querySelector(":focus-visible")) root.setAttribute("data-kb", ""); };
const onBlur = () => root.removeAttribute("data-kb");
fit();
const ro = new ResizeObserver(fit);
ro.observe(sheet);
const io = new IntersectionObserver(([e]) => (e.isIntersecting ? start() : stop()));
io.observe(root);
sheet.addEventListener("pointermove", onMove);
sheet.addEventListener("pointerleave", onLeave);
root.addEventListener("focusin", onFocus);
root.addEventListener("focusout", onBlur);
return () => {
stop(); io.disconnect(); ro.disconnect(); clearTimeout(idle);
root.removeAttribute("data-on");
sheet.removeEventListener("pointermove", onMove);
sheet.removeEventListener("pointerleave", onLeave);
root.removeEventListener("focusin", onFocus);
root.removeEventListener("focusout", onBlur);
};
}, [reduce]);
return (
);
}
```