"use client"; import React from "react"; import { motion, useScroll, useTransform, useSpring, MotionValue, } from "motion/react"; export const HeroParallax = ({ products, }: { products: { title: string; link: string; thumbnail: string; }[]; }) => { const firstRow = products.slice(0, 5); const secondRow = products.slice(5, 10); const thirdRow = products.slice(10, 15); const ref = React.useRef(null); const { scrollYProgress } = useScroll({ target: ref, offset: ["start start", "end start"], }); const springConfig = { stiffness: 300, damping: 30, bounce: 100 }; const translateX = useSpring( useTransform(scrollYProgress, [0, 1], [0, 1000]), springConfig ); const translateXReverse = useSpring( useTransform(scrollYProgress, [0, 1], [0, -1000]), springConfig ); const rotateX = useSpring( useTransform(scrollYProgress, [0, 0.2], [15, 0]), springConfig ); const opacity = useSpring( useTransform(scrollYProgress, [0, 0.2], [0.2, 1]), springConfig ); const rotateZ = useSpring( useTransform(scrollYProgress, [0, 0.2], [20, 0]), springConfig ); const translateY = useSpring( useTransform(scrollYProgress, [0, 0.2], [-700, 500]), springConfig ); return (

{firstRow.map((product) => ( ))} {secondRow.map((product) => ( ))} {thirdRow.map((product) => ( ))}

); }; export const Header = () => { return (

The Ultimate
development studio

We build beautiful products with the latest technologies and frameworks. We are a team of passionate developers and designers that love to build amazing products.

); }; export const ProductCard = ({ product, translate, }: { product: { title: string; link: string; thumbnail: string; }; translate: MotionValue; }) => { return (

{product.title}

); };

The Ultimate development studio

{product.title}

The Ultimate
development studio

Hero Parallax

Instalação

Dependências