Text Roll Demo

1"use client";
2 
3import { useState } from "react";
4import { chromatic, TextRoll } from "@/components/sora-ui/texts/text-roll";
5 
6export interface TextRollPlaygroundProps {
7  bounce?: number;
8  chromatic?: boolean;
9  className?: string;
10  duration?: number;
11  stagger?: number;
12}
13 
14/** Docs preview — click toggles Copy / Copied like slot-text examples. */
15export default function TextRollPlayground({
16  bounce = 0.6,
17  chromatic: chromaticOnCopy = true,
18  className = "font-medium text-lg tabular-nums",
19  duration = 300,
20  stagger = 45,
21}: TextRollPlaygroundProps) {
22  const [copied, setCopied] = useState(false);
23 
24  return (
25    <button
26      className="cursor-pointer rounded-lg border border-border bg-background px-4 py-2 font-medium text-sm transition-colors hover:bg-accent"
27      onClick={() => {
28        setCopied(true);
29        window.setTimeout(() => setCopied(false), 1400);
30      }}
31      type="button"
32    >
33      <TextRoll
34        className={className}
35        options={{
36          bounce,
37          direction: copied ? "up" : "down",
38          duration,
39          skipUnchanged: false,
40          stagger,
41          color:
42            copied && chromaticOnCopy ? chromatic({ from: 190 }) : undefined,
43        }}
44        text={copied ? "Copied" : "Copy"}
45      />
46    </button>
47  );
48}