24 lines
681 B
TypeScript
24 lines
681 B
TypeScript
"use client";
|
|
|
|
import React, { useRef } from "react";
|
|
import { motion } from "motion/react";
|
|
import { useParallax } from "@/lib/scroll";
|
|
|
|
type ParallaxProps = {
|
|
speed?: number; // positive moves with scroll, negative opposite
|
|
axis?: "y" | "x";
|
|
className?: string;
|
|
children?: React.ReactNode;
|
|
} & React.ComponentProps<typeof motion.div>;
|
|
|
|
export function Parallax({ speed = 0.2, axis = "y", className, children, ...rest }: ParallaxProps) {
|
|
const localRef = useRef<HTMLDivElement>(null!);
|
|
const style = useParallax(localRef, speed, axis);
|
|
|
|
return (
|
|
<motion.div ref={localRef} style={style} className={className} {...rest}>
|
|
{children}
|
|
</motion.div>
|
|
);
|
|
}
|