BJORK Slice shift

"use client";
import { ThemeProvider as BjorkDemoThemeProvider } from "next-themes";
import { useState } from "react";
import { SliceShift, type SliceShiftTrigger } from "@/components/ui/bjork-slice-shift";

const modes = ["hover", "scroll", "loop", "words"] as const;

const sliceCounts = [5, 7, 11] as const;

const WORDS = ["Shear", "Shift", "Register", "Slice"];
function SourceDemo(){
const isPreview = false;
const previewTheme = null;
const tone = previewTheme === "light" || previewTheme === "dark" ? previewTheme : undefined;
const [mode, setMode] = useState<(typeof modes)[number]>("hover");
const [slices, setSlices] = useState<(typeof sliceCounts)[number]>(7);
const words = mode === "words";
const trigger: SliceShiftTrigger = words ? "loop" : mode;
const reset = () => {
    setMode("hover");
    setSlices(7);
  };
return <>

      <div className="flex w-[860px] max-w-full min-w-0 flex-col items-center gap-8">
        <div className="w-full min-w-0 px-2">
          <SliceShift
            key={`${mode}-${slices}`}
            text="Registration"
            words={words ? WORDS : undefined}
            trigger={trigger}
            slices={isPreview ? 6 : slices}
            tone={tone}
            fontSize={isPreview ? 168 : 136}
            freezeAt={isPreview ? 0 : undefined}
          />
        </div>
        {!isPreview ? (
          <p className="text-center text-[12px] text-current opacity-50">
            {mode === "hover"
              ? "Sweep the pointer across the word."
              : mode === "scroll"
                ? "Scroll the page."
                : mode === "loop"
                  ? "Pulses every 2.6s."
                  : "Cycles every 2.6s."}
          </p>
        ) : null}
      </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>}