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

Unlock Playgrounds

Build, test and share frontend ideas right in your browser.

Choose a plan

Maker€5 / monthUnlimited playgrounds to build, experiment and share.

Champion€10 / monthEverything in Maker, plus a Champion badge and you help Frontend.FYI grow.

Cancel anytime. Playgrounds are also included in PRO. Upgrade later and we credit 100% of your first 3 months and 50% of the rest toward it.

Already a member? Log in

TSXapp.tsxTSXcomponents/button.tsxTSXcomponents/container.tsxTSXcomponents/fade-in.tsxTSXcomponents/header.tsxTSXcomponents/section/hero.tsxTSXcomponents/section/usps.tsxTSXcomponents/section/video-carousel.tsxCSSstyles.cssTSmovies.ts

Open in editor

import { Header } from "./components/header";

import { Hero } from "./components/section/hero";

import { Usps } from "./components/section/usps";

import { VideoCarousel } from "./components/section/video-carousel";

export const App = () => {

return (

</div>

</main>

</>

);

};

import { twMerge } from "tailwind-merge";

type Props = {

children: React.ReactNode;

size?: "small" | "medium" | "large";

className?: string;

};

export const Button = ({ children, size = "medium", className }: Props) => {

const sizeClassNames = {

small: "text-xs px-2 py-1",

medium: "text-sm px-5 py-3",

large: "text-base px-8 py-4",

};

return (

<button

className={twMerge(

"text-textBlack rounded-full bg-white",

sizeClassNames[size],

className,

)}

{children}

</button>

);

};

import { twMerge } from "tailwind-merge";

type Props = {

children: React.ReactNode;

className?: string;

};

export const Container = ({ children, className }: Props) => {

return (

{children}

</div>

);

};

import { motion } from "motion/react";

type Props = {

children: React.ReactNode;

};

export const FadeIn = ({ children }: Props) => {

return (

<motion.div

initial={{ opacity: 0, y: 20 }}

whileInView={{ opacity: 1, y: 0 }}

viewport={{ margin: "100% 0px -300px 0px" }}

{children}

</motion.div>

);

};

import { Button } from "./button";

import { Container } from "./container";

export const Header = () => {

return (

href="/"

className="-ml-6 flex h-(--header-row-height) items-center px-6 text-xl"

 <span className="sr-only">Back to homepage</span>

</a>

</Container>

</header>

<p className="text-xl font-semibold">Apple TV+</p>

<Button size="small">Stream now</Button>

</Container>

</div>

</>

);

};

import { Button } from "../button";

import { Container } from "../container";

import { useScroll, useTransform, motion } from "motion/react";

import { useRef } from "react";

export const Hero = () => {

const videoContainerRef = useRef<HTMLDivElement>(null);

const { scrollYProgress } = useScroll({

target: videoContainerRef,

offset: ["start start", "end end"],

});

const opacity = useTransform(scrollYProgress, [0, 0.7, 1], [1, 1, 0]);

return (

<motion.div

style={{ opacity }}

ref={videoContainerRef}

className="absolute -top-(--header-height) left-0 h-[200vh] w-full"

<img

className="sticky top-0 h-screen w-full object-cover"

src="https://frontend.fyi/img/apple-tv-rebuild/posters/napoleon.webp"

</motion.div>

<motion.div

className="flex h-full flex-col items-start justify-end"

variants={{

hidden: { opacity: 0 },

visible: { opacity: 1 },

}}

whileInView="visible"

exit="hidden"

animate="hidden"

viewport={{ amount: 0.98 }}

All Apple Originals. <br />

Only on Apple TV+.

</h1>

Stream now

</Button>

<p className="font-semibold">Watch on the 📺 app.</p>

</motion.div>

</Container>

</div>

);

};

import { Container } from "../container";

import { FadeIn } from "../fade-in";

export const Usps = () => {

return (

<p>New Apple Originals every month — always ad‑free.</p>

</FadeIn>

<p>

Stream on the Apple TV app on Apple devices, smart TVs, consoles, or

sticks.

</p>

</FadeIn>

<p>Watch in 4K HDR video with immersive Spatial Audio.</p>

</FadeIn>

<p>Share a single subscription with up to five people.</p>

</FadeIn>

</Container>

);

};

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

import {

Movie,

movies,

randomMoviesSet1,

randomMoviesSet2,

} from "../../movies";

import { Button } from "../button";

import {

useScroll,

useTransform,

motion,

useMotionValueEvent,

} from "motion/react";

import { useMemo, useRef, useState } from "react";

import { useWindowSize } from "react-use";

