mirror of
https://github.com/NoFxAiOS/nofx.git
synced 2026-07-04 11:30:58 +08:00
31 lines
674 B
TypeScript
31 lines
674 B
TypeScript
import { useRef } from 'react'
|
|
import { motion, useInView } from 'framer-motion'
|
|
|
|
export default function AnimatedSection({
|
|
children,
|
|
id,
|
|
backgroundColor = 'var(--brand-black)',
|
|
}: {
|
|
children: React.ReactNode
|
|
id?: string
|
|
backgroundColor?: string
|
|
}) {
|
|
const ref = useRef(null)
|
|
const isInView = useInView(ref, { once: true, margin: '-100px' })
|
|
|
|
return (
|
|
<motion.section
|
|
id={id}
|
|
ref={ref}
|
|
className='py-20 px-4'
|
|
style={{ background: backgroundColor }}
|
|
initial={{ opacity: 0 }}
|
|
animate={isInView ? { opacity: 1 } : { opacity: 0 }}
|
|
transition={{ duration: 0.6 }}
|
|
>
|
|
{children}
|
|
</motion.section>
|
|
)
|
|
}
|
|
|