41 lines
1.1 KiB
TypeScript
41 lines
1.1 KiB
TypeScript
"use client";
|
|
|
|
import Image from "next/image";
|
|
import { motion, useScroll, useTransform } from "framer-motion";
|
|
import { useRef } from "react";
|
|
|
|
export default function ScrollHero({
|
|
src,
|
|
alt,
|
|
}: {
|
|
src: string;
|
|
alt: string;
|
|
}) {
|
|
const ref = useRef<HTMLDivElement | null>(null);
|
|
const { scrollYProgress } = useScroll({
|
|
target: ref,
|
|
offset: ["start start", "end start"],
|
|
});
|
|
|
|
// Tech-style: slightly more noticeable than Apple A, but still classy
|
|
const scale = useTransform(scrollYProgress, [0, 1], [1.05, 1.0]);
|
|
const y = useTransform(scrollYProgress, [0, 1], [0, 18]);
|
|
|
|
return (
|
|
<div ref={ref} className="rounded-3xl glass-strong specular overflow-hidden">
|
|
<div className="relative h-[320px] md:h-[420px] w-full">
|
|
<motion.div style={{ scale, y }} className="absolute inset-0">
|
|
<Image
|
|
src={src}
|
|
alt={alt}
|
|
fill
|
|
className="object-cover"
|
|
priority
|
|
/>
|
|
<div className="absolute inset-0 bg-gradient-to-t from-black/15 via-black/0 to-transparent pointer-events-none" />
|
|
</motion.div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|