Text Convergence

Component 17

About

Horizontal scroll-driven line where each character flies in from a random offset and rotation, converging into place as you scroll

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Text Convergence to your project and fits it to your theme.

Code

How Text Convergence is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

"use client";

import TextConvergence from "@/components/ui/text-convergence";

export default function TextConvergenceDemo() {
  return (
    <main className="bg-background text-foreground w-screen overflow-x-hidden">
      <section className="flex h-screen flex-col items-center justify-center gap-4 px-6 text-center">
        <p className="font-mono text-xs uppercase tracking-[0.3em] text-muted-foreground">
          kinetic typography
        </p>
        <h1 className="max-w-[14ch] text-5xl font-semibold leading-none tracking-tight sm:text-7xl">
          Words in motion.
        </h1>
        <p className="max-w-md text-sm leading-relaxed text-muted-foreground">
          Keep scrolling — each character flies in from a random offset and
          converges into the line.
        </p>
      </section>

      <TextConvergence
        text="Build faster. Animate better. Ship smarter. Hyperiux Vault gives you the tools to craft interfaces that look premium and feel effortless."
        charRotation={28}
      />
    </main>
  );
}