BJORK Decode text

Component 20

About

Decode text is a production-ready text component from BJORK UI, packaged for shadcn registries.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds BJORK Decode text to your project and fits it to your theme.

Code

How BJORK Decode text is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

"use client";
import { ThemeProvider as BjorkDemoThemeProvider } from "next-themes";
import { useRef, useState } from "react";
import { DecodeText, type DecodeCharsetName, type DecodeOrder, type DecodeTextHandle } from "@/components/ui/bjork-decode-text";

const WORDS = ["Signal received", "Archive unsealed", "Handshake done"];
function SourceDemo(){
const isPreview = false;
const previewTheme = null;
const tone = previewTheme === "light" || previewTheme === "dark" ? previewTheme : undefined;
const [charset, setCharset] = useState<DecodeCharsetName>("blocks");
const [order, setOrder] = useState<DecodeOrder>("left");
const [cycle, setCycle] = useState(true);
const ref = useRef<DecodeTextHandle>(null);
const reset = () => {
    setCharset("blocks");
    setOrder("left");
    setCycle(true);
  };
return <>

      <div className="flex w-[min(880px,calc(100vw-72px))] max-w-full flex-col items-center gap-8">
        <DecodeText
          ref={ref}
          key={cycle ? "cycle" : "single"}
          tone={tone}
          text={WORDS[0]}
          words={cycle ? WORDS : undefined}
          charset={charset}
          order={order}
          frozenProgress={isPreview ? 1 : undefined}
        />
      </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>}