How I Rebuild This Apple TV+ Page With Motion for React And TailwindCSS

Want to learn more Motion for React?
Check out our PRO course!

Try it yourself in our playground

Follow along with the tutorial, or just play around with the code. PRO members can fork this code and save it to their account.

Jeroen Reumkens PRO

Rebuilding the Apple TV+ website with Framer Motion and TailwindCSS

1
import { Header } from "./components/header";
2
import { Hero } from "./components/section/hero";
3
import { Usps } from "./components/section/usps";
4
import { VideoCarousel } from "./components/section/video-carousel";
5

6
export const App = () => {
7
  return (
8
    <>
9
      <Header />
10
      <main className="bg-background">
11
        <div className="bg-background relative z-10">
12
          <Hero />
13
          <Usps />
14
        </div>
15
        <VideoCarousel />
16
        <div className="h-[300vh]" />
17
      </main>
18
    </>
19
  );
20
};

1
import { twMerge } from "tailwind-merge";
2

3
type Props = {
4
  children: React.ReactNode;
5
  size?: "small" | "medium" | "large";
6
  className?: string;
7
};
8

9
export const Button = ({ children, size = "medium", className }: Props) => {
10
  const sizeClassNames = {
11
    small: "text-xs px-2 py-1",
12
    medium: "text-sm px-5 py-3",
13
    large: "text-base px-8 py-4",
14
  };
15

16
  return (
17
    <button
18
      className={twMerge(
19
        "text-textBlack rounded-full bg-white",
20
        sizeClassNames[size],
21
        className,
22
      )}
23
    >
24
      {children}
25
    </button>
26
  );
27
};

1
import { twMerge } from "tailwind-merge";
2

3
type Props = {
4
  children: React.ReactNode;
5
  className?: string;
6
};
7

8
export const Container = ({ children, className }: Props) => {
9
  return (
10
    <div className={twMerge("mx-auto max-w-[980px] px-6", className)}>
11
      {children}
12
    </div>
13
  );
14
};

1
import { motion } from "motion/react";
2

3
type Props = {
4
  children: React.ReactNode;
5
};
6

7
export const FadeIn = ({ children }: Props) => {
8
  return (
9
    <motion.div
10
      initial={{ opacity: 0, y: 20 }}
11
      whileInView={{ opacity: 1, y: 0 }}
12
      viewport={{ margin: "100% 0px -300px 0px" }}
13
    >
14
      {children}
15
    </motion.div>
16
  );
17
};

1
import { Button } from "./button";
2
import { Container } from "./container";
3

4
export const Header = () => {
5
  return (
6
    <>
7
      <header className="bg-backgroundContrast relative z-20 text-white">
8
        <Container className="flex min-h-(--header-row-height) items-center">
9
          <a
10
            href="/"
11
            className="-ml-6 flex h-(--header-row-height) items-center px-6 text-xl"
12
          >
13
             <span className="sr-only">Back to homepage</span>
14
          </a>
15
        </Container>
16
      </header>
17
      <div className="bg-backgroundContrast sticky top-0 z-20 text-white">
18
        <Container className="flex min-h-(--header-row-height) items-center justify-between">
19
          <p className="text-xl font-semibold">Apple TV+</p>
20
          <Button size="small">Stream now</Button>
21
        </Container>
22
      </div>
23
    </>
24
  );
25
};

1
import { Button } from "../button";
2
import { Container } from "../container";
3
import { useScroll, useTransform, motion } from "motion/react";
4
import { useRef } from "react";
5

