60:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 61:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 62:T5bb5,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: (

SALTLINE LessonsCampsHire

Surf school, Pell Bay

Learn
the wave.

Book a first lesson Out at sunrise

), }, { name: "Dune", note: "Sand paper, a slow serif, one arch", page: (

Lessons Saltline Visit

Mornings in the water, taught slowly.

BeginnersBoard hireSummer camps

), }, { name: "Deep", note: "Black page, monospace, a timetable", page: (

Saltline / surf school[ book ]

First light.
Flat water.
Your first wave.

{[["01", "Dawn beginners", "Sat"], ["02", "Board and suit hire", "Daily"], ["03", "Week-long camp", "July"]].map(([n, t, d]) => (

{n}{t}{d}

))}

), }, ]; // 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.

); } 5f:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","framer-motion",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/framer-motion","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"framer-motion"}]]}]}]]}],["$","$L60",null,{"namespace":"@weinc","registryDependencies":[]}]]}],null]}],["$","$L61",null,{"files":[{"path":"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","content":"$62","type":"registry:component"}],"className":"h-[70svh] min-h-80"}]]}]