Blur Reveal
Revele le contenu avec une transition de flou vers nettete lorsqu'il apparait au defilement. Installez Blur Reveal depuis le registre VLLNT UI avec la CLI shadcn.
Revele le contenu avec une transition de flou vers nettete lorsqu'il apparait au defilement. Fait partie de la famille content dans VLLNT UI, il est publie comme entree de registre lisible par machine — copiez la source directement dans votre application avec la CLI shadcn et possedez-la, sans dependance d'execution a une bibliotheque de composants.
Apercu
Basculez entre clair et sombre pour inspecter l'apercu Storybook integre.
Installation
Ajoutez Blur Reveal a votre projet avec la CLI shadcn. La source arrive dans votre code, prete a etre adaptee :
pnpm dlx shadcn@latest add https://ui.vllnt.ai/r/blur-reveal.jsonSource
"use client";
import * as React from "react";
import { cn } from "../../lib/utils";
/** Props for {@link BlurReveal}. */
export type BlurRevealProps = React.ComponentPropsWithoutRef<"div"> & {
/** Delay in milliseconds before the reveal begins. Defaults to `0`. */
delay?: number;
};
function usePrefersReducedMotion(): boolean {
const [reduced, setReduced] = React.useState(false);
React.useEffect(() => {
if (
typeof window === "undefined" ||
typeof window.matchMedia !== "function"
) {
return;
}
const query = window.matchMedia("(prefers-reduced-motion: reduce)");
const onChange = (): void => {
setReduced(query.matches);
};
onChange();
query.addEventListener("change", onChange);
return () => {
query.removeEventListener("change", onChange);
};
}, []);
return reduced;
}
function useInView(): [React.RefObject<HTMLDivElement | null>, boolean] {
const elementRef = React.useRef<HTMLDivElement>(null);
const [inView, setInView] = React.useState(false);
React.useEffect(() => {
const element = elementRef.current;
if (!element || typeof IntersectionObserver !== "function") {
setInView(true);
return;
}
const observer = new IntersectionObserver((entries) => {
const entry = entries[0];
if (entry?.isIntersecting) {
setInView(true);
observer.disconnect();
}
});
observer.observe(element);
return () => {
observer.disconnect();
};
}, []);
return [elementRef, inView];
}
/**
* Reveals content from a blurred, transparent state when it scrolls into view.
*
* Respects `prefers-reduced-motion`: content is visible from the start.
*
* @example
* ```tsx
* <BlurReveal delay={150}>Content</BlurReveal>
* ```
*/
export const BlurReveal = ({
children,
className,
delay = 0,
ref,
style,
...props
}: BlurRevealProps & { ref?: React.Ref<HTMLDivElement> }) => {
const reduced = usePrefersReducedMotion();
const [elementRef, inView] = useInView();
const revealed = reduced || inView;
const setReferences = (node: HTMLDivElement | null): void => {
elementRef.current = node;
if (typeof ref === "function") {
ref(node);
} else if (ref) {
ref.current = node;
}
};
return (
<div
className={cn(
"transition-all duration-700",
revealed
? "opacity-100 [filter:blur(0)]"
: "opacity-0 [filter:blur(12px)]",
className,
)}
ref={setReferences}
style={{ transitionDelay: `${delay}ms`, ...style }}
{...props}
>
{children}
</div>
);
};
BlurReveal.displayName = "BlurReveal";
Stories
Explorez chaque variante et etat dans le Storybook interactif :
Apercu
Basculez entre clair et sombre pour inspecter l'apercu Storybook integre.