6
export const Hero = () => {
7
  const videoContainerRef = useRef<HTMLDivElement>(null);
8
  const { scrollYProgress } = useScroll({
9
    target: videoContainerRef,
10
    offset: ["start start", "end end"],
11
  });
12
  const opacity = useTransform(scrollYProgress, [0, 0.7, 1], [1, 1, 0]);
13

14
  return (
15
    <div className="bg-background text-white">
16
      <motion.div
17
        style={{ opacity }}
18
        ref={videoContainerRef}
19
        className="absolute -top-(--header-height) left-0 h-[200vh] w-full"
20
      >
21
        <img
22
          className="sticky top-0 h-screen w-full object-cover"
23
          src="https://sandpack.frontend.fyi/img/apple-tv-rebuild/posters/napoleon.webp"
24
        />
25
      </motion.div>
26
      <Container className="relative z-10 h-(--hero-height) pb-7">
27
        <motion.div
28
          className="flex h-full flex-col items-start justify-end"
29
          variants={{
30
            hidden: { opacity: 0 },
31
            visible: { opacity: 1 },
32
          }}
33
          whileInView="visible"
34
          exit="hidden"
35
          animate="hidden"
36
          viewport={{ amount: 0.98 }}
37
        >
38
          <h1 className="mb-10 text-4xl font-bold md:text-5xl">
39
            All Apple Originals. <br />
40
            Only on Apple TV+.
41
          </h1>
42
          <Button className="mb-16" size="large">
43
            Stream now
44
          </Button>
45
          <p className="font-semibold">Watch on the 📺 app.</p>
46
        </motion.div>
47
      </Container>
48
    </div>
49
  );
50
};

1
import { Container } from "../container";
2
import { FadeIn } from "../fade-in";
3

4
export const Usps = () => {
5
  return (
6
    <Container className="relative z-10 max-w-[692px] space-y-12 py-36 text-3xl font-bold text-white md:text-4xl">
7
      <FadeIn>
8
        <p>New Apple Originals every month — always ad‑free.</p>
9
      </FadeIn>
10
      <FadeIn>
11
        <p>
12
          Stream on the Apple TV app on Apple devices, smart TVs, consoles, or
13
          sticks.
14
        </p>
15
      </FadeIn>
16
      <FadeIn>
17
        <p>Watch in 4K HDR video with immersive Spatial Audio.</p>
18
      </FadeIn>
19
      <FadeIn>
20
        <p>Share a single subscription with up to five people.</p>
21
      </FadeIn>
22
    </Container>
23
  );
24
};

1
import {
2
  Movie,
3
  movies,
4
  randomMoviesSet1,
5
  randomMoviesSet2,
6
} from "../../movies";
7
import { Button } from "../button";
8
import {
9
  useScroll,
10
  useTransform,
11
  motion,
12
  useMotionValueEvent,
13
} from "motion/react";
14
import { useMemo, useRef, useState } from "react";
15
import { useWindowSize } from "react-use";
16

