Focal Depth Blur

A premium, modular React component from the React Bytes collection. Built with React and TypeScript.

Installation

npm install @reactbytes/focal-blur

Usage

import { FocalBlurText } from "@reactbytes/focal-blur";

export default function Example() {
  return (
    <FocalBlurText />
  );
}

Properties

| Prop | Type | Default | Description | | :--- | :--- | :--- | :--- | | text | string | PERSPECTIVE | The text to apply the focal blur effect. | | maxDistance | number | 250 | The radial distance around the cursor where the focus takes effect. | | focusColor | color | #60a5fa | Hex color for the highlighted text in focus. Pass 'inherit' to disable. | | maxBlur | number | 12 | Maximum blur pixel amount for out of focus elements. | | color | color | #FFFFFF | The base color of the text letters. | | uppercase | boolean | true | Whether to force the text to uppercase. | | textClassName | string | text-5xl font-black | Tailwind classes for font size, weight, and layout. |

Presets

This component includes the following design presets:

• Default Perspective (default)
• Heavy Depth (heavy_blur)

Credits & Inspiration

Component Source

• ChandruMIT-o - Design & Development

For interactive playgrounds, customizable controls, and code copy-pasting, visit the full showcase page at React Bytes - Focal Depth Blur.