Randomized Text

A text component that reveals characters or words with a randomized animation. It shows each part gradually with varying delays. Use it to create dynamic text effects on scroll or interaction.

bytom from Spell

Installation

terminal

pnpm dlx layro-cli add @xxtomm/randomized-text

npx layro-cli add @xxtomm/randomized-text

npx layro-cli add @xxtomm/randomized-text

bunx layro-cli add @xxtomm/randomized-text

New project? Start with init. Writes third-party code and installs packages with scripts off.

Code

Demo

"use client";

import { motion } from "motion/react";
import { useMemo } from "react";

type SplitType = "words" | "chars";

interface RandomizedTextProps {
  children: string;
  className?: string;
  split?: SplitType;
  delay?: number;
  inView?: boolean;
  once?: boolean;