# M text scramble 3

> Scrambled stats — staggered duration across a metric row

A shadcn/ui block from the [@cnippet](https://ui.cnippet.dev/) registry, listed on [shadcn.exchange](https://shadcn.exchange/r/cnippet/m-text-scramble-3).

- Page, with a live preview: https://shadcn.exchange/r/cnippet/m-text-scramble-3
- Screenshot: https://abzjhwgwpdpz7ua5.public.blob.vercel-storage.com/shots/cnippet/m-text-scramble-3-light-48ba5dde0d9bc917.png
- Registry item: https://ui.cnippet.dev/r/m-text-scramble-3.json
- Categories: text scramble
- Listed: 2026-10-13, source last changed 2026-10-13

## Install

```bash
npx shadcn@latest add https://ui.cnippet.dev/r/m-text-scramble-3.json
```

Run it in a project that has shadcn/ui set up. It adds the files below and installs what they depend on.

## Dependencies

- Registry items: `@cnippet/text-scramble`

## Files

### `registry/default/motion-variants/m-text-scramble-3.tsx`

```tsx
import { TextScramble } from "@/registry/default/motion/text-scramble";

const features = [
  { label: "Components", value: "164+" },
  { label: "Bundle size", value: "~4kb" },
  { label: "TypeScript", value: "100%" },
];

export default function TextScrambleStats() {
  return (
    <div className="flex min-h-50 items-center justify-center px-6">
      <div className="grid grid-cols-3 divide-x divide-border">
        {features.map(({ label, value }, i) => (
          <div
            className="flex flex-col items-center gap-1 px-8 py-4"
            key={label}
          >
            <TextScramble
              as="span"
              className="font-bold text-3xl text-foreground tabular-nums"
              duration={0.6 + i * 0.2}
              speed={0.03}
            >
              {value}
            </TextScramble>
            <span className="text-muted-foreground text-sm">{label}</span>
          </div>
        ))}
      </div>
    </div>
  );
}
```