export const VideoCarousel = () => {

const { width, height } = useWindowSize();

const carouselWrapperRef = useRef<HTMLDivElement>(null);

const { scrollYProgress } = useScroll({

target: carouselWrapperRef,

offset: ["start start", "end start"],

});

const maximumScale = useMemo(() => {

const windowYRatio = height / width;

const xScale = 1.66667;

const yScale = xScale * (16 / 9) * windowYRatio;

return Math.max(xScale, yScale);

}, [width, height]);

const scale = useTransform(

scrollYProgress,

[0.3, 0.5, 0.66],

[maximumScale * 1.1, maximumScale, 1],

);

const postersOpacity = useTransform(scrollYProgress, [0.64, 0.66], [0, 1]);

const posterTranslateXLeft = useTransform(

scrollYProgress,

[0.64, 0.66],

[-20, 0],

);

const posterTranslateXRight = useTransform(

scrollYProgress,

[0.64, 0.66],

[20, 0],

);

const [carouselVariant, setCarouselVariant] = useState<"inactive" | "active">(

"inactive",

);

useMotionValueEvent(scrollYProgress, "change", (progress) => {

if (progress >= 0.67) {

setCarouselVariant("active");

} else {

setCarouselVariant("inactive");

}

});

return (

<motion.div animate={carouselVariant} className="bg-background pb-16">

<div

ref={carouselWrapperRef}

className="mt-[-100vh] h-[300vh] overflow-clip"

<motion.div

style={{ opacity: postersOpacity, x: posterTranslateXLeft }}

className="aspect-[9/16] w-[300px] shrink-0 overflow-clip rounded-2xl md:aspect-video md:w-[60vw]"

<img

className="h-full w-full object-cover"

src={movies[0].poster}

alt={movies[0].name}

</motion.div>

<motion.div

style={{ scale }}

className="relative aspect-[9/16] w-[300px] shrink-0 overflow-clip rounded-2xl md:aspect-video md:w-[60vw]"

<img

className="h-full w-full object-cover"

src={movies[1].poster}

alt={movies[1].name}

<motion.div

variants={{

active: { opacity: 1 },

inactive: { opacity: 0 },

}}

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"

<p>Best video title ever</p>

<Button>Watch now</Button>

</motion.div>

<motion.div

style={{ opacity: postersOpacity, x: posterTranslateXRight }}

className="aspect-[9/16] w-[300px] shrink-0 overflow-clip rounded-2xl md:aspect-video md:w-[60vw]"

<img

className="h-full w-full object-cover"

src={movies[2].poster}

alt={movies[2].name}

</motion.div>

</div>

<motion.div

variants={{

active: { opacity: 1, y: 0 },

inactive: { opacity: 0, y: 20 },

}}

transition={{ duration: 0.4 }}

className="-mt-[calc((100vh-(300px*(16/9)))/2)] space-y-3 pt-4 md:-mt-[calc((100vh-(60vw*(9/16)))/2)]"

</div>

</motion.div>

);

};

const SmallVideoCarousel = ({ movies }: { movies: Movie[] }) => {

return (

{movies.map((movie, index) => (

<div

className="aspect-video w-[40vw] shrink-0 md:w-[23vw]"

key={`${movie.name}-${index}`}

<img

className="h-full w-full rounded-xl object-cover"

src={movie.poster}

alt={movie.name}

</div>

))}

</div>

);

};

/**

When copying this style to your own project,

be sure to add the below import line to activate tailwind v4

@ import "tailwindcss";

**/

@layer base {

:root {

--header-row-height: 60px;

--header-height: calc(var(--header-row-height) * 2);

--hero-height: calc(100svh - var(--header-height));

}

@theme {

--color-background: #000;

--color-backgroundContrast: #111;

--color-textBlack: #1d1d1f;

--color-white: #fff;

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

--text-xs: 0.75rem; /* 12px */

--text-sm: 0.875rem; /* 14px */

--text-base: 1.0625rem; /* 17px */

--text-lg: 1.1875rem; /* 19px */

--text-lg--line-height: 1.21;

--text-xl: 1.3125rem; /* 21px */

--text-2xl: 1.5rem; /* 24px */

--text-3xl: 1.75rem; /* 28px */

--text-4xl: 2.5rem; /* 40px */

--text-4xl--line-height: 1.1;

--text-5xl: 4.5rem; /* 72px */

--text-5xl--line-height: 1.05;

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

@keyframes carousel-move {

from {

transform: translateX(0);

}

to {

transform: translateX(-100%);

}

export type Movie = {

poster: string;

};

export const movies = [

{

poster:

"https://frontend.fyi/img/apple-tv-rebuild/posters/airplane.webp",

{

poster:

"https://frontend.fyi/img/apple-tv-rebuild/posters/family-man.webp",

{

poster:

"https://frontend.fyi/img/apple-tv-rebuild/posters/laboratory.webp",

{

poster:

"https://frontend.fyi/img/apple-tv-rebuild/posters/napoleon.webp",

{

poster:

"https://frontend.fyi/img/apple-tv-rebuild/posters/person-in-darkness.webp",

{

poster:

"https://frontend.fyi/img/apple-tv-rebuild/posters/scary-building.webp",

{

poster:

"https://frontend.fyi/img/apple-tv-rebuild/posters/stars.webp",

];

export const randomMoviesSet1 = movies

.sort(() => Math.random() - 0.5)

.concat(movies.sort(() => Math.random() - 0.5))

.concat(movies.sort(() => Math.random() - 0.5));

export const randomMoviesSet2 = movies

.sort(() => Math.random() - 0.5)

.concat(movies.sort(() => Math.random() - 0.5))

.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