Installation

• A React project, such as Next.js, Vite or Remix.
• Tailwind CSS set up in that project.
• The shadcn CLI initialized, which means a components.json file at the project root.

If your project has not been set up for shadcn yet, run the init command and answer the prompts.

npx shadcn@latest init

Every effect page shows its own command. They all share the same shape: the registry URL, then the effect slug. Here is Glitch Text.

npx shadcn@latest add https://hyperblur.dev/r/glitch-text.json

The CLI writes one file to components/hyperblur/glitch-text.tsx, inside your configured components directory. Any dependencies an effect needs are installed for you. Most need none.

Import the component from where it landed and render it. Check the effect page for its props.

import { GlitchText } from "@/components/hyperblur/glitch-text"

export default function Hero() {
  return <GlitchText text="HYPERBLUR" intensity={2} />
}

Props are documented on each effect page, with types and defaults. Effects respect prefers-reduced-motion, so people who ask their system for less motion get a calm version.

You do not need the CLI. Open the Code tab on any effect page, copy the source and save it as components/hyperblur/<name>.tsx in your project. Then import it as shown above. Make sure the @/ alias in your import points at your source folder, or adjust the path.

The file belongs to you, so the CLI never overwrites it silently. To pull the latest version of an effect, run the add command again with --overwrite. Local edits to that file are replaced.

npx shadcn@latest add https://hyperblur.dev/r/glitch-text.json --overwrite