Scroll Parallax Animation (Framer Motion)

// components/FM_Parallax.tsx
import { motion, useViewportScroll, useTransform } from "framer-motion";

export const FM_Parallax = () => {
  const { scrollY } = useViewportScroll(); // track scroll
  const y = useTransform(scrollY, [0, 500], [0, -150]); // map scroll to translateY
  return (
    <motion.div
      style={{ y }}
      className="h-64 bg-gradient-to-r from-indigo-400 to-pink-300 rounded-xl shadow-lg"
    />
  );
};

• useViewportScroll: Tracks the scroll position of the viewport.
• useTransform: Maps scroll values to a CSS transform (here, vertical movement).
• The box moves upward by -150px as you scroll down 500px.
• Works without any external parallax library — pure Framer Motion.