Keyword Converge

Distill a pile of scattered ideas into one core message. Keywords start spread across the block on a golden-angle spiral, each floating on its own; once triggered, springs pull them toward the center from farthest to nearest, shrinking, blurring and fading on the way. As they near the center a glow flares, then the conclusion surfaces character by character out of a blur, with words marked by {{ }} shown in the accent color. It can play when scrolled into view, on click, or fully controlled, and it can loop.

Playground

Tune the props live — the code snippet updates as you go, so you can dial in the look you want before copying it.

import * as React from "react";

export default function Example() {
  return (
    <div className="flex min-h-[320px] w-full items-center justify-center p-6">

<KeywordConverge/>

    </div>
  );
}

Installation

npx webberui@latest add https://webberui.com/r/keyword-converge.en.json

Usage

import { KeywordConverge } from "@/components/ui/keyword-converge";

<KeywordConverge
  keywords={[
    { text: "客訴變多", weight: 3 },
    { text: "回覆太慢", weight: 3 },
    { text: "資料分散", weight: 2 },
    "人力不足",
    "重複輸入",
    "找不到紀錄",
  ]}
  conclusion="問題不在人，在於{{資訊沒有集中}}"
  trigger="inView"
  delay={800}
/>

Props

KeywordConvergeItem

CSS variables

How it works

• Scatter positions are deterministic: a golden-angle spiral plus a small per-index hash offset, with no Math.random, so server and browser render the same layout and it does not reshuffle on reload; the center is kept free for the conclusion.
• Keywords converge in order of distance from the center, farthest first, so they arrive almost together; when scattering back the nearest leave first.
• The conclusion is split with Array.from, so each CJK character surfaces on its own (25ms apart), while English is grouped by word and never breaks mid-word.
• --wb-keyword-converge-stagger and --wb-keyword-converge-glow are read once on mount to schedule the glow and the conclusion.
• When looping with trigger="inView", it waits about 1.2s longer after returning to scatter before converging again, so the scattered keywords settle first.

Accessibility

• The keyword layer and the per-character animation are aria-hidden; a sr-only line reads "Keywords: A, B, C. Conclusion: …" so screen readers get the full content at once
• The conclusion container is aria-live="polite" and only gets text on entering resolved, so nothing is announced while scattering or converging
• With trigger="click", a type="button" covers the whole block: it is focusable with Tab, activates with Enter or Space, has a focus-visible ring and a visible text hint, and is disabled while converging
• When the system "reduce motion" setting is on, keywords do not float or fly: they fade out in place and the whole conclusion fades straight in, with no glow or per-character blur