# Combination Text (`combination-text`)
> A mechanical combination lock that spins through characters to form words.
- **Docs:** https://www.mellowui.com/components/combination-text
- **Markdown:** https://www.mellowui.com/components/combination-text.md
- **Registry:** https://www.mellowui.com/r/combination-text.json
- **Tool prompt:** https://www.mellowui.com/api/prompt/combination-text
- **Categories:** text, animation
- **Dependencies:** motion
## AI prompt
Add a CombinationText component from the mellow library. It cycles through an array of strings like a mechanical combination lock, spinning individual characters into place. Key props: texts (string[]), interval (ms).
## Install
```bash
npx shadcn@latest add https://mellowui.com/r/combination-text.json
```
## Props
| Prop | Type | Default | Description |
|---|---|---|---|
| `texts` | `string[]` | — | Array of strings to cycle through. |
| `interval` | `number` | `4000` | Time between word changes in milliseconds. |
| `className` | `string` | — | Additional CSS classes. |
## Design notes
- Client component (`"use client"`) — required for animation and refs.
- Uses Mellow design tokens: `--ink`, `--ink-rgb`, `--background`, `--background-rgb`, `--rule`, `--font-sans`, `--font-serif`, `--font-mono`. Tokens auto-flip between light and dark themes — never hardcode colors.
- Respects `prefers-reduced-motion: reduce` where applicable.
- Self-contained — no shared utilities. Copy-paste, not a package.
## Source
```tsx
"use client";
import { useEffect, useRef, useState } from "react";
import {
motion,
useMotionValue,
useTransform,
useVelocity,
useSpring,
useMotionTemplate,
useReducedMotion,
animate,
} from "motion/react";
const ALPHABET =
" ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789.,!?@#&()-_=+/'\"".split("");
const TUMBLER_REPEATS = 13;
const N = ALPHABET.length;
const MIN_ROW = 2 * N;
const MAX_ROW = (TUMBLER_REPEATS - 2) * N - 1;
const SEED_CENTER_BAND = 6;
interface CombinationTextProps {
texts: string[];
interval?: number;
className?: string;
}
export function CombinationText({
texts,
interval = 5000,
className = "",
}: CombinationTextProps) {
const [textIndex, setTextIndex] = useState(0);
useEffect(() => {
if (texts.length <= 1) return;
const timer = setInterval(() => {
setTextIndex((prev) => (prev + 1) % texts.length);
}, interval);
return () => clearInterval(timer);
}, [texts, interval]);
const maxLength = Math.max(...texts.map((t) => t.length));
const currentText = texts[textIndex].padEnd(maxLength, " ");
return (
{currentText.split("").map((char, i) => (
))}
);
}
function CombinationSlot({
targetChar,
index,
total,
}: {
targetChar: string;
index: number;
total: number;
}) {
const reducedMotion = useReducedMotion();
const seededRef = useRef(false);
const y = useMotionValue(0);
const yEm = useTransform(y, (v) => `${v}em`);
const yVelocity = useVelocity(y);
const smoothVelocity = useSpring(yVelocity, {
damping: 30,
stiffness: 600,
mass: 0.1,
});
const blurEm = useTransform(smoothVelocity, (v) =>
Math.min(Math.abs(v) * 0.0015, 0.09)
);
const blurFilter = useMotionTemplate`blur(${blurEm}em)`;
const scaleY = useTransform(smoothVelocity, (v) =>
Math.max(1 - Math.min(Math.abs(v) * 0.0008, 0.04), 0.96)
);
useEffect(() => {
const targetIdx = ALPHABET.indexOf(targetChar.toUpperCase());
const finalTargetIdx = targetIdx === -1 ? 0 : targetIdx;
if (reducedMotion) {
y.jump(-(SEED_CENTER_BAND * N + finalTargetIdx));
return;
}
if (!seededRef.current) {
y.jump(-(SEED_CENTER_BAND * N + 0));
seededRef.current = true;
}
let row = Math.round(-y.get());
const curMod = ((row % N) + N) % N;
y.jump(-row);
const tgt = finalTargetIdx;
const scrambleDown = Math.random() < 0.5;
let dFwd = (tgt - curMod + N) % N;
if (dFwd === 0) dFwd = N;
let dBack = (curMod - tgt + N) % N;
if (dBack === 0) dBack = N;
const extraSpins = (1 + Math.floor(Math.random() * 2)) * N;
let rowEnd = scrambleDown
? row + dFwd + extraSpins
: row - dBack - extraSpins;
while (rowEnd < MIN_ROW) rowEnd += N;
while (rowEnd > MAX_ROW) rowEnd -= N;
const cascadeFactor = total > 1 ? index / (total - 1) : 0;
const delay = index * 0.07;
const duration = 1.6 + cascadeFactor * 0.7 + Math.random() * 0.18;
animate(y, -rowEnd, {
type: "spring",
bounce: 0.22,
duration,
delay,
});
}, [targetChar, index, total, y, reducedMotion]);
const column = Array.from({ length: TUMBLER_REPEATS }).flatMap(() => ALPHABET);
return (
{column.map((char, i) => (
{char}
))}
);
}
export default CombinationText;
```
## Demo
```tsx
"use client";
import { CombinationText } from "@/registry/mellow/combination-text";
export default function CombinationTextDemo() {
return (
);
}
```