Skip to main content

​
Installation

    ​
    Examples

    ​
    Usage

    showLineNumbers
    import { BlurFade } from "@/components/ui/blur-fade"
    showLineNumbers
    <BlurFade>
  <img src="https://picsum.photos/300/200?random=1" alt="Sample 1" />
  <img src="https://picsum.photos/300/200?random=2" alt="Sample 2" />
  <img src="https://picsum.photos/300/200?random=3" alt="Sample 3" />
</BlurFade>

    ​
    Props

    PropTypeDefaultDescription
    childrenReactNode-The content to be animated
    classNamestring-The class name to be applied to the component
    variantobject-Custom animation variants for motion component
    durationnumber0.4Duration (seconds) for the animation
    delaynumber0Delay (seconds) before the animation starts
    offsetnumber6Offset for the animation
    direction"up" | "down" | "left" | "right""down"Direction for the animation
    inViewbooleanfalseWhether to trigger animation when component is in view
    inViewMarginstring"-50px"Margin for triggering the in-view animation
    blurstring"6px"Amount of blur to apply during the animation

    Build docs developers (and LLMs) love

    Get started for freeTalk to us