Anagram Shuffle

Preview

Customize

Words

Duration0.45s

Text size48px

Usage

import { AnagramShuffle } from "@/components/uibrik/anagram-shuffle/anagram-shuffle";

<AnagramShuffle play={play} />

Installation

$npx shadcn@latest add https://uibrik.com/r/anagram-shuffle.json

Install the packages
$npm install motion
Add the cn helper
Imports cn from @/lib/utils, which shadcn init creates. Add it by hand without shadcn.

Copy the source into your project

components/uibrik/anagram-shuffle/anagram-shuffle.tsx

"use client";

import { cn } from "@/lib/utils";
import { motion } from "motion/react";
import { EASE_OUT, TEXT, pick, type EffectProps } from "../_text-effects/shared";

// 08 — The same six letters rearrange into a new word. Each letter keeps its
// identity and glides to its new slot.
const ANAGRAMS = ["LISTEN", "SILENT", "ENLIST", "TINSEL"];

export function AnagramShuffle({
  play,
  words = ANAGRAMS,
  duration = 0.45,
}: EffectProps & {
  /** Anagrams of each other, so every letter has a place to go. */
  words?: string[];
  /** Seconds for letters to glide to their new slots. */
  duration?: number;
}) {
  return (
    <p className={cn(TEXT, "flex tracking-wide")}>
      {Array.from(pick(words, play)).map((ch) => (
        <motion.span key={ch} layout transition={{ duration, ease: EASE_OUT }} className="inline-block">
          {ch}
        </motion.span>
      ))}
    </p>
  );
}

Adds the files to components/uibrik/anagram-shuffle and installs motion. With the @uibrik namespace set up: npx shadcn@latest add @uibrik/anagram-shuffle.

Props

AnagramShuffle

words: Type string[]; ["LISTEN","SILENT","ENLIST","TINSEL"]; Anagrams of each other, cycled one per play.
duration: Type number; 0.45; Time for letters to glide to their new slots.
playrequired: Type number; –; Each change plays the effect again; 0 shows its resting state.