CategoriesAllHeroNavigationFooterCall-to-ActionsFeature SectionsTestimonialsPricingContactGalleryStatsFAQServicesNewsletterAuthMiscellaneousButtons
All Components3D Cube InteractionBorder Logo GridCountdownFlip ButtonExpandable FAQsFlow ButtonGlow ButtonGrayscale CarouselInertia Zoom ParallaxLogo Cloud GridMobile Drawer NavigationPixel PreloaderProject GalleryRing ButtonShowcase CarouselSlide PreloaderSliding Stairs PreloaderStormtrooper FAQText Gradient OpacityThreads ButtonTilt HeadlineUltra Preloader
Code
app/page.tsx
1import ZoomParallaxHero from "@/components/zoom-parallax-hero";
2
3const HomePage = () => {
4 return (
5 <ZoomParallaxHero />
6 );
7}
8
9export default HomePage;Installation
Initialized a project and installed the necessary dependencies to use this component.
1. Initialize a new Next.js project:
npx create-next-app@latest my-app2. Install Framer Motion
npm install framer-motionAdd Parallax Zoom Component
src/components/zoom-parallax-hero.tsx
1"use client"
2
3import { motion, useScroll, useTransform } from 'framer-motion';
4import { fadeSlideRight, fadeSlideLeft, fadeUp, fadeIn } from '@/anim';
5import { useRef } from 'react';
6
7
8const ZoomParallaxHero = () => {
9 const container = useRef(null);
10 const { scrollYProgress } = useScroll({
11 target: container,
12 offset: ['start start', 'end end']
13 })
14
15 const moveRight = useTransform(scrollYProgress, [0, 1], [0, 300]);
16 const moveLeft = useTransform(scrollYProgress, [0, 1], [0, -300]);
17
18 return (
19 <div ref={container} className="h-[300vh] relative bg-white text-black">
20 <div className="sticky overflow-hidden top-0 h-screen flex flex-col items-center justify-center">
21 <div className=' lg:px-10 2xl:px-20 pt-16 md:pt-20 md:pb-16 w-full flex flex-col justify-between h-[68%] md:h-full'>
22 <motion.div
23 style={{ x: moveRight }}
24 className=' w-full flex items-center justify-center md:justify-start md:px-20'
25 variants={fadeSlideRight}
26 initial="hidden"
27 animate="visible"
28 >
29 <motion.h1
30 className=' font-cabinetGrotesk text-7xl md:text-9xl xl:text-[12rem] font-bold uppercase'
31 variants={fadeIn}
32 initial="hidden"
33 animate="visible"
34 transition={{ delay: 0.2 }}
35 >Astrae</motion.h1>
36 </motion.div>
37 <motion.div
38 className=' hidden xl:flex w-full items-center justify-between'
39 variants={fadeUp}
40 initial="hidden"
41 animate="visible"
42 transition={{ delay: 0.4 }}
43 >
44 <span className='uppercase font-medium md:text-base 2xl:text-lg'>
45 A Creative
46 <span className=' font-semibold'>
47 Ecommerce Studio
48 </span>
49 </span>
50 <span className='uppercase font-medium md:text-base 2xl:text-lg'>
51 Setting Brands
52 <span className='font-semibold'>
53 In Motion
54 </span>
55 </span>
56 </motion.div>
57 <span>
58
59 <motion.div
60 style={{ x: moveLeft }}
61 className=' w-full flex items-center justify-center md:justify-end md:px-20'
62 variants={fadeSlideLeft}
63 initial="hidden"
64 animate="visible"
65 transition={{ delay: 0.6 }}
66 >
67 <motion.h1
68 className=' font-cabinetGrotesk text-7xl md:text-9xl xl:text-[12rem] font-bold uppercase'
69 variants={fadeIn}
70 initial="hidden"
71 animate="visible"
72 transition={{ delay: 0.8 }}
73 >Studios</motion.h1>
74 </motion.div>
75
76 <motion.div
77 className=' md:hidden flex flex-col w-full items-center'
78 variants={fadeUp}
79 initial="hidden"
80 animate="visible"
81 transition={{ delay: 0.4 }}
82 >
83 <span className=' uppercase font-medium md:text-base 2xl:text-lg'>
84 A Creative <span className=' font-semibold'>Ecommerce Studio</span>
85 </span>
86 <span className=' uppercase font-medium md:text-base 2xl:text-lg'>
87 Setting Brands <span className=' font-semibold'>In Motion</span>
88 </span>
89 </motion.div>
90 </span>
91
92 </div>
93 <motion.div
94 style={{ scale: useTransform(scrollYProgress, [0, 1], [1, 3]) }}
95 className="w-full h-full top-0 absolute flex items-center justify-center"
96 variants={fadeIn}
97 initial="hidden"
98 animate="visible"
99 transition={{ delay: 1 }}
100 >
101 <div
102 className={`
103 relative object-cover w-[90vw] xl:w-[40rem]
104 2xl:w-[52rem] h-auto aspect-square sm:aspect-video md:aspect-video`
105 }>
106 <video
107 autoPlay
108 loop
109 muted
110 playsInline
111 preload="auto"
112 className="object-cover w-full h-full"
113 >
114 <source src="/assets/showcase-2.mp4" type="video/mp4" />
115 Your browser does not support the video tag.
116 </video>
117 </div>
118 </motion.div>
119 </div>
120 </div>
121 )
122}
123
124export default ZoomParallaxHero;Add Animations
src/anim/index.ts
1import { Variants } from "framer-motion";
2
3export const fadeSlideRight: Variants = {
4 hidden: { opacity: 0, x: -80 },
5 visible: { opacity: 1, x: 0, transition: { duration: 0.8, ease: "easeOut" } },
6};
7
8export const fadeSlideLeft: Variants = {
9 hidden: { opacity: 0, x: 80 },
10 visible: { opacity: 1, x: 0, transition: { duration: 0.8, ease: "easeOut" } },
11};
12
13export const fadeUp: Variants = {
14 hidden: { opacity: 0, y: 40 },
15 visible: { opacity: 1, y: 0, transition: { duration: 0.8, ease: "easeOut" } },
16};
17
18export const fadeIn: Variants = {
19 hidden: { opacity: 0 },
20 visible: { opacity: 1, transition: { duration: 1, ease: "easeOut" } },
21};Add Global Styles
src/globals.css
1@import "tailwindcss";
2
3:root {
4 --background: #ffffff;
5 --foreground: #000000;
6}
7
8@theme inline {
9 --color-background: var(--background);
10 --color-foreground: var(--foreground);
11 --font-inter: var(--font-inter);
12 --font-cabinetGrotesk: var(--font-cabinetGrotesk);
13}
14
15@media (prefers-color-scheme: dark) {
16 :root {
17 --background: #000000;
18 --foreground: #ededed;
19 }
20}
21
22body {
23 background: var(--background);
24 color: var(--foreground);
25 font-family: Arial, Helvetica, sans-serif;
26}
27
28
29/* Scrollbar */
30
31/* Firefox */
32* {
33 scrollbar-width: none;
34}
35/* Chrome, Edge, and Safari */
36*::-webkit-scrollbar {
37 display: none;
38}
39/* End Scrollbar */