Fade In

1"use client"
2 
3import * as React from "react"
4import { motion, useReducedMotion } from "motion/react"
5import type { HTMLMotionProps } from "motion/react"
6 
7type FadeInProps = HTMLMotionProps<"div"> & {
8  y?: number
9  delay?: number
10  duration?: number
11  once?: boolean
12  /**
13   * Docs: animate on mount instead of scroll-reveal so the
14   * content is never stuck at opacity 0 inside a preview canvas.
15   */
16  preview?: boolean
17}
18 
19/** Scroll reveal - opacity + small translate, critically damped, <300ms feel. */
20export function FadeIn({
21  y = 14,
22  delay = 0,
23  duration = 0.28,
24  once = true,
25  preview = false,
26  children,
27  ...props
28}: FadeInProps) {
29  const reduce = useReducedMotion()
30 
31  if (reduce) {
32    return (
33      <div {...(props as React.HTMLAttributes<HTMLDivElement>)}>
34        {children as React.ReactNode}
35      </div>
36    )
37  }
38 
39  if (preview) {
40    return (
41      <motion.div
42        initial={{ opacity: 0, y }}
43        animate={{ opacity: 1, y: 0 }}
44        transition={{
45          type: "spring",
46          bounce: 0,
47          duration,
48          delay,
49        }}
50        {...props}
51      >
52        {children}
53      </motion.div>
54    )
55  }
56 
57  return (
58    <motion.div
59      initial={{ opacity: 0, y }}
60      whileInView={{ opacity: 1, y: 0 }}
61      viewport={{ once, margin: "0px", amount: 0.15 }}
62      transition={{
63        type: "spring",
64        bounce: 0,
65        duration,
66        delay,
67      }}
68      {...props}
69    >
70      {children}
71    </motion.div>
72  )
73}