# Three Glass Cake Domes on Ceramic Stands Each Keeping a Different Site Design Where the Dome Lifts off the One You Choose > Design selector with card models of one website on cake stands under glass domes: the dome lifts off the one you choose. Free React and HTML code to copy. 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/three-glass-cake-domes-on-ceramic-stands-each-keeping-a-different-site-design-where-the-dome-lifts-off-the-one-you-choose). - Page, with a live preview: https://shadcn.exchange/r/weinc/three-glass-cake-domes-on-ceramic-stands-each-keeping-a-different-site-design-where-the-dome-lifts-off-the-one-you-choose - Screenshot: https://shadcn.exchange/shot/weinc/three-glass-cake-domes-on-ceramic-stands-each-keeping-a-different-site-design-where-the-dome-lifts-off-the-one-you-choose/light.png - Registry item: https://we.inc/r/three-glass-cake-domes-on-ceramic-stands-each-keeping-a-different-site-design-where-the-dome-lifts-off-the-one-you-choose.json - Listed: 2026-10-28, source last changed 2026-10-28 ## Install ```bash npx shadcn@latest add https://shadcn.exchange/r/weinc/three-glass-cake-domes-on-ceramic-stands-each-keeping-a-different-site-design-where-the-dome-lifts-off-the-one-you-choose.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/three-glass-cake-domes-on-ceramic-stands-each-keeping-a-different-site-design-where-the-dome-lifts-off-the-one-you-choose.tsx` ```tsx import { useEffect, useRef, useState } from "react"; import type { KeyboardEvent as ReactKeyboardEvent, ReactNode } from "react"; import { motion, useReducedMotion, useSpring, useTransform, useVelocity } from "framer-motion"; // Everything is drawn in these units and scaled to the screen. A stand is SW wide; a card model is CW by CH. const SW = 300; const DOME_W = 250; const DOME_H = 352; const HEAD = 174; // air above the domes, which the lifted one rises into const CW = 200; const CH = 275; const CARD = 0.88; // size of a card while it is under glass const LIFT = 148; // how far a dome is raised, in units const BLUE = "#4F98FB"; // the glass knobs, the enamel line on the plates and the active pill const HOLD = 3800; // rest between steps of the self-running demo, in milliseconds const SANS = '"Inter Tight", "Inter", ui-sans-serif, system-ui, sans-serif'; const SERIF = '"Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif'; const sentence = "A corner bakery that sells out of sourdough and croissants before noon."; function Photo({ src, alt, tone, focus = "50% 50%", className = "" }: { src: string; alt: string; tone: string; focus?: string; className?: string }) { return (
{alt}
); } // Three designs of one invented bakery's homepage, drawn at CW by CH. const designs: { name: string; note: string; page: ReactNode }[] = [ { name: "Sorbet", note: "Pink paper, round heavy type, a sticker", page: (
EmberMenu   Find us
Open
from 7
Butter.
Layers.
Morning.
Order for pickup
), }, { name: "Crumb", note: "Black slate, thin type, flour and crust", page: (
Ember BakehouseMenu
Bread, baked
before first light.
SourdoughRyeReserve a loaf
), }, { name: "Counter", note: "Plain white, a centred serif, a price list", page: (
Ember Bakehouse
The morning counter
{[["Butter croissant", "4"], ["Country sourdough", "9"], ["Almond twice-baked", "6"]].map(([a, b]) => (
{a}{b}
))}
Order ahead
), }, ]; const DOME_RADIUS = `${DOME_W / 2}px ${DOME_W / 2}px ${DOME_W / 2}px ${DOME_W / 2}px / ${DOME_W / 2}px ${DOME_W / 2}px 18px 18px`; function Stand({ design, chosen, reduce, delay, left, onPick }: { design: (typeof designs)[number]; chosen: boolean; reduce: boolean; delay: number; left: number; onPick: () => void }) { const [peek, setPeek] = useState(false); const lift = useSpring(chosen ? 1 : 0, { stiffness: 58, damping: 11, mass: 1 }); useEffect(() => { const to = chosen ? 1 : peek ? 0.07 : 0; if (reduce) lift.jump(to); else lift.set(to); }, [chosen, peek, reduce, lift]); const domeY = useTransform(lift, (v) => -v * LIFT); // the dome is held by its knob, so it trails behind the hand and swings back const speed = useVelocity(lift); const swing = useSpring(useTransform(speed, (v) => Math.max(-5, Math.min(5, v * (v > 0 ? 2 : 0.8)))), { stiffness: 46, damping: 6.5 }); const haze = useTransform(lift, (v) => 1 - Math.min(1, v * 1.5)); const cardScale = useTransform(lift, (v) => CARD + Math.max(0, v - 0.07) * 0.2); const cardY = useTransform(lift, (v) => -Math.max(0, v - 0.07) * 8); const glow = useTransform(lift, (v) => Math.max(0, v - 0.07) * 1.05); const domeShadow = useTransform(lift, (v) => 0.3 * (1 - Math.min(1, v * 1.4))); const plateY = HEAD + DOME_H - 18; // the line the dome rests on return (
setPeek(true)} onPointerLeave={() => setPeek(false)}> {/* light that falls on the wall behind the chosen stand */} {/* the stand: foot, stem and plate, in glazed white ceramic */}
{/* the far side of the dome's rim, seen through the glass behind the card */}
{/* the shadow the dome's rim leaves on the plate while it is down */} {/* the card model of the page, standing on the plate */}
{design.page}
{/* the glass dome */}
{/* a long streak of the studio light down the left shoulder */}
{/* the same light wrapping over the crown */}
{/* a window reflected on the right shoulder */}
{/* a slow glint that crosses the glass */}
{/* the near side of the rim: a thick ground-glass lip */}
{/* the knob: a ball of blue glass on a short neck */}
); } export default function ThreeGlassCakeDomes() { const reduce = !!useReducedMotion(); const rootRef = useRef(null); const [chosen, setChosen] = useState(1); const [width, setWidth] = useState(1100); const pausedUntil = useRef(0); const chosenRef = useRef(1); chosenRef.current = chosen; useEffect(() => { const el = rootRef.current; if (!el) return; const ro = new ResizeObserver(([e]) => setWidth(e.contentRect.width)); ro.observe(el); return () => ro.disconnect(); }, []); // Self-running demo: the middle dome starts lifted, then each stand takes its turn. useEffect(() => { if (reduce) return; let seen = true; const io = new IntersectionObserver(([e]) => { seen = e.isIntersecting; }); if (rootRef.current) io.observe(rootRef.current); const id = window.setInterval(() => { if (!seen || document.hidden || Date.now() < pausedUntil.current) return; setChosen((chosenRef.current + 1) % designs.length); }, HOLD); return () => { window.clearInterval(id); io.disconnect(); }; }, [reduce]); const pick = (k: number) => { pausedUntil.current = Date.now() + 9000; setChosen(k); }; const onKey = (e: ReactKeyboardEvent, i: number) => { const n = designs.length; let to = -1; if (e.key === "ArrowRight" || e.key === "ArrowDown") to = (i + 1) % n; else if (e.key === "ArrowLeft" || e.key === "ArrowUp") to = (i + n - 1) % n; else if (e.key === "Home") to = 0; else if (e.key === "End") to = n - 1; if (to < 0) return; e.preventDefault(); pick(to); const group = e.currentTarget.parentElement; window.requestAnimationFrame(() => (group?.children[to] as HTMLElement | undefined)?.focus()); }; const narrow = width < 700; // phones: the chosen stand sits in the middle and its neighbours peek in from the sides const gap = narrow ? -34 : 14; const s = narrow ? Math.min(0.92, (width - 40) / SW) : Math.min(1, (width - 48) / (SW * 3 + gap * 2)); const rowW = SW * 3 + gap * 2; const H = HEAD + DOME_H + 78; const slide = narrow ? (1 - chosen) * (SW + gap) : 0; const counterTop = Math.round((HEAD + DOME_H + 18) * s) + 26; // where the wall meets the counter return (

Three designs of one website kept under glass domes

); } ```