Introduction

Hyperblur is a catalog of visual effects: glitch text, motion blur reveals, scanline and noise overlays, pointer-driven hover effects and small interface components. Every entry is a single TypeScript file that you add to your project and own from then on.

Entries are published as a shadcn registry. One command copies the file into your codebase, with no extra packages to install and no runtime to configure. If you would rather not use the CLI, you can paste the source by hand.

Hyperblur is not a library you import from npm. There is no hyperblur package to depend on, no version to keep in sync and no bundle you have no control over. The code lives in your repository, so you can read it, change it and delete what you do not use.

Effects are grouped by category: text, motion and reveals, overlays and backgrounds, hover and pointer effects, components, and micro interactions. The effects index lists all of them with live previews.

Each effect page follows the same layout:

• A live preview, the full source and the agent prompt in tabs.
• The install command for that effect.
• A usage example with the import line.
• A props table with types, defaults and descriptions.

• Install with the shadcn CLI and import the component. See Installation.
• Hand the work to a coding agent with a copied prompt, the MCP server or the Claude Code plugin. See Agents.