Components / Motion / Converge

Converge beta

Light streams gather into one tile — many inputs, one place where they land.

Preview

Calendar Inbox Chat

<div class="k-converge" style="max-width:430px">
  <i class="stream s1"></i><i class="stream s2"></i><i class="glow"></i>
  <div class="src">
    <span><svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3.5" y="5" width="17" height="16" rx="2"/><path d="M3.5 10h17M8 3v4M16 3v4"/></svg> Calendar</span>
    <span><svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="5" width="18" height="14" rx="2"/><path d="m3 7 9 6 9-6"/></svg> Inbox</span>
    <span><svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M21 11.5a8.5 8.5 0 0 1-12.4 7.1L3 21l2.4-5.6A8.5 8.5 0 1 1 21 11.5Z"/></svg> Chat</span>
  </div>
  <div class="k-converge-tile"><svg width="27" height="27" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 3l1.8 5.2L19 10l-5.2 1.8L12 17l-1.8-5.2L5 10l5.2-1.8L12 3Z"/><path d="M19 15l.9 2.1L22 18l-2.1.9L19 21l-.9-2.1L16 18l2.1-.9L19 15Z"/></svg></div>
</div>

.k-converge{width:100%;position:relative;border-radius:14px;background:var(--k-zinc-950);overflow:hidden;min-height:196px;display:grid;place-items:center;font-family:var(--k-font)}
.k-converge .src{position:absolute;left:16px;top:50%;transform:translateY(-50%);display:grid;gap:7px;z-index:3}
.k-converge .src span{display:flex;gap:6px;align-items:center;background:color-mix(in srgb,var(--k-on-color) 10%,transparent);border:1px solid color-mix(in srgb,var(--k-on-color) 28%,transparent);color:var(--k-on-color);backdrop-filter:blur(6px);font-size:11px;padding:5px 9px;border-radius:7px}
.k-converge .stream{position:absolute;left:-12%;top:50%;width:64%;height:88px;border-radius:50%;filter:blur(16px);display:block}
.k-converge .s1{transform:translateY(-88%) rotate(-7deg);background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--k-accent) 70%,transparent),color-mix(in srgb,var(--k-on-color) 65%,transparent));animation:k-conv 3.4s var(--k-ease) infinite alternate}
.k-converge .s2{transform:translateY(-12%) rotate(5deg);background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--k-accent) 55%,transparent),color-mix(in srgb,var(--k-on-color) 45%,transparent));animation:k-conv 3.4s var(--k-ease) .7s infinite alternate-reverse}
.k-converge .glow{position:absolute;left:50%;top:50%;width:200px;height:200px;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--k-accent) 60%,transparent),transparent 65%);animation:k-conv-pulse 3.4s var(--k-ease) infinite alternate}
.k-converge-tile{position:relative;z-index:2;width:64px;height:64px;border-radius:16px;background:var(--k-bg);display:grid;place-items:center;color:var(--k-ink);box-shadow:0 0 46px color-mix(in srgb,var(--k-accent) 55%,transparent)}
@keyframes k-conv{from{opacity:.55;margin-left:0}to{opacity:1;margin-left:26px}}
@keyframes k-conv-pulse{from{transform:translate(-50%,-50%) scale(.92);opacity:.7}to{transform:translate(-50%,-50%) scale(1.12);opacity:1}}
@media (prefers-reduced-motion:reduce){.k-converge .stream,.k-converge .glow{animation:none}}

Usage

For the moment a product pulls everything into itself: integration heroes, import screens, AI summaries. The tile holds your mark or the action everything feeds.

Accessibility

Pure CSS. The streams stop under prefers-reduced-motion; the tile and its label carry the meaning without them.

Related parts

Aurora beta

A slow wash of color behind a hero — the accent and the core, drifting under glass.

gradientheroambient

Beam border beta

A single point of light travels the edge of a card. The beam is the core color — the one accent, in motion.

borderglowhighlightcard

Counter beta

Numbers that count up once, when they arrive on screen — machined, not bouncy.

numbercount-upstatsscroll

Follow Frame beta

A dashed frame that trails the cursor and names the action waiting there.

cursortrackingplayful

Beam border

Counter