18 lines
3.5 KiB
JSON
18 lines
3.5 KiB
JSON
{
|
|
"$schema": "https://ui.shadcn.com/schema/registry-item.json",
|
|
"name": "motion-effect",
|
|
"type": "registry:ui",
|
|
"title": "Motion Effect",
|
|
"description": "Motion effect component that displays the motion effect (fade in, slide in, etc.).",
|
|
"dependencies": [
|
|
"motion"
|
|
],
|
|
"files": [
|
|
{
|
|
"path": "registry/effects/motion-effect/index.tsx",
|
|
"content": "'use client';\n\nimport * as React from 'react';\nimport {\n AnimatePresence,\n motion,\n useInView,\n type HTMLMotionProps,\n type UseInViewOptions,\n type Transition,\n type Variant,\n} from 'motion/react';\n\ntype MotionEffectProps = HTMLMotionProps<'div'> & {\n children: React.ReactNode;\n className?: string;\n transition?: Transition;\n delay?: number;\n inView?: boolean;\n inViewMargin?: UseInViewOptions['margin'];\n inViewOnce?: boolean;\n blur?: string | boolean;\n slide?:\n | {\n direction?: 'up' | 'down' | 'left' | 'right';\n offset?: number;\n }\n | boolean;\n fade?: { initialOpacity?: number; opacity?: number } | boolean;\n zoom?:\n | {\n initialScale?: number;\n scale?: number;\n }\n | boolean;\n};\n\nfunction MotionEffect({\n ref,\n children,\n className,\n transition = { type: 'spring', stiffness: 200, damping: 20 },\n delay = 0,\n inView = false,\n inViewMargin = '0px',\n inViewOnce = true,\n blur = false,\n slide = false,\n fade = false,\n zoom = false,\n ...props\n}: MotionEffectProps) {\n const localRef = React.useRef<HTMLDivElement>(null);\n React.useImperativeHandle(ref, () => localRef.current as HTMLDivElement);\n\n const inViewResult = useInView(localRef, {\n once: inViewOnce,\n margin: inViewMargin,\n });\n const isInView = !inView || inViewResult;\n\n const hiddenVariant: Variant = {};\n const visibleVariant: Variant = {};\n\n if (slide) {\n const offset = typeof slide === 'boolean' ? 100 : (slide.offset ?? 100);\n const direction =\n typeof slide === 'boolean' ? 'left' : (slide.direction ?? 'left');\n const axis = direction === 'up' || direction === 'down' ? 'y' : 'x';\n hiddenVariant[axis] =\n direction === 'left' || direction === 'up' ? -offset : offset;\n visibleVariant[axis] = 0;\n }\n\n if (fade) {\n hiddenVariant.opacity =\n typeof fade === 'boolean' ? 0 : (fade.initialOpacity ?? 0);\n visibleVariant.opacity =\n typeof fade === 'boolean' ? 1 : (fade.opacity ?? 1);\n }\n\n if (zoom) {\n hiddenVariant.scale =\n typeof zoom === 'boolean' ? 0.5 : (zoom.initialScale ?? 0.5);\n visibleVariant.scale = typeof zoom === 'boolean' ? 1 : (zoom.scale ?? 1);\n }\n\n if (blur) {\n hiddenVariant.filter =\n typeof blur === 'boolean' ? 'blur(10px)' : `blur(${blur})`;\n visibleVariant.filter = 'blur(0px)';\n }\n\n return (\n <AnimatePresence>\n <motion.div\n ref={localRef}\n data-slot=\"motion-effect\"\n initial=\"hidden\"\n animate={isInView ? 'visible' : 'hidden'}\n exit=\"hidden\"\n variants={{\n hidden: hiddenVariant,\n visible: visibleVariant,\n }}\n transition={{\n ...transition,\n delay: (transition?.delay ?? 0) + delay,\n }}\n className={className}\n {...props}\n >\n {children}\n </motion.div>\n </AnimatePresence>\n );\n}\n\nexport { MotionEffect, type MotionEffectProps };\n",
|
|
"type": "registry:ui",
|
|
"target": "components/animate-ui/effects/motion-effect.tsx"
|
|
}
|
|
]
|
|
} |