Chromatic text is a production-ready text component from BJORK UI, packaged for shadcn registries.
"use client";
import { ThemeProvider as BjorkDemoThemeProvider } from "next-themes";
import { useRef, useState } from "react";
import { ChromaticText, type ChromaticTextHandle } from "@/components/ui/bjork-chromatic-text";
function SourceDemo(){
const isPreview = false;
const previewTheme = null;
const tone = previewTheme === "light" || previewTheme === "dark" ? previewTheme : undefined;
const textRef = useRef<ChromaticTextHandle>(null);
const [intensity, setIntensity] = useState<number>(1);
const [decay, setDecay] = useState<number>(0.7);
const [grain, setGrain] = useState(false);
const reset = () => {
setIntensity(1);
setDecay(0.7);
setGrain(false);
};
return <>
<div className="flex w-[min(860px,calc(100vw-72px))] flex-col items-center gap-6">
<ChromaticText
ref={textRef}
text="Chromatic"
intensity={intensity}
decay={decay}
grain={grain ? 0.5 : 0}
tone={tone}
frozen={isPreview}
pulseOnMount={!isPreview}
/>
</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>}