{"type":"doc","content":[{"type":"heading","attrs":{"level":2},"content":[{"type":"text","text":"What it does"}]},{"type":"paragraph","content":[{"type":"text","text":"A picture sits in a frame with four independent corner radii. Every time the photo (or the aspect ratio) changes, each corner re-rolls to either a full pill ("},{"type":"text","text":"999px","marks":[{"type":"code"}]},{"type":"text","text":") or a soft "},{"type":"text","text":"60px","marks":[{"type":"code"}]},{"type":"text","text":" — with one rule: "},{"type":"text","text":"never all four the same","marks":[{"type":"bold"}]},{"type":"text","text":", so the frame always has a direction. Square, landscape and portrait pickers; portrait by default. The transitions are eased, so a change *rolls* rather than snaps."}]},{"type":"paragraph","content":[{"type":"text","text":"It's a small idea that makes a gallery feel handmade instead of templated."}]},{"type":"heading","attrs":{"level":2},"content":[{"type":"text","text":"Try it"}]},{"type":"paragraph","content":[{"type":"text","text":"Use the picker in the tile above — every change re-rolls the corners."}]},{"type":"heading","attrs":{"level":2},"content":[{"type":"text","text":"How it works"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"roll()","marks":[{"type":"code"}]},{"type":"text","text":" draws four booleans and rejects the two all-equal outcomes, then maps them to "},{"type":"text","text":"999px | 60px","marks":[{"type":"code"}]},{"type":"text","text":"."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"The radii are written as a single "},{"type":"text","text":"border-radius","marks":[{"type":"code"}]},{"type":"text","text":" shorthand on the frame and animated with CSS "},{"type":"text","text":"transition","marks":[{"type":"code"}]},{"type":"text","text":", so the browser tweens between corner states."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Photos come from "},{"type":"text","text":"/home-2026/lab/photo-{1,2,3}.jpg","marks":[{"type":"code"}]},{"type":"text","text":"; if an image fails, a gradient fallback fills the frame so the layout never breaks."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Aspect ratios are a small map ("},{"type":"text","text":"square","marks":[{"type":"code"}]},{"type":"text","text":", "},{"type":"text","text":"landscape","marks":[{"type":"code"}]},{"type":"text","text":", "},{"type":"text","text":"portrait","marks":[{"type":"code"}]},{"type":"text","text":") applied with "},{"type":"text","text":"aspect-ratio","marks":[{"type":"code"}]},{"type":"text","text":"."}]}]}]},{"type":"heading","attrs":{"level":2},"content":[{"type":"text","text":"Settings"}]},{"type":"paragraph","content":[{"type":"text","text":"The gear in the top corner of the demo (14px, "},{"type":"text","text":"Settings","marks":[{"type":"code"}]},{"type":"text","text":" icon) opens a menu of this lab's controls; every change updates the demo live. Save keeps your values in the browser, Reset restores the defaults, and a universal \"Hide controls\" switch hides every lab's gear at once (a small \"show controls\" link brings it back)."}]},{"type":"enhancedImage","attrs":{"src":"/labs/shots/rotating-frame-settings.png","alt":"The Frame settings menu: aspect, round and soft radius, change interval, auto-cycle, never all same","title":"The Frame settings menu: aspect, round and soft radius, change interval, auto-cycle, never all same","width":null}},{"type":"table","content":[{"type":"tableRow","content":[{"type":"tableHeader","content":[{"type":"paragraph","content":[{"type":"text","text":"Control"}]}]},{"type":"tableHeader","content":[{"type":"paragraph","content":[{"type":"text","text":"Type"}]}]},{"type":"tableHeader","content":[{"type":"paragraph","content":[{"type":"text","text":"Default"}]}]},{"type":"tableHeader","content":[{"type":"paragraph","content":[{"type":"text","text":"Range or options"}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","content":[{"type":"paragraph","content":[{"type":"text","text":"Aspect"}]}]},{"type":"tableCell","content":[{"type":"paragraph","content":[{"type":"text","text":"select"}]}]},{"type":"tableCell","content":[{"type":"paragraph","content":[{"type":"text","text":"Portrait"}]}]},{"type":"tableCell","content":[{"type":"paragraph","content":[{"type":"text","text":"Square, Landscape, Portrait"}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","content":[{"type":"paragraph","content":[{"type":"text","text":"Round radius"}]}]},{"type":"tableCell","content":[{"type":"paragraph","content":[{"type":"text","text":"range"}]}]},{"type":"tableCell","content":[{"type":"paragraph","content":[{"type":"text","text":"999px"}]}]},{"type":"tableCell","content":[{"type":"paragraph","content":[{"type":"text","text":"200px to 999px"}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","content":[{"type":"paragraph","content":[{"type":"text","text":"Soft radius"}]}]},{"type":"tableCell","content":[{"type":"paragraph","content":[{"type":"text","text":"range"}]}]},{"type":"tableCell","content":[{"type":"paragraph","content":[{"type":"text","text":"60px"}]}]},{"type":"tableCell","content":[{"type":"paragraph","content":[{"type":"text","text":"8px to 200px"}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","content":[{"type":"paragraph","content":[{"type":"text","text":"Change interval"}]}]},{"type":"tableCell","content":[{"type":"paragraph","content":[{"type":"text","text":"range"}]}]},{"type":"tableCell","content":[{"type":"paragraph","content":[{"type":"text","text":"4000ms"}]}]},{"type":"tableCell","content":[{"type":"paragraph","content":[{"type":"text","text":"800ms to 10000ms"}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","content":[{"type":"paragraph","content":[{"type":"text","text":"Auto-cycle"}]}]},{"type":"tableCell","content":[{"type":"paragraph","content":[{"type":"text","text":"toggle"}]}]},{"type":"tableCell","content":[{"type":"paragraph","content":[{"type":"text","text":"on"}]}]},{"type":"tableCell","content":[{"type":"paragraph","content":[{"type":"text","text":"on/off"}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","content":[{"type":"paragraph","content":[{"type":"text","text":"Never all same"}]}]},{"type":"tableCell","content":[{"type":"paragraph","content":[{"type":"text","text":"toggle"}]}]},{"type":"tableCell","content":[{"type":"paragraph","content":[{"type":"text","text":"on"}]}]},{"type":"tableCell","content":[{"type":"paragraph","content":[{"type":"text","text":"on/off"}]}]}]}]},{"type":"paragraph","content":[{"type":"text","text":"Going live: pass "},{"type":"text","text":"showControls={false}","marks":[{"type":"code"}]},{"type":"text","text":" to hide the gear in production, or keep it and let visitors dial it in."}]},{"type":"heading","attrs":{"level":2},"content":[{"type":"text","text":"Install"}]},{"type":"orderedList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Download "},{"type":"text","text":"RotatingFrame.tsx","marks":[{"type":"code"}]},{"type":"text","text":" (button above) and drop it anywhere in your React/Next project — it's a client component ("},{"type":"text","text":"\"use client\"","marks":[{"type":"code"}]},{"type":"text","text":")."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Install the icon set it uses if you don't have it: "},{"type":"text","text":"npm i lucide-react","marks":[{"type":"code"}]},{"type":"text","text":"."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Put your own photos in "},{"type":"text","text":"public/","marks":[{"type":"code"}]},{"type":"text","text":" and edit the "},{"type":"text","text":"PHOTOS","marks":[{"type":"code"}]},{"type":"text","text":" array at the top of the file."}]}]}]},{"type":"codeBlock","attrs":{"language":"bash"},"content":[{"type":"text","text":"npm i lucide-react"}]},{"type":"heading","attrs":{"level":2},"content":[{"type":"text","text":"Use"}]},{"type":"codeBlock","attrs":{"language":"tsx"},"content":[{"type":"text","text":"import RotatingFrame from \"@/components/RotatingFrame\";\n\nexport default function Gallery() {\n return (\n

\n \n

\n );\n}"}]},{"type":"paragraph","content":[{"type":"text","text":"The component fills its parent, so give the parent a height. To change the two radii the roll chooses between, edit "},{"type":"text","text":"PILL","marks":[{"type":"code"}]},{"type":"text","text":" and "},{"type":"text","text":"SOFT","marks":[{"type":"code"}]},{"type":"text","text":" near the top of the file; to make it re-roll on a timer instead of on a click, call "},{"type":"text","text":"roll()","marks":[{"type":"code"}]},{"type":"text","text":" from a "},{"type":"text","text":"setInterval","marks":[{"type":"code"}]},{"type":"text","text":" in the existing "},{"type":"text","text":"useEffect","marks":[{"type":"code"}]},{"type":"text","text":"."}]},{"type":"heading","attrs":{"level":2},"content":[{"type":"text","text":"The source"}]},{"type":"codeBlock","attrs":{"language":"tsx"},"content":[{"type":"text","text":"// Lab: \"Rotating Corner Radius Picture\" (Figma 21:1170). A photo frame whose four\n// corners re-roll between round (999) and hover (60) each time the picture\n// changes — same rules as the homepage carousel (never all four the same).\n// Picker (21:1302): square / landscape / portrait; portrait is default. Clicking\n// changes the frame's aspect. Photos: /public/home-2026/lab/photo-{1,2,3}.jpg;\n// until they exist, three flat color fields stand in.\n\"use client\";\n\nimport { useEffect, useState } from \"react\";\nimport { Square, RectangleHorizontal, RectangleVertical } from \"lucide-react\";\nimport LabSettings, { useLabSettings, type LabSettingSchema } from \"@/components/labs/LabSettings\";\n\nconst PHOTOS = [\"/home-2026/lab/photo-1.jpg?v=2\", \"/home-2026/lab/photo-2.jpg?v=2\", \"/home-2026/lab/photo-3.jpg?v=2\"];\nconst FALLBACK = [\"linear-gradient(135deg,#ff5364,#ffc429)\", \"linear-gradient(135deg,#84ceff,#7cffb2)\", \"linear-gradient(135deg,#c79bff,#ff8490)\"];\ntype Ratio = \"square\" | \"landscape\" | \"portrait\";\nconst SIZE: Record = { square: { w: 180, h: 180 }, landscape: { w: 218, h: 163 }, portrait: { w: 163, h: 218 } };\n\nexport const ROTATING_FRAME_SETTINGS: LabSettingSchema = [\n {\n key: \"aspect\",\n label: \"Aspect\",\n kind: \"select\",\n default: \"portrait\",\n options: [\n { value: \"square\", label: \"Square\" },\n { value: \"landscape\", label: \"Landscape\" },\n { value: \"portrait\", label: \"Portrait\" },\n ],\n },\n { key: \"roundRadius\", label: \"Round radius\", kind: \"range\", default: 999, min: 200, max: 999, step: 1, unit: \"px\" },\n { key: \"softRadius\", label: \"Soft radius\", kind: \"range\", default: 60, min: 8, max: 200, step: 1, unit: \"px\" },\n { key: \"intervalMs\", label: \"Change interval\", kind: \"range\", default: 4000, min: 800, max: 10000, step: 100, unit: \"ms\" },\n { key: \"autoCycle\", label: \"Auto-cycle\", kind: \"toggle\", default: true },\n { key: \"neverAllSame\", label: \"Never all same\", kind: \"toggle\", default: true },\n];\n\nfunction rollRadius(prev: string, round: string, soft: string, neverAllSame: boolean): string {\n let next = prev;\n for (let i = 0; i < 20 && next === prev; i++) {\n const c = [0, 1, 2, 3].map(() => (Math.random() > 0.5 ? round : soft));\n if (neverAllSame && c.every((x) => x === soft)) c[Math.floor(Math.random() * 4)] = round;\n next = c.join(\" \");\n }\n return next;\n}\n\nexport default function RotatingFrame() {\n const { value, setValue, reset, save } = useLabSettings(ROTATING_FRAME_SETTINGS, \"lab:rotating-corner-radius-picture\");\n const round = `${value.roundRadius}px`;\n const soft = `${value.softRadius}px`;\n const ratio = (value.aspect as Ratio) ?? \"portrait\";\n\n const [i, setI] = useState(0);\n const [radius, setRadius] = useState(`${round} ${soft} ${soft} ${soft}`);\n const [ok, setOk] = useState([false, false, false]);\n\n useEffect(() => {\n PHOTOS.forEach((src, idx) => {\n const img = new Image();\n img.onload = () => setOk((o) => { const n = [...o]; n[idx] = true; return n; });\n img.src = src;\n });\n }, []);\n useEffect(() => {\n if (!value.autoCycle) return;\n if (window.matchMedia(\"(prefers-reduced-motion: reduce)\").matches) return;\n const id = window.setInterval(() => {\n setI((x) => (x + 1) % PHOTOS.length);\n setRadius((r) => rollRadius(r, round, soft, Boolean(value.neverAllSame)));\n }, value.intervalMs);\n return () => window.clearInterval(id);\n }, [value.autoCycle, value.intervalMs, round, soft, value.neverAllSame]);\n\n const { w, h } = SIZE[ratio];\n const bg = ok[i] ? `url(${PHOTOS[i]}) center/cover` : FALLBACK[i];\n\n return (\n

\n \n {/* Shadow twin behind the frame, blended OVERLAY (box-shadow can't blend on its own) */}\n

\n \n {/* All photos stacked; the current one fades in over 800ms. Overfilled 8% so the rounded edge never seams. */}\n {PHOTOS.map((src, idx) =>\n ok[idx] ? (\n // eslint-disable-next-line @next/next/no-img-element\n $\"\"$ \n ) : null\n )}\n

\n {([\"square\", \"landscape\", \"portrait\"] as Ratio[]).map((r) => {\n const Icon = r === \"square\" ? Square : r === \"landscape\" ? RectangleHorizontal : RectangleVertical;\n return (\n \n );\n })}\n

\n );\n}\n"}]},{"type":"heading","attrs":{"level":2},"content":[{"type":"text","text":"License"}]},{"type":"paragraph","content":[{"type":"text","text":"MIT. Take it, change it, ship it — a link back is nice but not required."}]}]}

More from the lab