{/* Change the height of the container according to number of Sections */}

); }; const Section1 = ({ scrollYProgress }: SectionProps) => { const scale = useTransform(scrollYProgress, [0, 1], [1, 0.8]); const rotate = useTransform(scrollYProgress, [0, 1], [0, -5]); return (

This section is Cool.

); }; const Section2 = ({ scrollYProgress }: SectionProps) => { const scale = useTransform(scrollYProgress, [0, 1], [0.8, 1]); const rotate = useTransform(scrollYProgress, [0, 1], [-5, 0]); // You can change the rotation if you want to add more sections below to make it look more cooler ;) return (

This is Cooler!

); }; `,__src__:"registry/react/atlasui/parallax-sections.tsx",children:(0,l.jsxs)(n.code,{"data-language":"tsx","data-theme":"default","data-line-numbers":"",children:[(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:'"'}),(0,l.jsx)(n.span,{style:{color:"#5DE4C7"},children:"use client"}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:'"'}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:";"})]}),` `,(0,l.jsx)(n.span,{className:"line",children:" "}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#5DE4C7"},children:"import "}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:"{"}),(0,l.jsx)(n.span,{style:{color:"#ADD7FF"},children:" useRef"}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:" }"}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:" from"}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:' "'}),(0,l.jsx)(n.span,{style:{color:"#5DE4C7"},children:"react"}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:'"'}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:";"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#5DE4C7"},children:"import "}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:"{"}),(0,l.jsx)(n.span,{style:{color:"#ADD7FF"},children:" motion"}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:","}),(0,l.jsx)(n.span,{style:{color:"#ADD7FF"},children:" MotionValue"}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:","}),(0,l.jsx)(n.span,{style:{color:"#ADD7FF"},children:" useScroll"}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:","}),(0,l.jsx)(n.span,{style:{color:"#ADD7FF"},children:" useTransform"}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:" }"}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:" from"}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:' "'}),(0,l.jsx)(n.span,{style:{color:"#5DE4C7"},children:"motion/react"}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:'"'}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:";"})]}),` `,(0,l.jsx)(n.span,{className:"line",children:" "}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#91B4D5"},children:"interface"}),(0,l.jsx)(n.span,{style:{color:"#A6ACCDC0"},children:" SectionProps"}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:" {"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:" scrollYProgress"}),(0,l.jsx)(n.span,{style:{color:"#91B4D5"},children:":"}),(0,l.jsx)(n.span,{style:{color:"#A6ACCDC0"},children:" MotionValue"}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:";"})]}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:"}"})}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#5DE4C7"},children:"export"}),(0,l.jsx)(n.span,{style:{color:"#91B4D5"},children:" const"}),(0,l.jsx)(n.span,{style:{color:"#ADD7FF"},children:" ParallaxSections"}),(0,l.jsx)(n.span,{style:{color:"#91B4D5"},children:" ="}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:" () "}),(0,l.jsx)(n.span,{style:{color:"#91B4D5"},children:"=>"}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:" {"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#91B4D5"},children:" const"}),(0,l.jsx)(n.span,{style:{color:"#E4F0FB"},children:" container"}),(0,l.jsx)(n.span,{style:{color:"#91B4D5"},children:" ="}),(0,l.jsx)(n.span,{style:{color:"#E4F0FBD0"},children:" useRef"}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:"("}),(0,l.jsx)(n.span,{style:{color:"#D0679D"},children:"null"}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:");"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#91B4D5"},children:" const"}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:" { "}),(0,l.jsx)(n.span,{style:{color:"#E4F0FB"},children:"scrollYProgress"}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:" } "}),(0,l.jsx)(n.span,{style:{color:"#91B4D5"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#E4F0FBD0"},children:" useScroll"}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:"({"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#ADD7FF"},children:" target"}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:":"}),(0,l.jsx)(n.span,{style:{color:"#E4F0FB"},children:" container"}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:","})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#ADD7FF"},children:" offset"}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:":"}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:" ["}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:'"'}),(0,l.jsx)(n.span,{style:{color:"#5DE4C7"},children:"start start"}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:'"'}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:","}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:' "'}),(0,l.jsx)(n.span,{style:{color:"#5DE4C7"},children:"end end"}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:'"'}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:"],"})]}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:" });"})}),` `,(0,l.jsx)(n.span,{className:"line",children:" "}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#5DE4C7C0"},children:" return"}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:" ("})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#E4F0FB"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#5DE4C7"},children:"div"}),(0,l.jsx)(n.span,{style:{color:"#91B4D5",fontStyle:"italic"},children:" ref"}),(0,l.jsx)(n.span,{style:{color:"#91B4D5"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#E4F0FB"},children:"{container} "}),(0,l.jsx)(n.span,{style:{color:"#91B4D5",fontStyle:"italic"},children:"className"}),(0,l.jsx)(n.span,{style:{color:"#91B4D5"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:'"'}),(0,l.jsx)(n.span,{style:{color:"#5DE4C7"},children:"relative h-[200vh] w-full"}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:'"'}),(0,l.jsx)(n.span,{style:{color:"#E4F0FB"},children:">"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#E4F0FB"},children:" {"}),(0,l.jsx)(n.span,{style:{color:"#767C9DB0",fontStyle:"italic"},children:"/* Change the height of the container according to number of Sections */"}),(0,l.jsx)(n.span,{style:{color:"#E4F0FB"},children:"}"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#E4F0FB"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#5DE4C7"},children:"Section1"}),(0,l.jsx)(n.span,{style:{color:"#91B4D5",fontStyle:"italic"},children:" scrollYProgress"}),(0,l.jsx)(n.span,{style:{color:"#91B4D5"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#E4F0FB"},children:"{scrollYProgress} />"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#E4F0FB"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#5DE4C7"},children:"Section2"}),(0,l.jsx)(n.span,{style:{color:"#91B4D5",fontStyle:"italic"},children:" scrollYProgress"}),(0,l.jsx)(n.span,{style:{color:"#91B4D5"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#E4F0FB"},children:"{scrollYProgress} />"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#E4F0FB"},children:" "})]}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:" );"})}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:"};"})}),` `,(0,l.jsx)(n.span,{className:"line",children:" "}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#91B4D5"},children:"const"}),(0,l.jsx)(n.span,{style:{color:"#ADD7FF"},children:" Section1"}),(0,l.jsx)(n.span,{style:{color:"#91B4D5"},children:" ="}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:" ({ "}),(0,l.jsx)(n.span,{style:{color:"#E4F0FB"},children:"scrollYProgress"}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:" }"}),(0,l.jsx)(n.span,{style:{color:"#91B4D5"},children:":"}),(0,l.jsx)(n.span,{style:{color:"#A6ACCDC0"},children:" SectionProps"}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:") "}),(0,l.jsx)(n.span,{style:{color:"#91B4D5"},children:"=>"}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:" {"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#91B4D5"},children:" const"}),(0,l.jsx)(n.span,{style:{color:"#E4F0FB"},children:" scale"}),(0,l.jsx)(n.span,{style:{color:"#91B4D5"},children:" ="}),(0,l.jsx)(n.span,{style:{color:"#E4F0FBD0"},children:" useTransform"}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:"("}),(0,l.jsx)(n.span,{style:{color:"#E4F0FB"},children:"scrollYProgress"}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:", ["}),(0,l.jsx)(n.span,{style:{color:"#5DE4C7"},children:"0"}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:", "}),(0,l.jsx)(n.span,{style:{color:"#5DE4C7"},children:"1"}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:"], ["}),(0,l.jsx)(n.span,{style:{color:"#5DE4C7"},children:"1"}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:", "}),(0,l.jsx)(n.span,{style:{color:"#5DE4C7"},children:"0.8"}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:"]);"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#91B4D5"},children:" const"}),(0,l.jsx)(n.span,{style:{color:"#E4F0FB"},children:" rotate"}),(0,l.jsx)(n.span,{style:{color:"#91B4D5"},children:" ="}),(0,l.jsx)(n.span,{style:{color:"#E4F0FBD0"},children:" useTransform"}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:"("}),(0,l.jsx)(n.span,{style:{color:"#E4F0FB"},children:"scrollYProgress"}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:", ["}),(0,l.jsx)(n.span,{style:{color:"#5DE4C7"},children:"0"}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:", "}),(0,l.jsx)(n.span,{style:{color:"#5DE4C7"},children:"1"}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:"], ["}),(0,l.jsx)(n.span,{style:{color:"#5DE4C7"},children:"0"}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:", "}),(0,l.jsx)(n.span,{style:{color:"#91B4D5"},children:"-"}),(0,l.jsx)(n.span,{style:{color:"#5DE4C7"},children:"5"}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:"]);"})]}),` `,(0,l.jsx)(n.span,{className:"line",children:" "}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#5DE4C7C0"},children:" return"}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:" ("})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#E4F0FB"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#5DE4C7"},children:"motion.section"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#91B4D5",fontStyle:"italic"},children:" style"}),(0,l.jsx)(n.span,{style:{color:"#91B4D5"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#E4F0FB"},children:"{"}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:"{"}),(0,l.jsx)(n.span,{style:{color:"#E4F0FB"},children:" scale"}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:","}),(0,l.jsx)(n.span,{style:{color:"#E4F0FB"},children:" rotate"}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:" }"}),(0,l.jsx)(n.span,{style:{color:"#E4F0FB"},children:"}"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#91B4D5",fontStyle:"italic"},children:" className"}),(0,l.jsx)(n.span,{style:{color:"#91B4D5"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:'"'}),(0,l.jsx)(n.span,{style:{color:"#5DE4C7"},children:"sticky top-0 flex h-screen items-center justify-center bg-neutral-700"}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:'"'})]}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#E4F0FB"},children:" >"})}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#E4F0FB"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#5DE4C7"},children:"h1"}),(0,l.jsx)(n.span,{style:{color:"#91B4D5",fontStyle:"italic"},children:" className"}),(0,l.jsx)(n.span,{style:{color:"#91B4D5"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:'"'}),(0,l.jsx)(n.span,{style:{color:"#5DE4C7"},children:"text-5xl font-bold"}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:'"'}),(0,l.jsx)(n.span,{style:{color:"#E4F0FB"},children:">This section is Cool."})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#E4F0FB"},children:" "})]}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:" );"})}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:"};"})}),` `,(0,l.jsx)(n.span,{className:"line",children:" "}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#91B4D5"},children:"const"}),(0,l.jsx)(n.span,{style:{color:"#ADD7FF"},children:" Section2"}),(0,l.jsx)(n.span,{style:{color:"#91B4D5"},children:" ="}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:" ({ "}),(0,l.jsx)(n.span,{style:{color:"#E4F0FB"},children:"scrollYProgress"}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:" }"}),(0,l.jsx)(n.span,{style:{color:"#91B4D5"},children:":"}),(0,l.jsx)(n.span,{style:{color:"#A6ACCDC0"},children:" SectionProps"}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:") "}),(0,l.jsx)(n.span,{style:{color:"#91B4D5"},children:"=>"}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:" {"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#91B4D5"},children:" const"}),(0,l.jsx)(n.span,{style:{color:"#E4F0FB"},children:" scale"}),(0,l.jsx)(n.span,{style:{color:"#91B4D5"},children:" ="}),(0,l.jsx)(n.span,{style:{color:"#E4F0FBD0"},children:" useTransform"}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:"("}),(0,l.jsx)(n.span,{style:{color:"#E4F0FB"},children:"scrollYProgress"}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:", ["}),(0,l.jsx)(n.span,{style:{color:"#5DE4C7"},children:"0"}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:", "}),(0,l.jsx)(n.span,{style:{color:"#5DE4C7"},children:"1"}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:"], ["}),(0,l.jsx)(n.span,{style:{color:"#5DE4C7"},children:"0.8"}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:", "}),(0,l.jsx)(n.span,{style:{color:"#5DE4C7"},children:"1"}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:"]);"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#91B4D5"},children:" const"}),(0,l.jsx)(n.span,{style:{color:"#E4F0FB"},children:" rotate"}),(0,l.jsx)(n.span,{style:{color:"#91B4D5"},children:" ="}),(0,l.jsx)(n.span,{style:{color:"#E4F0FBD0"},children:" useTransform"}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:"("}),(0,l.jsx)(n.span,{style:{color:"#E4F0FB"},children:"scrollYProgress"}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:", ["}),(0,l.jsx)(n.span,{style:{color:"#5DE4C7"},children:"0"}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:", "}),(0,l.jsx)(n.span,{style:{color:"#5DE4C7"},children:"1"}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:"], ["}),(0,l.jsx)(n.span,{style:{color:"#91B4D5"},children:"-"}),(0,l.jsx)(n.span,{style:{color:"#5DE4C7"},children:"5"}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:", "}),(0,l.jsx)(n.span,{style:{color:"#5DE4C7"},children:"0"}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:"]); "}),(0,l.jsx)(n.span,{style:{color:"#767C9DB0",fontStyle:"italic"},children:"// You can change the rotation if you want to add more sections below to make it look more cooler ;)"})]}),` `,(0,l.jsx)(n.span,{className:"line",children:" "}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#5DE4C7C0"},children:" return"}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:" ("})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#E4F0FB"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#5DE4C7"},children:"motion.section"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#91B4D5",fontStyle:"italic"},children:" style"}),(0,l.jsx)(n.span,{style:{color:"#91B4D5"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#E4F0FB"},children:"{"}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:"{"}),(0,l.jsx)(n.span,{style:{color:"#E4F0FB"},children:" scale"}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:","}),(0,l.jsx)(n.span,{style:{color:"#E4F0FB"},children:" rotate"}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:" }"}),(0,l.jsx)(n.span,{style:{color:"#E4F0FB"},children:"}"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#91B4D5",fontStyle:"italic"},children:" className"}),(0,l.jsx)(n.span,{style:{color:"#91B4D5"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:'"'}),(0,l.jsx)(n.span,{style:{color:"#5DE4C7"},children:"relative flex h-screen items-center justify-center bg-red-500"}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:'"'})]}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#E4F0FB"},children:" >"})}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#E4F0FB"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#5DE4C7"},children:"h1"}),(0,l.jsx)(n.span,{style:{color:"#91B4D5",fontStyle:"italic"},children:" className"}),(0,l.jsx)(n.span,{style:{color:"#91B4D5"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:'"'}),(0,l.jsx)(n.span,{style:{color:"#5DE4C7"},children:"text-5xl font-bold"}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:'"'}),(0,l.jsx)(n.span,{style:{color:"#E4F0FB"},children:">This is Cooler!"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#E4F0FB"},children:" "})]}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:" );"})}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:"};"})})]})})})}),(0,l.jsx)(c,{children:"Update the import paths to match your project setup."})]})})]})}),(0,l.jsx)(o,{value:"HTML",children:(0,l.jsxs)(r,{children:[(0,l.jsx)(o,{value:"cli",children:(0,l.jsx)(n.div,{"data-rehype-pretty-code-fragment":"",children:(0,l.jsx)(n.pre,{"data-language":"bash","data-theme":"default",__rawString__:`npx shadcn@latest add https://atlasui.dev/r/parallax-sections-html.json `,__npm__:`npx shadcn@latest add https://atlasui.dev/r/parallax-sections-html.json `,__yarn__:`yarn shadcn@latest add https://atlasui.dev/r/parallax-sections-html.json `,__pnpm__:`pnpm dlx shadcn@latest add https://atlasui.dev/r/parallax-sections-html.json `,__bun__:`bunx --bun shadcn@latest add https://atlasui.dev/r/parallax-sections-html.json `,children:(0,l.jsx)(n.code,{"data-language":"bash","data-theme":"default","data-line-numbers":"",children:(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#91B4D5"},children:"npx"}),(0,l.jsx)(n.span,{style:{color:"#ADD7FF"},children:" shadcn@latest"}),(0,l.jsx)(n.span,{style:{color:"#ADD7FF"},children:" add"}),(0,l.jsx)(n.span,{style:{color:"#ADD7FF"},children:" https://atlasui.dev/r/parallax-sections-html.json"})]})})})})}),(0,l.jsx)(o,{value:"manual",children:(0,l.jsxs)(d,{children:[(0,l.jsx)(c,{children:"Install the following dependencies:"}),(0,l.jsx)(n.div,{"data-rehype-pretty-code-fragment":"",children:(0,l.jsx)(n.pre,{"data-language":"bash","data-theme":"default",__rawString__:`npm install motion `,__npm__:`npm install motion `,__yarn__:`yarn add motion `,__pnpm__:`pnpm add motion `,__bun__:`bun add motion `,children:(0,l.jsx)(n.code,{"data-language":"bash","data-theme":"default","data-line-numbers":"",children:(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#91B4D5"},children:"npm"}),(0,l.jsx)(n.span,{style:{color:"#ADD7FF"},children:" install"}),(0,l.jsx)(n.span,{style:{color:"#ADD7FF"},children:" motion"})]})})})}),(0,l.jsx)(c,{children:"Copy and paste the following code into your project."}),(0,l.jsx)(n.div,{"data-rehype-pretty-code-fragment":"",children:(0,l.jsx)(n.pre,{"data-language":"html","data-theme":"default",__rawString__:`

