{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "bento-grid-3", "title": "Bento Grid 3", "description": "Solace UI bento grid block variation 3.", "dependencies": [ "motion" ], "files": [ { "path": "src/registry/blocks/bento-grid/three/index.tsx", "content": "\"use client\";\n\nimport { motion, useInView } from \"motion/react\";\nimport { useRef, type ReactNode } from \"react\";\n\ntype IconProps = {\n className?: string;\n};\n\ntype MessagingApp = {\n name: string;\n ring: 1 | 2 | 3;\n slot: number;\n direction: \"normal\" | \"reverse\";\n duration: number;\n icon: (props: IconProps) => ReactNode;\n};\n\ntype ActionItem = {\n label: string;\n icon: (props: IconProps) => ReactNode;\n};\n\ntype Platform = {\n name: string;\n icon: (props: IconProps) => ReactNode;\n active?: boolean;\n};\n\nconst messagingApps: MessagingApp[] = [\n { name: \"Slack\", ring: 3, slot: 0, direction: \"normal\", duration: 18, icon: SlackPlaceholderIcon },\n { name: \"Telegram\", ring: 2, slot: 1, direction: \"reverse\", duration: 16, icon: TelegramPlaceholderIcon },\n { name: \"WhatsApp\", ring: 3, slot: 2, direction: \"normal\", duration: 18, icon: WhatsAppPlaceholderIcon },\n { name: \"Gmail\", ring: 2, slot: 3, direction: \"reverse\", duration: 16, icon: GmailPlaceholderIcon },\n];\n\nconst actionItems: ActionItem[] = [\n { label: \"Inbox cleanup and summarisation\", icon: MailIcon },\n { label: \"Calendar scheduling\", icon: CalendarIcon },\n { label: \"Smart reminders\", icon: BellIcon },\n { label: \"Tools and workflow automations\", icon: SettingsIcon },\n];\n\nconst platforms: Platform[] = [\n { name: \"macOS\", icon: AppleIcon, active: true },\n { name: \"Windows\", icon: WindowsIcon },\n { name: \"Linux\", icon: LinuxIcon },\n { name: \"Docker\", icon: DockerIcon },\n { name: \"Source\", icon: CodeIcon },\n];\n\nconst installCommands = [\n \"$ pipx install openclaw\",\n \"$ openclaw login\",\n \"✓ Logged in as michael@acme.com\",\n \"$ openclaw connect slack\",\n \"✓ Connected to Slack\",\n \"$ openclaw start\",\n \"OpenClaw is ready.\",\n];\n\nconst savingsCharts = [\n {\n label: \"Without OpenClaw\",\n value: \"12.4h\",\n note: \"weekly admin load\",\n color: \"#a1a1aa\",\n data: [18, 21, 19, 23, 26, 24, 28],\n },\n {\n label: \"With OpenClaw\",\n value: \"3.8h\",\n note: \"after automation\",\n color: \"#C62828\",\n data: [18, 15, 13, 11, 8, 6, 5],\n },\n];\n\nfunction getRingSize(ring: number) {\n return ring === 1 ? 144 : ring === 2 ? 212 : 284;\n}\n\nfunction OpenClawMark({ className }: IconProps) {\n return (\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n\n );\n}\n\nfunction FingerprintIcon({ className }: IconProps) {\n return (\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n );\n}\n\nfunction WhatsAppPlaceholderIcon({ className }: IconProps) {\n return (\n \n \n \n \n \n \n \n \n \n \n \n \n\n );\n}\n\nfunction TelegramPlaceholderIcon({ className }: IconProps) {\n return (\n \n \n \n \n \n \n \n \n \n \n \n \n \n\n );\n}\n\nfunction GmailPlaceholderIcon({ className }: IconProps) {\n return (\n \n \n \n \n \n \n \n\n );\n}\n\nfunction SlackPlaceholderIcon({ className }: IconProps) {\n return (\n \n \n \n \n \n \n\n );\n}\n\nfunction MailIcon({ className }: IconProps) {\n return ;\n}\n\nfunction CalendarIcon({ className }: IconProps) {\n return ;\n}\n\nfunction BellIcon({ className }: IconProps) {\n return ;\n}\n\nfunction SettingsIcon({ className }: IconProps) {\n return ;\n}\n\nfunction LockIcon({ className }: IconProps) {\n return ;\n}\n\nfunction AppleIcon({ className }: IconProps) {\n return ;\n}\n\nfunction WindowsIcon({ className }: IconProps) {\n return ;\n}\n\nfunction LinuxIcon({ className }: IconProps) {\n return ;\n}\n\nfunction DockerIcon({ className }: IconProps) {\n return ;\n}\n\nfunction CodeIcon({ className }: IconProps) {\n return ;\n}\n\nfunction OpenClawOrbit({ isActive }: { isActive: boolean }) {\n return (\n
\n
\n {[72, 106, 142].map((size) => (\n \n ))}\n
\n \n
\n {messagingApps.map((app, index) => {\n const Icon = app.icon;\n const ringSize = getRingSize(app.ring);\n const initialRotation = app.slot * 90 + (app.ring === 2 ? 28 : -18);\n const travel = app.direction === \"normal\" ? 360 : -360;\n\n return (\n \n \n \n \n \n );\n })}\n
\n );\n}\n\nfunction AssistantChat() {\n return (\n
\n
\n \n
H
\n
\n
\n Harshitlog\n 10:30 AM\n
\n
\n Hey OpenClaw, clean up my inbox, flag urgent messages, and schedule a 30-minute sync with Sam tomorrow.\n
\n
\n \n \n
\n \n
\n
\n
\n OpenClaw\n 10:30 AM\n
\n
\n Done. I cleaned your inbox, flagged 5 urgent emails, and scheduled the sync for 10:00 AM.\n
\n
\n \n
\n );\n}\n\nfunction SecurityPanel({ isActive }: { isActive: boolean }) {\n const securitySlots = [\n { id: \"slot-1\", row: \"top\" },\n { id: \"slot-2\", row: \"top\" },\n { id: \"slot-3\", row: \"top\" },\n { id: \"slot-4\", row: \"top\" },\n { id: \"slot-5\", row: \"bottom\" },\n { id: \"slot-6\", row: \"bottom\" },\n { id: \"slot-7\", row: \"bottom\" },\n { id: \"slot-8\", row: \"bottom\" },\n ];\n const fingerprintSlots = [1, 6, 4, 3];\n const lockSlots = [6, 0, 7, 2];\n\n return (\n
\n
\n
\n
\n {securitySlots.map((slot, index) => (\n \n {fingerprintSlots.includes(index) && (\n \n \n \n )}\n {lockSlots.includes(index) && (\n \n \n \n )}\n \n ))}\n
\n
\n );\n}\n\nfunction ActionBeam({ index }: { index: number }) {\n return (\n \n \n \n );\n}\n\nfunction ActionList() {\n return (\n
\n {actionItems.map((item, index) => {\n const Icon = item.icon;\n return (\n \n {index < actionItems.length - 1 && }\n \n \n \n {item.label}\n \n );\n })}\n
\n );\n}\n\nfunction InstallPanel() {\n return (\n
\n
\n {platforms.map((platform) => {\n const Icon = platform.icon;\n return (\n
\n \n
\n );\n })}\n
\n
\n {installCommands.map((line, index) => (\n \n \n {line}\n \n \n ))}\n
\n
\n );\n}\n\nfunction MiniAreaChart({ chart, index }: { chart: (typeof savingsCharts)[number]; index: number }) {\n const max = Math.max(...chart.data);\n const min = Math.min(...chart.data);\n const range = Math.max(max - min, 1);\n const points = chart.data.map((value, pointIndex) => {\n const x = (pointIndex / (chart.data.length - 1)) * 100;\n const y = 72 - ((value - min) / range) * 46;\n\n return { x, y };\n });\n const linePath = points.map((point, pointIndex) => `${pointIndex === 0 ? \"M\" : \"L\"}${point.x},${point.y}`).join(\" \");\n const areaPath = `${linePath} L100,82 L0,82 Z`;\n const gradientId = `openclaw-savings-gradient-${index}`;\n\n return (\n
\n
\n
\n

{chart.label}

\n

{chart.value}

\n
\n \n {chart.note}\n \n
\n \n \n \n \n \n \n \n {[18, 34, 50, 66].map((y) => (\n \n ))}\n \n \n \n
\n );\n}\n\nfunction SavingsPanel() {\n return (\n
\n {savingsCharts.map((chart, index) => (\n \n ))}\n
\n );\n}\n\nconst featureCards = [\n {\n title: \"Works in the apps you already use\",\n description: \"Chat with OpenClaw in WhatsApp, Telegram, Slack, or over email.\",\n visual: (isActive: boolean) => ,\n },\n {\n title: \"Personal assistant that takes actions\",\n description: \"Ask in natural language. OpenClaw gets things done across your apps and tools.\",\n visual: () => ,\n },\n {\n title: \"Private and secure\",\n description: \"Local-first by default, with clear permissions and audit trails you can review.\",\n visual: (isActive: boolean) => ,\n },\n {\n title: \"Automate busywork\",\n description: \"Let OpenClaw handle repetitive tasks so you can focus on what matters.\",\n visual: () => ,\n },\n {\n title: \"Get started with one command\",\n description: \"Install in seconds and connect your apps.\",\n visual: () => ,\n },\n {\n title: \"Save hours every week\",\n description: \"OpenClaw handles the noise so you can get more done, every day.\",\n visual: () => ,\n },\n];\n\nexport default function BentoGridThree() {\n const sectionRef = useRef(null);\n const isInView = useInView(sectionRef, { amount: 0.2 });\n\n return (\n
\n
\n

\n OpenClaw at a glance\n

\n
\n {featureCards.map((card, index) => (\n \n
{card.visual(isInView)}
\n
\n

\n {card.title}\n

\n

\n {card.description}\n

\n
\n \n ))}\n
\n
\n
\n );\n}\n", "type": "registry:component", "target": "components/bento-grid-3.tsx" } ], "type": "registry:block" }