1
export const projects = [
2
  {
3
    title: "Matthias Leidinger",
4
    description: "Originally hailing from Austria, Berlin-based photographer Matthias Leindinger is a young creative brimming with talent and ideas.",
5
    src: "rock.jpg",
6
    link: "https://www.ignant.com/2023/03/25/ad2186-matthias-leidingers-photographic-exploration-of-awe-and-wonder/",
7
    color: "#BBACAF"
8
  },
9
  {
10
    title: "Clément Chapillon",
11
    description: "This is a story on the border between reality and imaginary, about the contradictory feelings that the insularity of a rocky, arid, and wild territory provokes”—so French photographer Clément Chapillon describes his latest highly captivating project Les rochers fauves (French for ‘The tawny rocks’).",
12
    src: "tree.jpg",
13
    link: "https://www.ignant.com/2022/09/30/clement-chapillon-questions-geographical-and-mental-isolation-with-les-rochers-fauves/",
14
    color: "#977F6D"
15
  },
16
  {
17
    title: "Zissou",
18
    description: "Though he views photography as a medium for storytelling, Zissou’s images don’t insist on a narrative. Both crisp and ethereal, they’re encoded with an ambiguity—a certain tension—that lets the viewer find their own story within them.",
19
    src: "water.jpg",
20
    link: "https://www.ignant.com/2023/10/28/capturing-balis-many-faces-zissou-documents-the-sacred-and-the-mundane-of-a-fragile-island/",
21
    color: "#C2491D"
22
  },
23
  ...
24
]

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

5
const Card = ({title, description, src, url, color, i}) => {
6

7
  const container = useRef(null);
8
  const { scrollYProgress } = useScroll({
9
    target: container,
10
    offset: ['start end', 'start start']
11
  })
12
  const imageScale = useTransform(scrollYProgress, [0, 1], [2, 1])
13

14
  return (
15
    <div ref={container} className={styles.cardContainer}>
16
      <div 
17
        className={styles.card}
18
        style={{backgroundColor: color, top:`calc(-5vh + ${i * 25}px)`}}
19
      >
20
          ...
21
          <div className={styles.imageContainer}>
22
            <motion.div 
23
              className={styles.inner}
24
              style={{scale: imageScale}}
25
            >
26
              <Image
27
                fill
28
                src={`/images/${src}`}
29
                alt="image" 
30
              />
31
            </motion.div>
32
          </div>
33
        </div>
34
      </div>
35
    </div>
36
  )
37
}
38

39
export default Card

1
'use client';
2
import styles from './page.module.scss'
3
import { projects } from '../data';
4
import Card from '../components/Card';
5
import { useScroll } from 'framer-motion';
6
import { useRef } from 'react';
7

8
export default function Home() {
9
  const container = useRef(null);
10
  const { scrollYProgress } = useScroll({
11
    target: container,
12
    offset: ['start start', 'end end']
13
  })
14

15
  return (
16
    <main ref={container} className={styles.main}>
17
      {
18
        projects.map( (project, i) => {
19
          const targetScale = 1 - ( (projects.length - i) * 0.05);
20
          return <Card key={`p_${i}`} i={i} {...project} progress={scrollYProgress} range={[i * .25, 1]} targetScale={targetScale}/>
21
        })
22
      }
23
    </main>
24
  )
25
}

1
const Card = ({i, title, description, src, url, color, progress, range, targetScale}) => {
2
  ...
3
  const scale = useTransform(progress, range, [1, targetScale]);
4

5
  return (
6
    <div ref={container} className={styles.cardContainer}>
7
      <motion.div 
8
        className={styles.card}
9
        style={{backgroundColor: color, scale, top:`calc(-5vh + ${i * 25}px)`}} 
10
      >
11
          ...
12
        </div>
13
      </motion.div>
14
    </div>
15
  )
16
}
17

18
export default Card
19

1
...
2
import { useRef, useEffect } from 'react';
3
import Lenis from '@studio-freight/lenis'
4

5
export default function Home() {
6
  ...  
7
  useEffect( () => {
8
    const lenis = new Lenis()
9

10
    function raf(time) {
11
      lenis.raf(time)
12
      requestAnimationFrame(raf)
13
    }
14

15
    requestAnimationFrame(raf)
16
  })
17

18
  return (
19
    <main ref={container} className={styles.main}>
20
      ...
21
    </main>
22
  )
23
}
24