17
export const VideoCarousel = () => {
18
  const { width, height } = useWindowSize();
19
  const carouselWrapperRef = useRef<HTMLDivElement>(null);
20
  const { scrollYProgress } = useScroll({
21
    target: carouselWrapperRef,
22
    offset: ["start start", "end start"],
23
  });
24

25
  const maximumScale = useMemo(() => {
26
    const windowYRatio = height / width;
27
    const xScale = 1.66667;
28
    const yScale = xScale * (16 / 9) * windowYRatio;
29
    return Math.max(xScale, yScale);
30
  }, [width, height]);
31

32
  const scale = useTransform(
33
    scrollYProgress,
34
    [0.3, 0.5, 0.66],
35
    [maximumScale * 1.1, maximumScale, 1],
36
  );
37

38
  const postersOpacity = useTransform(scrollYProgress, [0.64, 0.66], [0, 1]);
39
  const posterTranslateXLeft = useTransform(
40
    scrollYProgress,
41
    [0.64, 0.66],
42
    [-20, 0],
43
  );
44
  const posterTranslateXRight = useTransform(
45
    scrollYProgress,
46
    [0.64, 0.66],
47
    [20, 0],
48
  );
49

50
  const [carouselVariant, setCarouselVariant] = useState<"inactive" | "active">(
51
    "inactive",
52
  );
53
  useMotionValueEvent(scrollYProgress, "change", (progress) => {
54
    if (progress >= 0.67) {
55
      setCarouselVariant("active");
56
    } else {
57
      setCarouselVariant("inactive");
58
    }
59
  });
60

61
  return (
62
    <motion.div animate={carouselVariant} className="bg-background pb-16">
63
      <div
64
        ref={carouselWrapperRef}
65
        className="mt-[-100vh] h-[300vh] overflow-clip"
66
      >
67
        <div className="sticky top-0 flex h-screen items-center">
68
          <div className="relative left-1/2 mb-5 flex -translate-x-1/2 gap-5">
69
            <motion.div
70
              style={{ opacity: postersOpacity, x: posterTranslateXLeft }}
71
              className="aspect-[9/16] w-[300px] shrink-0 overflow-clip rounded-2xl md:aspect-video md:w-[60vw]"
72
            >
73
              <img
74
                className="h-full w-full object-cover"
75
                src={movies[0].poster}
76
                alt={movies[0].name}
77
              />
78
            </motion.div>
79
            <motion.div
80
              style={{ scale }}
81
              className="relative aspect-[9/16] w-[300px] shrink-0 overflow-clip rounded-2xl md:aspect-video md:w-[60vw]"
82
            >
83
              <img
84
                className="h-full w-full object-cover"
85
                src={movies[1].poster}
86
                alt={movies[1].name}
87
              />
88
              <motion.div
89
                variants={{
90
                  active: { opacity: 1 },
91
                  inactive: { opacity: 0 },
92
                }}
93
                className="absolute bottom-0 left-0 flex w-full flex-col items-center gap-4 p-5 text-lg text-white md:flex-row md:justify-between md:gap-0"
94
              >
95
                <p>Best video title ever</p>
96
                <Button>Watch now</Button>
97
              </motion.div>
98
            </motion.div>
99
            <motion.div
100
              style={{ opacity: postersOpacity, x: posterTranslateXRight }}
101
              className="aspect-[9/16] w-[300px] shrink-0 overflow-clip rounded-2xl md:aspect-video md:w-[60vw]"
102
            >
103
              <img
104
                className="h-full w-full object-cover"
105
                src={movies[2].poster}
106
                alt={movies[2].name}
107
              />
108
            </motion.div>
109
          </div>
110
        </div>
111
      </div>
112

113
      <motion.div
114
        variants={{
115
          active: { opacity: 1, y: 0 },
116
          inactive: { opacity: 0, y: 20 },
117
        }}
118
        transition={{ duration: 0.4 }}
119
        className="-mt-[calc((100vh-(300px*(16/9)))/2)] space-y-3 pt-4 md:-mt-[calc((100vh-(60vw*(9/16)))/2)]"
120
      >
121
        <SmallVideoCarousel movies={randomMoviesSet1} />
122
        <div className="[--carousel-offset:-32px] [--duration:74s]">
123
          <SmallVideoCarousel movies={randomMoviesSet2} />
124
        </div>
125
      </motion.div>
126
    </motion.div>
127
  );
128
};
129

130
const SmallVideoCarousel = ({ movies }: { movies: Movie[] }) => {
131
  return (
132
    <div className="overflow-clip">
133
      <div className="animate-carousel-move relative left-[var(--carousel-offset,0px)] flex gap-3">
134
        {movies.map((movie, index) => (
135
          <div
136
            className="aspect-video w-[40vw] shrink-0 md:w-[23vw]"
137
            key={`${movie.name}-${index}`}
138
          >
139
            <img
140
              className="h-full w-full rounded-xl object-cover"
141
              src={movie.poster}
142
              alt={movie.name}
143
            />
144
          </div>
145
        ))}
146
      </div>
147
    </div>
148
  );
149
};

1
/**
2
When copying this style to your own project,
3
be sure to add the below import line to activate tailwind v4
4
@ import "tailwindcss";
5
**/
6

7
@layer base {
8
  :root {
9
    --header-row-height: 60px;
10
    --header-height: calc(var(--header-row-height) * 2);
11
    --hero-height: calc(100svh - var(--header-height));
12
  }
13
}
14

