BJORK Glyph morph

"use client";
import { ThemeProvider as BjorkDemoThemeProvider } from "next-themes";
import { useState } from "react";
import { GlyphMorph } from "@/components/ui/bjork-glyph-morph";

const wordSets = [
  { label: "shape", words: ["Shape", "Shift", "Form", "Flow"] },
  { label: "craft", words: ["Design", "Develop", "Deploy"] },
  { label: "states", words: ["solid", "liquid", "vapour"] },
  { label: "short", words: ["ink", "melt", "drip", "set"] },
] as const;

const speeds = [
  { label: "slow", interval: 2200, duration: 2400 },
  { label: "normal", interval: 1600, duration: 1500 },
  { label: "fast", interval: 900, duration: 900 },
] as const;
function SourceDemo(){
const isPreview = false;
const previewTheme = null;
const tone = previewTheme === "light" || previewTheme === "dark" ? previewTheme : undefined;
const progressParam = null;
const frozen = progressParam !== null && progressParam !== "" ? Number(progressParam) : isPreview ? 0 : undefined;
const setRaw = null;
const setParam = setRaw ? Number(setRaw) : -1;
const [setIndex, setSetIndex] = useState(0);
const [speed, setSpeed] = useState<(typeof speeds)[number]["label"]>("normal");
const [weight, setWeight] = useState<number>(640);
const activeSpeed = speeds.find((s) => s.label === speed) ?? speeds[1];
const words = wordSets[Number.isInteger(setParam) && wordSets[setParam] ? setParam : isPreview ? 0 : setIndex].words;
const reset = () => {
    setSetIndex(0);
    setSpeed("normal");
    setWeight(640);
  };
return <>

      <div className="flex w-[min(880px,calc(100vw-72px))] flex-col items-center gap-6">
        <GlyphMorph
          words={[...words]}
          interval={activeSpeed.interval}
          duration={activeSpeed.duration}
          fontWeight={isPreview ? 640 : weight}
          tone={tone}
          progress={frozen !== undefined && Number.isFinite(frozen) ? frozen : undefined}
          ariaLabel="Morphing word"
        />
      </div>
    
</>;
}
export default function BjorkRegistryPreview(){return <BjorkDemoThemeProvider attribute="class" defaultTheme="dark" enableSystem={false} storageKey="bjork-review-demo-theme"><div data-component-demo className="dark flex min-h-screen w-full items-center justify-center bg-[var(--bjork-bg)] p-8 text-[var(--bjork-text)]"><div className="w-full max-w-[850px]"><SourceDemo/></div></div></BjorkDemoThemeProvider>}