1
'use client'
2
import styles from './page.module.css'
3

4
const phrases = [
5
  "It is a long established fact",
6
  "that a reader will be distracted",
7
  "by the readable content of a page",
8
  "when looking at its layout."
9
]
10

11
export default function Home() {
12
  return (
13
    <div className={styles.container}>
14
      <MaskText/>
15
      <MaskText/>
16
      <MaskText/>
17
      <MaskText/>
18
      <MaskText/>
19
    </div>
20
  )
21
}
22

23
export function MaskText() {
24
  return(
25
    <div className={styles.body}>
26
      {
27
        phrases.map( (phrase, index) => {
28
          return <div key={index} className={styles.lineMask}>
29
            <p>{phrase}</p>
30
          </div>
31
        })
32
      }
33
    </div>
34
  )
35
}
36

1
import { useRef } from 'react';
2
import { useInView, motion } from 'framer-motion';
3
...
4

5
export function MaskText() {
6

7
  const body = useRef(null);
8
  const isInView = useInView(body, {once: true, margin: "-75%"})
9

10
  const animation = {
11
    initial: {y: "100%"},
12
    enter: i => ({y: "0", transition: {duration: 0.75, ease: [0.33, 1, 0.68, 1],  delay: 0.075 * i}})
13
  }
14

15
  return(
16
    <div ref={body} className={styles.body}>
17
      {
18
        phrases.map( (phrase, index) => {
19
          return <div key={index} className={styles.lineMask}>
20
            <motion.p custom={index} variants={animation} initial="initial" animate={isInView ? "enter" : ""}>{phrase}</motion.p>
21
          </div>
22
        })
23
      }
24
    </div>
25
  )
26
}
27