Slice shift is a production-ready text component from BJORK UI, packaged for shadcn registries.
Loading preview...
"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>}