# Turntable of Three Acrylic Design Stands Under One Pendant Lamp That You Spin to Bring a Site Design into the Light
> Design chooser with acrylic stands, each a different design of one website, on a turntable you spin to bring one under the lamp. Free React and HTML code.
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/turntable-of-three-acrylic-design-stands-under-one-pendant-lamp-that-you-spin-to-bring-a-site-design-into-the-light).
- Page, with a live preview: https://shadcn.exchange/r/weinc/turntable-of-three-acrylic-design-stands-under-one-pendant-lamp-that-you-spin-to-bring-a-site-design-into-the-light
- Screenshot: https://shadcn.exchange/shot/weinc/turntable-of-three-acrylic-design-stands-under-one-pendant-lamp-that-you-spin-to-bring-a-site-design-into-the-light/light.png
- Registry item: https://we.inc/r/turntable-of-three-acrylic-design-stands-under-one-pendant-lamp-that-you-spin-to-bring-a-site-design-into-the-light.json
- Listed: 2026-10-28, source last changed 2026-10-28
## Install
```bash
npx shadcn@latest add https://shadcn.exchange/r/weinc/turntable-of-three-acrylic-design-stands-under-one-pendant-lamp-that-you-spin-to-bring-a-site-design-into-the-light.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/turntable-of-three-acrylic-design-stands-under-one-pendant-lamp-that-you-spin-to-bring-a-site-design-into-the-light.tsx`
```tsx
import { useEffect, useRef, useState } from "react";
import type { KeyboardEvent as ReactKeyboardEvent, PointerEvent as ReactPointerEvent, ReactNode } from "react";
import { animate, motion, useMotionValue, useReducedMotion, useTransform } from "framer-motion";
import type { MotionValue } from "framer-motion";
// One stand is a print PW by PH pixels sealed in clear acrylic. The designs below are drawn at that size.
const PW = 250;
const PH = 330;
const STEP = 120; // degrees between stands
const TILT = 13; // how far the camera looks down on the table, in degrees
const BLUE = "#4F98FB"; // the lit acrylic edges, the index dots on the rim and the active pill
const HOLD = 3800; // how long the self-running demo rests on each design, 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 MONO = 'ui-monospace, "SF Mono", Menlo, Consolas, monospace';
const sentence = "A surf school in a small bay that takes beginners out at sunrise.";
function Photo({ src, alt, tone, focus = "50% 50%", className = "", grey = false }: { src: string; alt: string; tone: string; focus?: string; className?: string; grey?: boolean }) {
return (
);
}
// Three designs of the same invented surf school's homepage.
const designs: { name: string; note: string; page: ReactNode }[] = [
{
name: "Tide",
note: "Full-bleed water, one heavy line",
page: (
SALTLINELessonsCampsHire
Surf school, Pell Bay
Learn the wave.
Book a first lessonOut at sunrise
),
},
{
name: "Dune",
note: "Sand paper, a slow serif, one arch",
page: (
),
},
];
// One printed face of a stand. `back` is the reverse of the same double-sided print.
function Face({ angle, at, back, children }: { angle: MotionValue; at: number; back?: boolean; children: ReactNode }) {
// How squarely this face looks at the lamp and the viewer: 1 facing, 0 side-on or turned away.
const facing = (a: number) => Math.max(0, Math.cos(((a + at) * Math.PI) / 180) * (back ? -1 : 1));
const shade = useTransform(angle, (a) => 0.84 - 0.84 * Math.pow(facing(a), 1.7));
const sheenX = useTransform(angle, (a) => `${50 + Math.sin(((a + at) * Math.PI) / 180) * (back ? -1 : 1) * 160}% 0%`);
return (
{children}
{/* the lamp is overhead: brighter at the top of the sheet */}
{/* the acrylic over the print: a soft band of reflection that slides as the table turns */}
);
}
function Stand({ angle, index, children }: { angle: MotionValue; index: number; children: ReactNode }) {
const at = index * STEP;
const edge = `linear-gradient(180deg, #DDEBFF 0%, ${BLUE} 22%, #2C5FB0 70%, #173566 100%)`;
const acrylic = "linear-gradient(180deg, rgba(214,230,255,0.5), rgba(120,160,225,0.18))";
return (
<>
{/* contact shadow on the table */}
{children}{children}
{/* the polished edges of the sheet catch the lamp */}
{/* the clear block the sheet is slotted into */}
);
}
export default function TurntableOfThreeDesignStands() {
const reduce = !!useReducedMotion();
const rootRef = useRef(null);
const angle = useMotionValue(0);
const [chosen, setChosen] = useState(0);
const [width, setWidth] = useState(1100);
const pausedUntil = useRef(0);
const drag = useRef<{ x: number; a: number; lastX: number; lastT: number; v: number } | null>(null);
const chosenRef = useRef(0);
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();
}, []);
const ps = Math.max(0.72, Math.min(0.92, width / 1000)); // size of a stand
const r = Math.max(118, Math.min(240, width * 0.33)); // how far the stands sit from the spindle
const R = r + 124 * ps; // radius of the platter
const floorY = Math.round(PH * ps + 124);
const stageH = Math.round(floorY + R * 0.52 + 22);
// Turn the table so that design k faces front, by the shortest way round unless `forward` is set.
const spinTo = (k: number, opts: { forward?: boolean; velocity?: number } = {}) => {
const cur = angle.get();
const base = -k * STEP;
let target = base + Math.round((cur - base) / 360) * 360;
if (opts.forward && target > cur - 1) target -= 360;
setChosen(k);
if (reduce) { angle.set(target); return; }
animate(angle, target, { type: "spring", stiffness: 42, damping: 9.5, mass: 1.15, velocity: opts.velocity ?? 0, restDelta: 0.02 });
};
// Self-running demo: start on the first design, then click the table round one stand at a time.
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 || drag.current || Date.now() < pausedUntil.current) return;
spinTo((chosenRef.current + 1) % designs.length, { forward: true });
}, HOLD);
return () => { window.clearInterval(id); io.disconnect(); };
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [reduce]);
const pick = (k: number) => { pausedUntil.current = Date.now() + 9000; spinTo(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 onDown = (e: ReactPointerEvent) => {
if (reduce) return;
angle.stop();
drag.current = { x: e.clientX, a: angle.get(), lastX: e.clientX, lastT: performance.now(), v: 0 };
e.currentTarget.setPointerCapture(e.pointerId);
};
const onMove = (e: ReactPointerEvent) => {
const d = drag.current;
if (!d) return;
const k = 150 / Math.max(r, 1) * 0.42; // degrees of turn for each pixel dragged
angle.set(d.a + (e.clientX - d.x) * k);
const now = performance.now();
const dt = Math.max(1, now - d.lastT);
d.v = d.v * 0.6 + (((e.clientX - d.lastX) * k) / dt) * 1000 * 0.4;
d.lastX = e.clientX;
d.lastT = now;
};
const onUp = () => {
const d = drag.current;
if (!d) return;
drag.current = null;
pausedUntil.current = Date.now() + 9000;
// let the platter coast on, then drop into the nearest detent
const coast = angle.get() + d.v * 0.28;
const k = Math.round(-coast / STEP);
const n = designs.length;
const target = -k * STEP;
setChosen(((k % n) + n) % n);
animate(angle, target, { type: "spring", stiffness: 42, damping: 9.5, mass: 1.15, velocity: d.v, restDelta: 0.02 });
};
return (
Three designs of one website on a turntable
{/* the pendant lamp and its light */}
{/* the table and the three stands, in real perspective */}
{/* the thickness of the platter */}
{Array.from({ length: 16 }, (_, k) => (
= 14 ? "#59606E" : k === 0 ? "#2A2E37" : k % 5 === 2 ? "#23262E" : "#14161B" }} />
))}
{/* its turned metal face: the highlight belongs to the lamp, so it stays put while the table spins */}
{/* what turns with the table: index dots on the rim and the spindle cap */}
{designs.map((d, i) => (
))}
{designs.map((d, i) => (
{d.page}
))}
{designs.map((d, i) => (
))}
{designs[chosen].note}
“{sentence}” One sentence, three models. Drag the table to turn it.