diff --git a/app/[locale]/components/ui/thirdparty/blur-in.tsx b/app/[locale]/components/ui/thirdparty/blur-in.tsx new file mode 100644 index 0000000..576b4c1 --- /dev/null +++ b/app/[locale]/components/ui/thirdparty/blur-in.tsx @@ -0,0 +1,57 @@ +// +// Composant d'animation pour le texte. +// Source : https://magicui.design/docs/components/blur-in +// + +"use client"; + +import { motion } from "framer-motion"; +import type { ReactNode } from "react"; + +interface BlurInProps { + as: string; + children: ReactNode; + className?: string; + variant?: { + hidden: { filter: string; opacity: number }; + visible: { filter: string; opacity: number }; + }; + delay?: number; + duration?: number; +} + +function BlurIn( { + as, + children, + className, + variant, + delay = 0, + duration = 1 +}: Readonly ) +{ + const MotionComponent = motion.create( as, { + forwardMotionProps: true + } ) as typeof motion.div; + const defaultVariants = { + hidden: { filter: "blur(10px)", opacity: 0 }, + visible: { + filter: "blur(0px)", + opacity: 1, + transition: { delay, duration } + } + }; + const combinedVariants = variant || defaultVariants; + + return ( + + {children} + + ); +} + +export default BlurIn; \ No newline at end of file diff --git a/app/[locale]/components/ui/thirdparty/fade-text.tsx b/app/[locale]/components/ui/thirdparty/fade-text.tsx new file mode 100644 index 0000000..b1f89f6 --- /dev/null +++ b/app/[locale]/components/ui/thirdparty/fade-text.tsx @@ -0,0 +1,75 @@ +// +// Composant d'animation pour le texte. +// Source : https://magicui.design/docs/components/fade-text +// + +"use client"; + +import { useMemo, type ReactNode } from "react"; +import { motion, type Variants } from "framer-motion"; + +type FadeTextProps = { + as: string; + delay?: number; + className?: string; + direction?: "up" | "down" | "left" | "right"; + framerProps?: Variants; + children: ReactNode; +}; + +export default function FadeText( { + as, + delay = 0, + direction = "up", + className, + framerProps = { + hidden: { opacity: 0 }, + show: { opacity: 1, transition: { type: "spring", delay } } + }, + children +}: Readonly ) +{ + const MotionComponent = motion.create( as, { + forwardMotionProps: true + } ) as typeof motion.div; + const directionOffset = useMemo( () => + { + const map = { up: 10, down: -10, left: -10, right: 10 }; + return map[ direction ]; + }, [ direction ] ); + + const axis = direction === "up" || direction === "down" ? "y" : "x"; + + const FADE_ANIMATION_VARIANTS = useMemo( () => + { + const { hidden, show, ...rest } = framerProps as { + [name: string]: { [name: string]: number; opacity: number }; + }; + + return { + ...rest, + hidden: { + ...( hidden ?? {} ), + opacity: hidden?.opacity ?? 0, + [ axis ]: hidden?.[ axis ] ?? directionOffset + }, + show: { + ...( show ?? {} ), + opacity: show?.opacity ?? 1, + [ axis ]: show?.[ axis ] ?? 0 + } + }; + }, [ directionOffset, axis, framerProps ] ); + + return ( + + {children} + + ); +} \ No newline at end of file diff --git a/app/[locale]/components/ui/thirdparty/word-pull-up.tsx b/app/[locale]/components/ui/thirdparty/word-pull-up.tsx new file mode 100644 index 0000000..50f4b2a --- /dev/null +++ b/app/[locale]/components/ui/thirdparty/word-pull-up.tsx @@ -0,0 +1,62 @@ +// +// Composant d'animation pour le texte. +// Source : https://magicui.design/docs/components/word-pull-up +// + +"use client"; + +import { merge } from "@/utilities/tailwind"; +import { motion, type Variants } from "framer-motion"; + +interface WordPullUpProps { + as: string; + words: string; + delayMultiple?: number; + wrapperFramerProps?: Variants; + framerProps?: Variants; + className?: string; +} + +export default function WordPullUp( { + as, + words, + wrapperFramerProps = { + hidden: { opacity: 0 }, + show: { + opacity: 1, + transition: { + staggerChildren: 0.2 + } + } + }, + framerProps = { + hidden: { y: 20, opacity: 0 }, + show: { y: 0, opacity: 1 } + }, + className +}: Readonly ) +{ + const MotionComponent = motion.create( as ) as typeof motion.div; + + return ( + + {words.split( " " ).map( ( word ) => ( + + {word === "" ?   : word} + + ) )} + + ); +} \ No newline at end of file