This section is Cool.

This is Cooler!

`,children:(0,l.jsxs)(n.code,{"data-language":"html","data-theme":"default","data-line-numbers":"",children:[(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#E4F0FB"},children:"<"}),(0,l.jsx)(n.span,{style:{color:"#5DE4C7"},children:"div"}),(0,l.jsx)(n.span,{style:{color:"#5FB3A1",fontStyle:"italic"},children:" id"}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:'"'}),(0,l.jsx)(n.span,{style:{color:"#5DE4C7"},children:"parallax-container"}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:'"'}),(0,l.jsx)(n.span,{style:{color:"#E4F0FB"},children:">"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#E4F0FB"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#5DE4C7"},children:"section"}),(0,l.jsx)(n.span,{style:{color:"#5FB3A1",fontStyle:"italic"},children:" class"}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:'"'}),(0,l.jsx)(n.span,{style:{color:"#5DE4C7"},children:"section1"}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:'"'}),(0,l.jsx)(n.span,{style:{color:"#E4F0FB"},children:">"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#E4F0FB"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#5DE4C7"},children:"h1"}),(0,l.jsx)(n.span,{style:{color:"#E4F0FB"},children:">"}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:"This section is Cool."}),(0,l.jsx)(n.span,{style:{color:"#E4F0FB"},children:""})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#E4F0FB"},children:" "})]}),` `,(0,l.jsx)(n.span,{className:"line",children:" "}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#E4F0FB"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#5DE4C7"},children:"section"}),(0,l.jsx)(n.span,{style:{color:"#5FB3A1",fontStyle:"italic"},children:" class"}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:'"'}),(0,l.jsx)(n.span,{style:{color:"#5DE4C7"},children:"section2"}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:'"'}),(0,l.jsx)(n.span,{style:{color:"#E4F0FB"},children:">"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#E4F0FB"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#5DE4C7"},children:"h1"}),(0,l.jsx)(n.span,{style:{color:"#E4F0FB"},children:">"}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:"This is Cooler!"}),(0,l.jsx)(n.span,{style:{color:"#E4F0FB"},children:""})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#E4F0FB"},children:" "})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#E4F0FB"},children:""})]})]})})}),(0,l.jsxs)(c,{children:["Add ",(0,l.jsx)(n.code,{"data-line-numbers":"",children:"style.css"})," "]}),(0,l.jsx)(n.div,{"data-rehype-pretty-code-fragment":"",children:(0,l.jsx)(n.pre,{"data-language":"css","data-theme":"default",__rawString__:`* { box-sizing: border-box; margin: 0; padding: 0; } body, html { font-family: sans-serif; position: relative; } #parallax-container { width: 100%; height: 200vh; position: relative; } .section1 { position: sticky; top: 0; background-color: #404040; height: 100vh; display: flex; align-items: center; justify-content: center; will-change: transform; } .section2 { background-color: #ef4444; position: relative; height: 100vh; display: flex; align-items: center; justify-content: center; will-change: transform; } h1 { font-size: 3rem; font-weight: bold; color: white; } `,children:(0,l.jsxs)(n.code,{"data-language":"css","data-theme":"default","data-line-numbers":"",children:[(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#5DE4C7"},children:"*"}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:" {"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#ADD7FF"},children:" box-sizing"}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:": "}),(0,l.jsx)(n.span,{style:{color:"#ADD7FF"},children:"border-box"}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:";"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#ADD7FF"},children:" margin"}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:": "}),(0,l.jsx)(n.span,{style:{color:"#5DE4C7"},children:"0"}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:";"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#ADD7FF"},children:" padding"}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:": "}),(0,l.jsx)(n.span,{style:{color:"#5DE4C7"},children:"0"}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:";"})]}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:"}"})}),` `,(0,l.jsx)(n.span,{className:"line",children:" "}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#5DE4C7"},children:"body"}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:","})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#5DE4C7"},children:"html"}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:" {"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#ADD7FF"},children:" font-family"}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:": "}),(0,l.jsx)(n.span,{style:{color:"#ADD7FF"},children:"sans-serif"}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:";"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#ADD7FF"},children:" position"}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:": "}),(0,l.jsx)(n.span,{style:{color:"#ADD7FF"},children:"relative"}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:";"})]}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:"}"})}),` `,(0,l.jsx)(n.span,{className:"line",children:" "}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#E4F0FBD0",fontStyle:"italic"},children:"#"}),(0,l.jsx)(n.span,{style:{color:"#91B4D5",fontStyle:"italic"},children:"parallax-container"}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:" {"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#ADD7FF"},children:" width"}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:": "}),(0,l.jsx)(n.span,{style:{color:"#5DE4C7"},children:"100%"}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:";"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#ADD7FF"},children:" height"}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:": "}),(0,l.jsx)(n.span,{style:{color:"#5DE4C7"},children:"200vh"}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:";"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#ADD7FF"},children:" position"}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:": "}),(0,l.jsx)(n.span,{style:{color:"#ADD7FF"},children:"relative"}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:";"})]}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:"}"})}),` `,(0,l.jsx)(n.span,{className:"line",children:" "}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#E4F0FBD0",fontStyle:"italic"},children:"."}),(0,l.jsx)(n.span,{style:{color:"#5FB3A1",fontStyle:"italic"},children:"section1"}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:" {"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#ADD7FF"},children:" position"}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:": "}),(0,l.jsx)(n.span,{style:{color:"#ADD7FF"},children:"sticky"}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:";"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#ADD7FF"},children:" top"}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:": "}),(0,l.jsx)(n.span,{style:{color:"#5DE4C7"},children:"0"}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:";"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#ADD7FF"},children:" background-color"}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:": #"}),(0,l.jsx)(n.span,{style:{color:"#E4F0FB"},children:"404040"}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:";"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#ADD7FF"},children:" height"}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:": "}),(0,l.jsx)(n.span,{style:{color:"#5DE4C7"},children:"100vh"}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:";"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#ADD7FF"},children:" display"}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:": "}),(0,l.jsx)(n.span,{style:{color:"#ADD7FF"},children:"flex"}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:";"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#ADD7FF"},children:" align-items"}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:": "}),(0,l.jsx)(n.span,{style:{color:"#ADD7FF"},children:"center"}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:";"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#ADD7FF"},children:" justify-content"}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:": "}),(0,l.jsx)(n.span,{style:{color:"#ADD7FF"},children:"center"}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:";"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#ADD7FF"},children:" will-change"}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:": transform;"})]}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:"}"})}),` `,(0,l.jsx)(n.span,{className:"line",children:" "}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#E4F0FBD0",fontStyle:"italic"},children:"."}),(0,l.jsx)(n.span,{style:{color:"#5FB3A1",fontStyle:"italic"},children:"section2"}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:" {"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#ADD7FF"},children:" background-color"}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:": #"}),(0,l.jsx)(n.span,{style:{color:"#E4F0FB"},children:"ef4444"}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:";"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#ADD7FF"},children:" position"}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:": "}),(0,l.jsx)(n.span,{style:{color:"#ADD7FF"},children:"relative"}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:";"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#ADD7FF"},children:" height"}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:": "}),(0,l.jsx)(n.span,{style:{color:"#5DE4C7"},children:"100vh"}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:";"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#ADD7FF"},children:" display"}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:": "}),(0,l.jsx)(n.span,{style:{color:"#ADD7FF"},children:"flex"}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:";"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#ADD7FF"},children:" align-items"}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:": "}),(0,l.jsx)(n.span,{style:{color:"#ADD7FF"},children:"center"}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:";"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#ADD7FF"},children:" justify-content"}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:": "}),(0,l.jsx)(n.span,{style:{color:"#ADD7FF"},children:"center"}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:";"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#ADD7FF"},children:" will-change"}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:": transform;"})]}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:"}"})}),` `,(0,l.jsx)(n.span,{className:"line",children:" "}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#5DE4C7"},children:"h1"}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:" {"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#ADD7FF"},children:" font-size"}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:": "}),(0,l.jsx)(n.span,{style:{color:"#5DE4C7"},children:"3rem"}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:";"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#ADD7FF"},children:" font-weight"}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:": "}),(0,l.jsx)(n.span,{style:{color:"#ADD7FF"},children:"bold"}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:";"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#ADD7FF"},children:" color"}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:": "}),(0,l.jsx)(n.span,{style:{color:"#ADD7FF"},children:"white"}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:";"})]}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:"}"})})]})})}),(0,l.jsxs)(c,{children:["Add ",(0,l.jsx)(n.code,{"data-line-numbers":"",children:"script.js"})," "]}),(0,l.jsx)(n.div,{"data-rehype-pretty-code-fragment":"",children:(0,l.jsx)(n.pre,{"data-language":"js","data-theme":"default",__rawString__:`import { scroll, transform } from "motion"; const container = document.getElementById("parallax-container"); const section1 = document.querySelector(".section1"); const section2 = document.querySelector(".section2"); scroll( (progress) => { const scale1 = transform(progress, [0, 1], [1, 0.8]); const rotate1 = transform(progress, [0, 1], [0, -5]); section1.style.transform = \`scale(\${scale1}) rotate(\${rotate1}deg)\`; const scale2 = transform(progress, [0, 1], [0.8, 1]); const rotate2 = transform(progress, [0, 1], [-5, 0]); section2.style.transform = \`scale(\${scale2}) rotate(\${rotate2}deg)\`; }, { target: container, offset: ["start start", "end end"], }, ); `,children:(0,l.jsxs)(n.code,{"data-language":"js","data-theme":"default","data-line-numbers":"",children:[(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#5DE4C7"},children:"import "}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:"{"}),(0,l.jsx)(n.span,{style:{color:"#ADD7FF"},children:" scroll"}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:","}),(0,l.jsx)(n.span,{style:{color:"#ADD7FF"},children:" transform"}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:" }"}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:" from"}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:' "'}),(0,l.jsx)(n.span,{style:{color:"#5DE4C7"},children:"motion"}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:'"'}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:";"})]}),` `,(0,l.jsx)(n.span,{className:"line",children:" "}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#91B4D5"},children:"const"}),(0,l.jsx)(n.span,{style:{color:"#E4F0FB"},children:" container"}),(0,l.jsx)(n.span,{style:{color:"#91B4D5"},children:" ="}),(0,l.jsx)(n.span,{style:{color:"#E4F0FB"},children:" document"}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:"."}),(0,l.jsx)(n.span,{style:{color:"#E4F0FBD0"},children:"getElementById"}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:"("}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:'"'}),(0,l.jsx)(n.span,{style:{color:"#5DE4C7"},children:"parallax-container"}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:'"'}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:");"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#91B4D5"},children:"const"}),(0,l.jsx)(n.span,{style:{color:"#E4F0FB"},children:" section1"}),(0,l.jsx)(n.span,{style:{color:"#91B4D5"},children:" ="}),(0,l.jsx)(n.span,{style:{color:"#E4F0FB"},children:" document"}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:"."}),(0,l.jsx)(n.span,{style:{color:"#E4F0FBD0"},children:"querySelector"}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:"("}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:'"'}),(0,l.jsx)(n.span,{style:{color:"#5DE4C7"},children:".section1"}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:'"'}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:");"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#91B4D5"},children:"const"}),(0,l.jsx)(n.span,{style:{color:"#E4F0FB"},children:" section2"}),(0,l.jsx)(n.span,{style:{color:"#91B4D5"},children:" ="}),(0,l.jsx)(n.span,{style:{color:"#E4F0FB"},children:" document"}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:"."}),(0,l.jsx)(n.span,{style:{color:"#E4F0FBD0"},children:"querySelector"}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:"("}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:'"'}),(0,l.jsx)(n.span,{style:{color:"#5DE4C7"},children:".section2"}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:'"'}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:");"})]}),` `,(0,l.jsx)(n.span,{className:"line",children:" "}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#E4F0FBD0"},children:"scroll"}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:"("})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:" ("}),(0,l.jsx)(n.span,{style:{color:"#E4F0FB"},children:"progress"}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:") "}),(0,l.jsx)(n.span,{style:{color:"#91B4D5"},children:"=>"}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:" {"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#91B4D5"},children:" const"}),(0,l.jsx)(n.span,{style:{color:"#E4F0FB"},children:" scale1"}),(0,l.jsx)(n.span,{style:{color:"#91B4D5"},children:" ="}),(0,l.jsx)(n.span,{style:{color:"#E4F0FBD0"},children:" transform"}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:"("}),(0,l.jsx)(n.span,{style:{color:"#E4F0FB"},children:"progress"}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:", ["}),(0,l.jsx)(n.span,{style:{color:"#5DE4C7"},children:"0"}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:", "}),(0,l.jsx)(n.span,{style:{color:"#5DE4C7"},children:"1"}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:"], ["}),(0,l.jsx)(n.span,{style:{color:"#5DE4C7"},children:"1"}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:", "}),(0,l.jsx)(n.span,{style:{color:"#5DE4C7"},children:"0.8"}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:"]);"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#91B4D5"},children:" const"}),(0,l.jsx)(n.span,{style:{color:"#E4F0FB"},children:" rotate1"}),(0,l.jsx)(n.span,{style:{color:"#91B4D5"},children:" ="}),(0,l.jsx)(n.span,{style:{color:"#E4F0FBD0"},children:" transform"}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:"("}),(0,l.jsx)(n.span,{style:{color:"#E4F0FB"},children:"progress"}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:", ["}),(0,l.jsx)(n.span,{style:{color:"#5DE4C7"},children:"0"}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:", "}),(0,l.jsx)(n.span,{style:{color:"#5DE4C7"},children:"1"}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:"], ["}),(0,l.jsx)(n.span,{style:{color:"#5DE4C7"},children:"0"}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:", "}),(0,l.jsx)(n.span,{style:{color:"#91B4D5"},children:"-"}),(0,l.jsx)(n.span,{style:{color:"#5DE4C7"},children:"5"}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:"]);"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#E4F0FB"},children:" section1"}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:"."}),(0,l.jsx)(n.span,{style:{color:"#E4F0FB"},children:"style"}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:"."}),(0,l.jsx)(n.span,{style:{color:"#E4F0FB"},children:"transform"}),(0,l.jsx)(n.span,{style:{color:"#91B4D5"},children:" ="}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:" `"}),(0,l.jsx)(n.span,{style:{color:"#5DE4C7"},children:"scale("}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:"${"}),(0,l.jsx)(n.span,{style:{color:"#E4F0FB"},children:"scale1"}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:"}"}),(0,l.jsx)(n.span,{style:{color:"#5DE4C7"},children:") rotate("}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:"${"}),(0,l.jsx)(n.span,{style:{color:"#E4F0FB"},children:"rotate1"}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:"}"}),(0,l.jsx)(n.span,{style:{color:"#5DE4C7"},children:"deg)"}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:"`"}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:";"})]}),` `,(0,l.jsx)(n.span,{className:"line",children:" "}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#91B4D5"},children:" const"}),(0,l.jsx)(n.span,{style:{color:"#E4F0FB"},children:" scale2"}),(0,l.jsx)(n.span,{style:{color:"#91B4D5"},children:" ="}),(0,l.jsx)(n.span,{style:{color:"#E4F0FBD0"},children:" transform"}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:"("}),(0,l.jsx)(n.span,{style:{color:"#E4F0FB"},children:"progress"}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:", ["}),(0,l.jsx)(n.span,{style:{color:"#5DE4C7"},children:"0"}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:", "}),(0,l.jsx)(n.span,{style:{color:"#5DE4C7"},children:"1"}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:"], ["}),(0,l.jsx)(n.span,{style:{color:"#5DE4C7"},children:"0.8"}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:", "}),(0,l.jsx)(n.span,{style:{color:"#5DE4C7"},children:"1"}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:"]);"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#91B4D5"},children:" const"}),(0,l.jsx)(n.span,{style:{color:"#E4F0FB"},children:" rotate2"}),(0,l.jsx)(n.span,{style:{color:"#91B4D5"},children:" ="}),(0,l.jsx)(n.span,{style:{color:"#E4F0FBD0"},children:" transform"}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:"("}),(0,l.jsx)(n.span,{style:{color:"#E4F0FB"},children:"progress"}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:", ["}),(0,l.jsx)(n.span,{style:{color:"#5DE4C7"},children:"0"}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:", "}),(0,l.jsx)(n.span,{style:{color:"#5DE4C7"},children:"1"}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:"], ["}),(0,l.jsx)(n.span,{style:{color:"#91B4D5"},children:"-"}),(0,l.jsx)(n.span,{style:{color:"#5DE4C7"},children:"5"}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:", "}),(0,l.jsx)(n.span,{style:{color:"#5DE4C7"},children:"0"}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:"]);"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#E4F0FB"},children:" section2"}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:"."}),(0,l.jsx)(n.span,{style:{color:"#E4F0FB"},children:"style"}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:"."}),(0,l.jsx)(n.span,{style:{color:"#E4F0FB"},children:"transform"}),(0,l.jsx)(n.span,{style:{color:"#91B4D5"},children:" ="}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:" `"}),(0,l.jsx)(n.span,{style:{color:"#5DE4C7"},children:"scale("}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:"${"}),(0,l.jsx)(n.span,{style:{color:"#E4F0FB"},children:"scale2"}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:"}"}),(0,l.jsx)(n.span,{style:{color:"#5DE4C7"},children:") rotate("}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:"${"}),(0,l.jsx)(n.span,{style:{color:"#E4F0FB"},children:"rotate2"}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:"}"}),(0,l.jsx)(n.span,{style:{color:"#5DE4C7"},children:"deg)"}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:"`"}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:";"})]}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:" },"})}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:" {"})}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#ADD7FF"},children:" target"}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:":"}),(0,l.jsx)(n.span,{style:{color:"#E4F0FB"},children:" container"}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:","})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#ADD7FF"},children:" offset"}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:":"}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:" ["}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:'"'}),(0,l.jsx)(n.span,{style:{color:"#5DE4C7"},children:"start start"}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:'"'}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:","}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:' "'}),(0,l.jsx)(n.span,{style:{color:"#5DE4C7"},children:"end end"}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:'"'}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:"],"})]}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:" },"})}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:");"})})]})})})]})})]})})]})]})}function D(e={}){let{wrapper:n}=e.components||{};return n?(0,l.jsx)(n,{...e,children:(0,l.jsx)(A,{...e})}):A(e)}function a(e,n){throw new Error("Expected "+(n?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}return _(S);})(); ;return Component;

Parallax Sections

This section is Cool.

This is Cooler!

Installation