15
@theme {
16
  --color-background: #000;
17
  --color-backgroundContrast: #111;
18
  --color-textBlack: #1d1d1f;
19
  --color-white: #fff;
20

21
  --font-sans: "SF Pro Display", "Helvetica Neue", "Helvetica", "Arial";
22

23
  --text-xs: 0.75rem; /* 12px */
24
  --text-sm: 0.875rem; /* 14px */
25
  --text-base: 1.0625rem; /* 17px */
26
  --text-lg: 1.1875rem; /* 19px */
27
  --text-lg--line-height: 1.21;
28
  --text-xl: 1.3125rem; /* 21px */
29
  --text-2xl: 1.5rem; /* 24px */
30
  --text-3xl: 1.75rem; /* 28px */
31
  --text-4xl: 2.5rem; /* 40px */
32
  --text-4xl--line-height: 1.1;
33
  --text-5xl: 4.5rem; /* 72px */
34
  --text-5xl--line-height: 1.05;
35

36
  --animate-carousel-move: carousel-move var(--duration, 80s) infinite;
37

38
  @keyframes carousel-move {
39
    from {
40
      transform: translateX(0);
41
    }
42
    to {
43
      transform: translateX(-100%);
44
    }
45
  }
46
}

1
export type Movie = {
2
  poster: string;
3
  name: string;
4
};
5

6
export const movies = [
7
  {
8
    poster:
9
      "https://sandpack.frontend.fyi/img/apple-tv-rebuild/posters/airplane.webp",
10
    name: "Airplane",
11
  },
12
  {
13
    poster:
14
      "https://sandpack.frontend.fyi/img/apple-tv-rebuild/posters/family-man.webp",
15
    name: "Family man",
16
  },
17
  {
18
    poster:
19
      "https://sandpack.frontend.fyi/img/apple-tv-rebuild/posters/laboratory.webp",
20
    name: "Laboratory",
21
  },
22
  {
23
    poster:
24
      "https://sandpack.frontend.fyi/img/apple-tv-rebuild/posters/napoleon.webp",
25
    name: "Napoleon",
26
  },
27
  {
28
    poster:
29
      "https://sandpack.frontend.fyi/img/apple-tv-rebuild/posters/person-in-darkness.webp",
30
    name: "Person in Darkness",
31
  },
32
  {
33
    poster:
34
      "https://sandpack.frontend.fyi/img/apple-tv-rebuild/posters/scary-building.webp",
35
    name: "Scary Building",
36
  },
37
  {
38
    poster:
39
      "https://sandpack.frontend.fyi/img/apple-tv-rebuild/posters/stars.webp",
40
    name: "Stars",
41
  },
42
];
43

44
export const randomMoviesSet1 = movies
45
  .sort(() => Math.random() - 0.5)
46
  .concat(movies.sort(() => Math.random() - 0.5))
47
  .concat(movies.sort(() => Math.random() - 0.5));
48

49
export const randomMoviesSet2 = movies
50
  .sort(() => Math.random() - 0.5)
51
  .concat(movies.sort(() => Math.random() - 0.5))
52
  .concat(movies.sort(() => Math.random() - 0.5))
53
  .sort(() => Math.random() - 0.5);

In this rebuild we will be recreating the Apple TV+ page with Tailwind and Framer Motion. On this page you find many animations that are triggered based on the user’s scroll position.

We will be creating scroll animations that are both connected to your scroll, as well as animations that fire once you reach a certain scroll position. The rebuild will start from scratch, setup a new empty Vite project, and start building all the components from scratch.

That means you will not only learn how to create these great scroll animations, but you will also learn how you can create these Tailwind componetns from scratch. Just like you could use them in a real world project.

Be sure to check both the code as well as the video on the top of this page.

How I Rebuild This Apple TV+ Page With Motion for React And TailwindCSS

Try it yourself in our playground

Getting started with rebuilding Linear's homepage