Berlix UI

Split Text

Text 138

About

Here is Split Text component

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

Code

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

Usage.tsx

import { TextSplit } from "@/components/ui/split-text";

const TextSplitFalloff = () => {
  return (
    <TextSplit
      className="text-4xl font-medium text-zinc-900 dark:text-zinc-50"
      maxMove={150}
      falloff={0.1}
    >
      Cut through the silence
    </TextSplit>
  );
};

export default TextSplitFalloff;

Dependencies

More by Berlix UI

View all
  • Input

    Input

    776
  • Menu Vertical

    Menu Vertical

    735
  • Checkbox

    Checkbox

    440

More in Text

View all
  • Vertical Cut Reveal Characters

    Vertical Cut Reveal Characters

    107
  • Rainbow Text Effect

    Rainbow Text Effect

    46
  • NeonRGBTextEffect

    NeonRGBTextEffect

    144
  • Motion Blur Text

    Motion Blur Text

    37
  • Shine Border

    Shine Border

    964
  • Vapour Text Effect

    Vapour Text Effect

    2K
  • Apple Hello Effect

    Apple Hello Effect

    615
  • Text Skeleton

    Text Skeleton

    13