50: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/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.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"] 51:T7faa,"use client"; import { useEffect, useId, useLayoutEffect, useRef, useState, type FocusEvent, type PointerEvent, type ReactNode } from "react"; /* * Integration Beam – an animated product scene, in a single self-contained file. * Your product sits in the middle, three tools on each side, joined by curved beams. In sync cycles, * soft light pulses travel from the tools on the left into the product and on out to the tools on the * right; every arrival makes the target glow. Hover a tool to bring its beam forward, click it to * pause it. The beams are measured from the real tile positions, so the scene reflows with its * container – on narrow widths the tools stack above and below and the curves morph into place. */ export type BeamTool = { /** Shown in the tooltip and read to screen readers, e.g. "Slack" */ name: string; /** Logo, drawn into a 28 × 28 box (an { ringRefs.current[i] = el; }} /> ); return (

t.name).join(", ")}`} data-focus={focus !== null || undefined} > {/* React 19 hoists this into once, no matter how many instances render */}

{left.map((t, i) => tile(t, i))}

0) || undefined}> {status}

{right.map((t, i) => tile(t, nLeft + i))}

{announce}

); } /* A neutral four-petal flower, with fainter diagonal petals */ function ProductMark() { const petal = "M24 24C17.6 19.6 16.4 9.4 24 3.5C31.6 9.4 30.4 19.6 24 24Z"; return ( ); } /* ---------- Brand marks: the brands' own marks (svgl.app, Simple Icons – CC0) ---------- */ const Svg = ({ children }: { children: ReactNode }) => ( ); const DEFAULT_CENTER: BeamCenter = { name: "Acme" }; const DEFAULT_LEFT: BeamTool[] = [ { name: "Slack", logo: ( ), }, { name: "Notion", logo: ( ), }, { name: "Gmail", logo: ( ), }, ]; const DEFAULT_RIGHT: BeamTool[] = [ { name: "HubSpot", logo: ( ), }, { name: "Linear", logo: ( ), }, { name: "Google Drive", logo: ( ), }, ]; /* ---------- Styles ---------- */ const css = /* css */ ` .ui-ib { --ui-ib-ink: #171717; --ui-ib-text: #404040; --ui-ib-muted: #8f8f8f; --ui-ib-faint: #b5b5b5; --ui-ib-line: #e2e2e2; --ui-ib-line-hi: #a9c0ff; --ui-ib-card: #ffffff; --ui-ib-tray: #f0f0f0; --ui-ib-accent: #2f6bff; /* Pulse: clear tail, accent body, a pale tip that reads as light */ --ui-ib-pulse: #2f6bff; --ui-ib-tip-color: #b9cdff; --ui-ib-ring: rgba(47, 107, 255, 0.2); --ui-ib-glow: rgba(47, 107, 255, 0.26); --ui-ib-hub: #171717; --ui-ib-hub-mark: #ffffff; --ui-ib-hub-edge: rgba(0, 0, 0, 0.9); --ui-ib-tooltip: #171717; --ui-ib-tooltip-text: #ffffff; --ui-ib-shadow: 0 0 0 1px rgba(0, 0, 0, 0.07), 0 1px 2px rgba(0, 0, 0, 0.04), 0 8px 18px -10px rgba(0, 0, 0, 0.18); --ui-ib-focus: rgba(23, 23, 23, 0.22); --ui-ib-ease: ${EASE}; position: relative; width: 100%; container-type: inline-size; font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; font-size: 13px; color: var(--ui-ib-text); -webkit-tap-highlight-color: transparent; } .ui-ib *, .ui-ib *::before, .ui-ib *::after { box-sizing: border-box; } /* ---------- Beams ---------- */ /* Absolute, so it paints below the (positioned) tiles */ .ui-ib__beams { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; } .ui-ib__line { fill: none; stroke: var(--ui-ib-line); stroke-width: 1.5; stroke-linecap: round; transition: stroke 300ms var(--ui-ib-ease), opacity 300ms var(--ui-ib-ease); } .ui-ib__line[data-off] { stroke: var(--ui-ib-faint); stroke-dasharray: 2 5; opacity: 0.75; } .ui-ib[data-focus] .ui-ib__line:not([data-focus]) { opacity: 0.35; } .ui-ib__line[data-focus]:not([data-off]) { stroke: var(--ui-ib-line-hi); } .ui-ib__pulse { opacity: 0; transition: opacity 240ms ease; } .ui-ib__pulse path { fill: none; stroke-linecap: round; transition: opacity 300ms var(--ui-ib-ease); } .ui-ib__core { stroke-width: 2; } .ui-ib__glow { stroke-width: 6; opacity: 0.45; } .ui-ib[data-focus] .ui-ib__pulse:not([data-focus]) path { opacity: 0.25; } .ui-ib__pulse[data-focus] .ui-ib__glow { opacity: 0.7; } .ui-ib__stop-tail { stop-color: var(--ui-ib-pulse); stop-opacity: 0; } .ui-ib__stop-mid { stop-color: var(--ui-ib-pulse); stop-opacity: 0.9; } .ui-ib__stop-head { stop-color: var(--ui-ib-tip-color); stop-opacity: 1; } /* ---------- Layout: side by side, stacked on narrow widths ---------- */ .ui-ib__scene { --ui-ib-stack: 0; display: grid; grid-template-columns: auto minmax(40px, 1fr) auto minmax(40px, 1fr) auto; grid-template-areas: "in . hub . out"; align-items: center; padding: 6px 0; } .ui-ib__group { display: flex; flex-direction: column; gap: 26px; } .ui-ib__group--in { grid-area: in; } .ui-ib__group--out { grid-area: out; } /* ---------- Tools ---------- */ .ui-ib__tool { position: relative; display: grid; place-items: center; width: 60px; height: 60px; padding: 0; border: 0; border-radius: 18px; background: var(--ui-ib-card); box-shadow: var(--ui-ib-shadow); color: var(--ui-ib-ink); font: inherit; cursor: pointer; transition: background-color 300ms var(--ui-ib-ease), box-shadow 300ms var(--ui-ib-ease); } .ui-ib__tool:focus-visible { outline: 2px solid var(--ui-ib-focus); outline-offset: 3px; } .ui-ib__logo { display: grid; width: 28px; height: 28px; transition: transform 300ms var(--ui-ib-ease), filter 300ms var(--ui-ib-ease), opacity 300ms var(--ui-ib-ease); } .ui-ib__logo > svg { width: 100%; height: 100%; } @media (hover: hover) { .ui-ib__tool:hover .ui-ib__logo { transform: scale(1.08); } } .ui-ib__tool[data-off] { background: var(--ui-ib-tray); } .ui-ib__tool[data-off] .ui-ib__logo { filter: grayscale(1); opacity: 0.4; } /* Arrival glow – played with the Web Animations API */ .ui-ib__ring { position: absolute; inset: 0; border-radius: inherit; box-shadow: 0 0 0 3px var(--ui-ib-ring), 0 0 22px 2px var(--ui-ib-glow); opacity: 0; pointer-events: none; } /* Tooltip: points toward the centre, so it never leaves the scene */ .ui-ib__tip { --ui-ib-tip-from: translate(-4px, -50%); position: absolute; z-index: 3; top: 50%; left: calc(100% + 10px); padding: 5px 9px; border-radius: 8px; background: var(--ui-ib-tooltip); color: var(--ui-ib-tooltip-text); font-size: 12px; font-weight: 500; line-height: 16px; white-space: nowrap; pointer-events: none; opacity: 0; transform: var(--ui-ib-tip-from); transition: opacity 180ms ease, transform 260ms var(--ui-ib-ease); } .ui-ib__group--out .ui-ib__tip { --ui-ib-tip-from: translate(4px, -50%); left: auto; right: calc(100% + 10px); } .ui-ib__tip-state { opacity: 0.6; font-weight: 400; } .ui-ib__tool[data-tip] .ui-ib__tip { opacity: 1; transform: translate(0, -50%); } /* ---------- Centre ---------- */ .ui-ib__center { grid-area: hub; position: relative; display: grid; place-items: center; width: 80px; height: 80px; border-radius: 24px; background: var(--ui-ib-hub); box-shadow: 0 0 0 1px var(--ui-ib-hub-edge), inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 14px 28px -12px rgba(0, 0, 0, 0.38); color: var(--ui-ib-hub-mark); } .ui-ib__mark { display: grid; width: 36px; height: 36px; fill: currentColor; } .ui-ib__mark > svg { width: 100%; height: 100%; } .ui-ib__ring--center { inset: -1px; } /* Status chip under the hub – absolute, so the hub itself stays centred on the beams */ .ui-ib__chip { position: absolute; top: calc(100% + 12px); left: 50%; translate: -50% 0; display: block; height: 26px; overflow: hidden; border-radius: 999px; background: var(--ui-ib-card); box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.07), 0 1px 2px rgba(0, 0, 0, 0.04); transition: width 320ms var(--ui-ib-ease); } .ui-ib__chip-inner { display: inline-flex; align-items: center; gap: 7px; width: max-content; height: 26px; padding: 0 11px 0 10px; font-size: 12px; font-weight: 500; color: var(--ui-ib-text); white-space: nowrap; font-variant-numeric: tabular-nums; } .ui-ib__status { display: inline-block; animation: ui-ib-in 320ms var(--ui-ib-ease) both; } .ui-ib__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--ui-ib-accent); transition: background-color 300ms ease; } .ui-ib__dot[data-idle] { background: var(--ui-ib-faint); } .ui-ib__center[data-syncing] .ui-ib__dot { animation: ui-ib-breathe 1.1s ease-in-out infinite; } .ui-ib__sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } @keyframes ui-ib-in { from { opacity: 0; transform: translateY(6px); filter: blur(2px); } to { opacity: 1; transform: none; filter: none; } } @keyframes ui-ib-breathe { 50% { box-shadow: 0 0 0 3px var(--ui-ib-ring); } } /* Narrow: senders above, receivers below, vertical beams */ @container (max-width: 459px) { .ui-ib__scene { --ui-ib-stack: 1; grid-template-columns: 1fr; grid-template-areas: "in" "hub" "out"; justify-items: center; row-gap: 78px; padding: 0 0 4px; } .ui-ib__group { flex-direction: row; gap: clamp(14px, 7cqw, 34px); } .ui-ib__tool { width: 56px; height: 56px; border-radius: 17px; } .ui-ib__center { width: 76px; height: 76px; border-radius: 23px; } /* Tooltips sit between the rows; the outer tools align theirs to their edge */ .ui-ib__tip, .ui-ib__group--out .ui-ib__tip { --ui-ib-tip-from: translate(-50%, -4px); top: calc(100% + 8px); right: auto; left: 50%; } .ui-ib__group--out .ui-ib__tip { --ui-ib-tip-from: translate(-50%, 4px); top: auto; bottom: calc(100% + 8px); } .ui-ib__tool[data-tip] .ui-ib__tip { transform: translate(-50%, 0); } .ui-ib__tool:first-child .ui-ib__tip { left: 0; translate: 50% 0; } .ui-ib__tool:last-child .ui-ib__tip { left: 100%; translate: -50% 0; } } /* Touch: the tiles are already 56px+; tooltips are shown after a tap instead of on hover */ @media (hover: none) and (pointer: coarse) { .ui-ib__tool { min-width: 44px; min-height: 44px; } } @media (prefers-reduced-motion: reduce) { .ui-ib__line, .ui-ib__tool, .ui-ib__logo, .ui-ib__tip, .ui-ib__chip, .ui-ib__dot { transition: none; } .ui-ib__status, .ui-ib__center[data-syncing] .ui-ib__dot { animation: none; } } /* Dark mode: follows a .dark class or data-theme="dark" on any ancestor, e.g. */ :where(.dark, [data-theme="dark"]) .ui-ib { --ui-ib-ink: #ededed; --ui-ib-text: #c8c8cc; --ui-ib-muted: #8b8b92; --ui-ib-faint: #5c5c63; --ui-ib-line: #2e2e33; --ui-ib-line-hi: #4b5f9e; --ui-ib-card: #19191b; --ui-ib-tray: #111113; --ui-ib-accent: #6d8bff; --ui-ib-pulse: #6d8bff; --ui-ib-tip-color: #ffffff; --ui-ib-ring: rgba(109, 139, 255, 0.24); --ui-ib-glow: rgba(109, 139, 255, 0.3); --ui-ib-hub: #26262a; --ui-ib-hub-mark: #ffffff; --ui-ib-hub-edge: rgba(255, 255, 255, 0.12); --ui-ib-tooltip: #ededed; --ui-ib-tooltip-text: #111113; --ui-ib-shadow: 0 0 0 1px #2a2a2e, 0 1px 2px rgba(0, 0, 0, 0.3), 0 8px 18px -10px rgba(0, 0, 0, 0.6); --ui-ib-focus: rgba(255, 255, 255, 0.3); } :where(.dark, [data-theme="dark"]) .ui-ib__chip { box-shadow: 0 0 0 1px #2a2a2e, 0 1px 2px rgba(0, 0, 0, 0.3); } `; 4f:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[null,["$","$L50",null,{"files":[{"path":"illustrations/integration-beam/integration-beam.tsx","content":"$51","type":"registry:block"}],"className":"h-[70svh] min-h-80"}]]}]