Spring-Tension Parallax Header with Sticky Morph

import React from 'react';
import { motion, useScroll, useTransform } from 'framer-motion';

export function ParallaxHeader({ title = "Explore ExodeUI", imageUrl }) {
  const { scrollY } = useScroll();
  const headerHeight = useTransform(scrollY, [0, 240], [320, 72]);
  const imageScale = useTransform(scrollY, [-150, 0, 240], [1.3, 1, 0.9]);
  const titleScale = useTransform(scrollY, [0, 240], [1.25, 0.95]);

  return (
    <motion.header 
      style={{ height: headerHeight }} 
      className="sticky top-0 z-50 w-full overflow-hidden bg-stone-900 border-b border-stone-800"
    >
      <motion.div 
        style={{ scale: imageScale }}
        className="absolute inset-0 bg-cover bg-center opacity-60"
        style={{ backgroundImage: `url(${imageUrl || '/assets/hero-bg.webp'})` }}
      />
      <div className="absolute inset-0 bg-gradient-to-t from-stone-950 via-transparent" />
      <motion.div 
        style={{ scale: titleScale }}
        className="relative h-full flex items-end p-6 max-w-5xl mx-auto"
      >
        <h1 className="text-white font-bold text-2xl sm:text-3xl">{title}</h1>
      </motion.div>
    </motion.header>
  );
}