Motion Blur — logic2b/ui

Sharpen in

The content resolves from an 8px blur as it mounts.

"use client"

import * as React from "react"

import { Button } from "@/components/ui/button"
import { MotionBlur } from "@/components/ui/motion-blur"

export default function MotionBlurDemo() {
  const [run, setRun] = React.useState(0)

  return (
    <div className="flex w-full flex-col items-center gap-6">
      <Button variant="outline" size="sm" onClick={() => setRun((n) => n + 1)}>
        Replay
      </Button>
      <MotionBlur
        key={run}
        duration={700}
        className="w-full max-w-sm rounded-lg border bg-card p-6 text-card-foreground"
      >
        <p className="text-lg font-semibold">Sharpen in</p>
        <p className="mt-1 text-sm text-muted-foreground">
          The content resolves from an 8px blur as it mounts.
        </p>
      </MotionBlur>
    </div>
  )
}

Installation

npx logic2b@next add motion-blur

Working with an AI assistant? Copy this prompt into Claude Code, Cursor or Copilot — it carries the install steps, a no-CLI fallback and a verification checklist.

Add the "motion-blur" item from the logic2b ui registry (https://ui.logic2b.com) to this project. Follow every step and verify at the end.

## Steps

1. If the project has no `components.json` yet, set up logic2b ui first:

   ```bash
   npx logic2b@next init
   ```

2. Install the item (the CLI resolves registry dependencies automatically):

   ```bash
   npx logic2b@next add motion-blur
   ```

3. Install any npm dependencies the command prints.

## If the CLI is not available

Do it manually from the registry payload:

1. Fetch https://ui.logic2b.com/r/motion-blur.json.
2. Write every entry in `files[]` to its mapped project path (see below).
3. Repeat (recursively) for each name in `registryDependencies`.
4. Install every package listed in `dependencies` across those payloads.

## Registry reference

- Index of every item: https://ui.logic2b.com/r/index.json
- Item payload (full source): https://ui.logic2b.com/r/<name>.json
- Usage examples per item: https://ui.logic2b.com/r/demos/index.json → https://ui.logic2b.com/r/demos/<demo>.json
- Docs index for agents: https://ui.logic2b.com/llms.txt (full docs: https://ui.logic2b.com/llms-full.txt)
- Every docs page is Markdown when you append `.md` to its URL.

Registry file paths map to project paths like this:
- `ui/*` → `@/components/ui/*`
- `blocks/<name>/*` → `@/components/*`
- `charts/*` → `@/components/charts/*`
- `hooks/*` → `@/hooks/*`
- `lib/utils.ts` → `@/lib/utils.ts`
- `theme.css` → next to the project's Tailwind entry stylesheet

## Conventions (do not break these)

- Tailwind CSS v4 (CSS-first config; no tailwind.config.js needed) and React 19.
- All colors go through semantic tokens (`bg-primary`, `text-muted-foreground`,
  `border-border`, …). Never hardcode hex/oklch values in components.
- Dark mode is class-based: toggle `.dark` on `<html>`.
- Icons come from lucide-react.

## Verify before finishing

1. The dev server starts and the app renders without console errors.
2. TypeScript compiles (`tsc --noEmit` or the framework's check).
3. Components use the theme: a `<Button>` shows the primary token color,
   and toggling `.dark` on `<html>` switches the palette.

Copy into ui/motion-blur.tsx:

"use client"

import { Motion, type MotionProps } from "@/components/ui/motion"

export type MotionBlurProps = Omit<MotionProps, "preset">

/** Sharpen a mounting element in from an 8px blur. Preconfigured
 *  `<Motion preset="blur">`. */
function MotionBlur(props: MotionBlurProps) {
  return <Motion preset="blur" {...props} />
}

export { MotionBlur }

Usage

import { MotionBlur } from "@/components/ui/motion-blur"

<MotionBlur duration={700}>
  <h2>Sharpen in</h2>
</MotionBlur>

MotionBlur is <Motion preset="blur"> — see Motion for the shared duration, delay, hover and asChild props, exit recipes and reduced-motion behavior. It pairs well with a longer duration on headings and hero copy.

Live playground

Edit the component props and inspect the exact JSX before copying it. The preview loads only when this section enters the viewport.

Generated JSX

<MotionBlur
  duration={500}
  delay={0}
>Blur reveal</MotionBlur>

API reference

Generated from the public TypeScript exports in src/ui/motion-blur.tsx.

View JSON

MotionBlurProps

Type

type MotionBlurProps = Omit<MotionProps, "preset">

MotionBlur

Component

Sharpen a mounting element in from an 8px blur. Preconfigured `<Motion preset="blur">`.

Props: MotionBlurProps

Accessibility contract

Machine-readable behavior and consumer responsibilities for motion-blur.

View JSON

Support: Composition contract
Pattern: blur animation; Motion for React

Built-in semantics

Preserves child semantics and accepts reduced-motion behavior from the motion foundation.

Consumer responsibilities

Ensure final text is sharp, contrast remains sufficient and reduced-motion users receive an instant transition.

Known limitations

• Blurred text can be temporarily unreadable during animation.