Blur Fade

A component that applies a blur and fade animation to content. It transitions between hidden and visible states with a blur effect. Use it to smoothly reveal or hide elements on scroll or interaction.

byMagic UI

Installation

terminal

pnpm dlx layro-cli add @magicuidesign/blur-fade

npx layro-cli add @magicuidesign/blur-fade

npx layro-cli add @magicuidesign/blur-fade

bunx layro-cli add @magicuidesign/blur-fade

New project? Start with init. Writes third-party code and installs packages with scripts off.

Code

Demo

"use client"

import { useRef } from "react"
import {
  AnimatePresence,
  motion,
  useInView,
  type MotionProps,
  type UseInViewOptions,
  type Variants,
} from "motion/react"

type MarginType = UseInViewOptions["margin"]