Pain Point Orbit

An interactive hero block for marketing pages: a real, typeable input sits in the center, with 6–10 small pain-point cards on an elliptical orbit around it. The more you type, the higher the pressure — cards move inward one by one in array order, tilting slightly, shrinking and overlapping; once the character count reaches pressureChars the whole cluster does a subtle squeeze-and-breathe. Press Enter or the submit button and the cards fly outward along their angles and fade, while the center swaps to the resolved node you provide. Turn on autoPlay to simulate typing on a loop; the moment the user clicks the input, control is handed back. On narrow screens the cards stack in two rows above and below the input.

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">

<PainPointOrbit/>

    </div>
  );
}

Installation

npx webberui@latest add https://webberui.com/r/pain-point-orbit.en.json

Usage

import { Mail, Sheet, CalendarClock } from "lucide-react";
import { PainPointOrbit } from "@/components/ui/pain-point-orbit";

<PainPointOrbit
  points={[
    { id: "quote", text: "Quotes buried somewhere in the inbox", icon: <Mail /> },
    { id: "sheets", text: "Client data split across three spreadsheets", icon: <Sheet /> },
    { id: "weekly", text: "Compiling the weekly report by hand", icon: <CalendarClock /> },
  ]}
  placeholder="What do you want to tackle first today?"
  autoPlay
  demoText="Pull together the latest quotes for every client"
  resolved={<div className="rounded-xl border px-4 py-3">Everything in one workspace</div>}
  onSubmit={(value) => console.log(value)}
/>

Props

The Chinese-language build of this component defaults to "今天想先處理什麼？" (What do you want to tackle first today?), "想先處理的事" (What to tackle first), "送出" (Submit) and "重新開始" (Start over).

PainPoint

How it works

• Pressure: pressure = min(1, characters / pressureChars), counted in characters (code points), so each CJK character counts as one. Card k (zero-based) activates when pressure > k / N: it moves to the inner ring, tilts by a deterministic angle within ±3°, scales to 0.92 and stacks above earlier cards by activation order.
• Starting angles are evenly spaced plus a small deterministic offset derived from the index (no random numbers, so SSR and the client match); orbit radii are clamped inside the container so cards are never clipped.
• Card motion is a spring (damping fixed at 18, stiffness adjustable); on submit the cards fly outward along their angles, staggered 40ms apart.
• Tempo CSS variables: --wb-pain-orbit-scatter (scatter duration, default 400ms), --wb-pain-orbit-breathe (crowded breathing cycle, default 1.5s), --wb-pain-orbit-accent (left accent strip, default #f43f5e). Override them on a wrapper or globally.
• Enter-to-submit is IME-safe: pressing Enter while a CJK input method is composing does not submit, including Safari's case of firing keydown after compositionend.
• autoPlay calls onValueChange and onSubmit; it stops immediately when the user focuses, clicks or types, and its timers pause while the component is off-screen.
• Below 640px (the Tailwind sm breakpoint) the layout switches to two stacked rows above and below the input.

Accessibility

• The input is associated with a visually hidden label; the submit button is type="button" with an aria-label and is disabled while the input is empty
• The card cluster is role="list" with each card as a listitem; cards are not focusable and never steal keyboard focus
• The submit result is announced through an aria-live="polite" region; after a user submit, focus moves to "Start over" and returns to the input after reset
• All buttons have a focus-visible ring
• When the user's system has reduce motion enabled, cards neither move nor breathe — they only change opacity and border color with pressure — and on submit they simply fade out