forked from emre/www_projectmycelium_com
28 lines
692 B
TypeScript
28 lines
692 B
TypeScript
'use client'
|
|
|
|
import { motion, type Transition } from 'framer-motion'
|
|
import React from 'react'
|
|
import { useMediaQuery } from '@/hooks/useMediaQuery'
|
|
|
|
type FadeInProps = {
|
|
children: React.ReactNode
|
|
transition?: Transition
|
|
className?: string
|
|
}
|
|
|
|
export function FadeIn({ children, transition, className }: FadeInProps) {
|
|
const isMobile = useMediaQuery('(max-width: 768px)')
|
|
|
|
return (
|
|
<motion.div
|
|
className={className}
|
|
initial={{ opacity: 0, y: 20 }}
|
|
whileInView={{ opacity: 1, y: 0 }}
|
|
viewport={{ once: true, amount: isMobile ? 0.2 : 0.3 }}
|
|
transition={transition || { duration: 0.5, ease: 'easeOut' }}
|
|
>
|
|
{children}
|
|
</motion.div>
|
|
)
|
|
}
|