{"$schema":"https://ui.shadcn.com/schema/registry.json","author":"Kaiyu Hsu ","categories":["effects","colorful"],"dependencies":["lucide-react","motion"],"description":"Android's Circle to Search — enter search mode, lasso anything with a glowing stroke, and results slide up for the circled item.","devDependencies":[],"files":[{"content":"\"use client\";\n\nimport { useRef, useState } from \"react\";\nimport { Search, Sparkles, X } from \"lucide-react\";\nimport { AnimatePresence, motion, useReducedMotion } from \"motion/react\";\n\nimport { PhoneFrame } from \"./phone-frame\";\n\ninterface Item {\n id: string;\n name: string;\n price: string;\n hue: number;\n result: string;\n}\n\nconst ITEMS: Item[] = [\n {\n hue: 38,\n id: \"lamp\",\n name: \"Arc lamp\",\n price: \"$249\",\n result: \"Arne floor lamp · from $219 at 4 stores\",\n },\n {\n hue: 20,\n id: \"chair\",\n name: \"Lounge chair\",\n price: \"$1,190\",\n result: \"Teak lounge chair · $980–$1,320\",\n },\n {\n hue: 150,\n id: \"vase\",\n name: \"Stone vase\",\n price: \"$89\",\n result: \"Travertine vase · $74 at 9 stores\",\n },\n { hue: 260, id: \"rug\", name: \"Wool rug\", price: \"$430\", result: \"Berber wool rug · from $389\" },\n];\n\ninterface Point {\n x: number;\n y: number;\n}\n\nexport const CircleToSearch = () => {\n const [searchMode, setSearchMode] = useState(false);\n const [points, setPoints] = useState([]);\n const [match, setMatch] = useState(null);\n const drawingRef = useRef(false);\n const pointsRef = useRef([]);\n const stageRef = useRef(null);\n const cardRefs = useRef(new Map());\n const reduceMotion = useReducedMotion() ?? false;\n\n // Pointer events and layout rects are in viewport pixels, but the stroke and hit-test live in\n // the stage's own CSS pixels; they diverge whenever an ancestor is transformed.\n const localPoint = (clientX: number, clientY: number): Point | null => {\n const stage = stageRef.current;\n if (!stage) {\n return null;\n }\n const rect = stage.getBoundingClientRect();\n const scale = rect.width / stage.offsetWidth || 1;\n return { x: (clientX - rect.left) / scale, y: (clientY - rect.top) / scale };\n };\n\n const finishDraw = () => {\n if (!drawingRef.current) {\n return;\n }\n drawingRef.current = false;\n const drawn = pointsRef.current;\n if (drawn.length < 8) {\n pointsRef.current = [];\n setPoints([]);\n return;\n }\n const cx = drawn.reduce((sum, p) => sum + p.x, 0) / drawn.length;\n const cy = drawn.reduce((sum, p) => sum + p.y, 0) / drawn.length;\n for (const item of ITEMS) {\n const node = cardRefs.current.get(item.id);\n if (!node) {\n continue;\n }\n const rect = node.getBoundingClientRect();\n const topLeft = localPoint(rect.left, rect.top);\n const bottomRight = localPoint(rect.right, rect.bottom);\n if (!topLeft || !bottomRight) {\n continue;\n }\n if (cx >= topLeft.x && cx <= bottomRight.x && cy >= topLeft.y && cy <= bottomRight.y) {\n setMatch(item);\n break;\n }\n }\n };\n\n const reset = () => {\n setSearchMode(false);\n pointsRef.current = [];\n setPoints([]);\n setMatch(null);\n };\n\n return (\n \n
\n
\n

Autumn lookbook

\n

Editorial · 12 pieces

\n
\n {ITEMS.map((item) => (\n {\n if (node) {\n cardRefs.current.set(item.id, node);\n } else {\n cardRefs.current.delete(item.id);\n }\n }}\n className=\"overflow-hidden rounded-2xl ring-1 ring-white/[0.07] transition-shadow\"\n style={\n match?.id === item.id\n ? { boxShadow: \"0 0 0 3px #a5b4fc, 0 8px 40px rgba(129,140,248,0.35)\" }\n : undefined\n }\n >\n \n
\n

{item.name}

\n

{item.price}

\n
\n
\n ))}\n
\n

\n Warm woods, washed stone and low light — the pieces we keep reaching for once the\n evenings draw in.\n

\n
\n\n \n {searchMode && (\n \n
\n \n \n )}\n \n\n {searchMode && (\n {\n if (match) {\n return;\n }\n drawingRef.current = true;\n event.currentTarget.setPointerCapture(event.pointerId);\n const point = localPoint(event.clientX, event.clientY);\n if (point) {\n pointsRef.current = [point];\n setPoints([point]);\n }\n }}\n onPointerMove={(event) => {\n if (!drawingRef.current) {\n return;\n }\n const point = localPoint(event.clientX, event.clientY);\n if (point) {\n pointsRef.current = [...pointsRef.current, point];\n setPoints(pointsRef.current);\n }\n }}\n onPointerUp={finishDraw}\n onPointerCancel={finishDraw}\n >\n \n \n \n \n \n \n \n \n {points.length > 1 && (\n `${p.x},${p.y}`).join(\" \")}\n fill=\"none\"\n stroke=\"url(#cts-stroke)\"\n strokeWidth=\"5\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n opacity=\"0.95\"\n style={{ filter: \"drop-shadow(0 0 10px rgba(165,180,252,0.8))\" }}\n />\n )}\n \n
\n )}\n\n \n {match && (\n \n
\n Circle to Search\n
\n
\n \n
\n

{match.result}

\n

Visual match · {match.name}

\n
\n
\n \n Done\n \n \n )}\n \n\n
\n (searchMode ? reset() : setSearchMode(true))}\n whileTap={{ scale: 0.9 }}\n className={`flex items-center gap-2 rounded-full px-4 py-2 text-[12px] font-medium ring-1 backdrop-blur-md transition-colors ${\n searchMode\n ? \"bg-indigo-400/20 text-indigo-200 ring-indigo-300/40\"\n : \"bg-white/10 text-white/70 ring-white/15\"\n }`}\n >\n {searchMode ? : }\n {searchMode ? \"Exit search\" : \"Tap to search\"}\n \n
\n\n {searchMode && !match && (\n

\n Circle anything\n

\n )}\n \n \n );\n};\n","path":"/circle-to-search.tsx","target":"uicapsule/circle-to-search/circle-to-search.tsx","type":"registry:file"},{"content":"import type { ReactNode } from \"react\";\n\n// Screen is 330×716 (iPhone 15 proportions); the clay shell adds a 16px lip on every side.\nexport const SCREEN_WIDTH = 330;\nexport const SCREEN_HEIGHT = 716;\n\ninterface Clay {\n base: string;\n deep: string;\n light: string;\n /** RGB triplet for inner shading, tinted so each tone reads as one material. */\n rim: string;\n}\n\n// Dark matte clay: `light` is the lit top face, `base` the body, `deep` the shaded underside.\nconst TONES = {\n espresso: { base: \"#3a2b24\", deep: \"#1f1612\", light: \"#5a4436\", rim: \"32 20 14\" },\n graphite: { base: \"#303036\", deep: \"#18181c\", light: \"#4a4a52\", rim: \"10 10 14\" },\n moss: { base: \"#2f3a2c\", deep: \"#171d15\", light: \"#4a5a44\", rim: \"12 18 10\" },\n ochre: { base: \"#4a3c20\", deep: \"#261e0e\", light: \"#6e5a30\", rim: \"30 22 6\" },\n plum: { base: \"#3c2a3a\", deep: \"#1e141d\", light: \"#5c4058\", rim: \"26 12 24\" },\n slate: { base: \"#2a3448\", deep: \"#141a26\", light: \"#435270\", rim: \"10 16 30\" },\n teal: { base: \"#233a3a\", deep: \"#101d1d\", light: \"#38585a\", rim: \"6 22 22\" },\n terracotta: { base: \"#4a2c22\", deep: \"#26150f\", light: \"#6c4232\", rim: \"34 14 8\" },\n} satisfies Record;\n\nexport type ClayTone = keyof typeof TONES;\n\nconst shellShadow = (rim: string) =>\n [\n \"0 60px 100px -40px rgb(0 0 0 / 0.85)\",\n \"0 26px 40px -24px rgb(0 0 0 / 0.7)\",\n \"inset 0 6px 6px rgb(255 255 255 / 0.16)\",\n `inset 0 -14px 22px rgb(${rim} / 0.75)`,\n \"inset 12px 0 18px -12px rgb(255 255 255 / 0.1)\",\n `inset -12px 0 18px -12px rgb(${rim} / 0.6)`,\n ].join(\", \");\n\nconst Nub = ({ className, clay }: { className: string; clay: Clay }) => (\n \n);\n\ninterface PhoneFrameProps {\n children: ReactNode;\n /** Classes for the screen: background, text color, pointer handling. */\n className?: string;\n /** Hide the Dynamic Island when the screen draws its own status area. */\n island?: boolean;\n tone?: ClayTone;\n}\n\nexport const PhoneFrame = ({\n children,\n className,\n island = true,\n tone = \"graphite\",\n}: PhoneFrameProps) => {\n const clay = TONES[tone];\n return (\n \n \n \n \n \n \n {children}\n {island && (\n \n )}\n \n \n );\n};\n","path":"/phone-frame.tsx","target":"uicapsule/circle-to-search/phone-frame.tsx","type":"registry:file"},{"content":"\"use client\";\n\nimport { CircleToSearch } from \"./circle-to-search\";\n\nconst Preview = () => (\n
\n \n
\n);\n\nexport default Preview;\n","path":"/preview.tsx","target":"uicapsule/circle-to-search/preview.tsx","type":"registry:file"}],"homepage":"https://www.uicapsule.com/ui/circle-to-search","name":"circle-to-search","registryDependencies":[],"title":"Circle to Search","type":"registry:block"}