BJORK Ink bleed text

Component 2

About

Ink bleed 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 Ink bleed text to your project and fits it to your theme.

Code

How BJORK Ink bleed 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 { useState } from "react";
import { InkBleedText, type InkBleedTrigger } from "@/components/ui/bjork-ink-bleed-text";


function SourceDemo(){
const isPreview = false;
const previewTheme = null;
const tone = previewTheme === "light" || previewTheme === "dark" ? previewTheme : undefined;
const [trigger, setTrigger] = useState<InkBleedTrigger>("in-view");
const [run, setRun] = useState(0);
const reset = () => {
    setTrigger("in-view");
    setRun(0);
  };
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">
          <InkBleedText
            key={`${trigger}-${run}`}
            text="Wet ink"
            trigger={trigger}
            tone={tone}
            fontSize={isPreview ? 190 : 168}
            freezeAt={isPreview ? 0.22 : undefined}
          />
        </div>
        {!isPreview ? <p className="text-center text-[12px] text-current opacity-50">Hover to re-wet the paper.</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>}