Integrate Existing React Component: Container Scroll Animation

You are given a task to integrate an existing React component into the codebase. The codebase should support shadcn structure, Tailwind CSS, and TypeScript.

---

Required Project Support

• shadcn project structure
• Tailwind CSS
• TypeScript

Default Paths

• Components: /components/ui
• Styles: Typically app/globals.css (Next.js) or src/index.css (Vite)

Step 0 — Copy/Paste Files to Correct Directories

Copy the component below into:
/components/ui/container-scroll-animation.tsx

container-scroll-animation.tsx
"use client";
import React, { useRef } from "react";
import { useScroll, useTransform, motion, MotionValue } from "framer-motion";
export const ContainerScroll = ({
titleComponent,
children,
}: {
titleComponent: string | React.ReactNode;
children: React.ReactNode;
}) => {
const containerRef = useRef(null);
const { scrollYProgress } = useScroll({
target: containerRef,
});
const [isMobile, setIsMobile] = React.useState(false);
React.useEffect(() => {
const checkMobile = () => {
setIsMobile(window.innerWidth <= 768);
};
checkMobile();
window.addEventListener("resize", checkMobile);
return () => {
window.removeEventListener("resize", checkMobile);
};
}, []);
const scaleDimensions = () => {
return isMobile ? [0.7, 0.9] : [1.05, 1];
};
const rotate = useTransform(scrollYProgress, [0, 1], [20, 0]);
const scale = useTransform(scrollYProgress, [0, 1], scaleDimensions());
const translate = useTransform(scrollYProgress, [0, 1], [0, -100]);
return (

 
  {children}
);
};
export const Header = ({ translate, titleComponent }: any) => {
return (

{titleComponent}

);
};
export const Card = ({
rotate,
scale,
children,
}: {
rotate: MotionValue;
scale: MotionValue;
translate: MotionValue;
children: React.ReactNode;
}) => {
return (

 {children}
);
};

Copy the demo below into a suitable place:
Next.js: app/(routes)/page.tsx or components/demos/hero-scroll-demo.tsx
Vite/React: src/pages or src/components

demo.tsx
"use client";
import React from "react";
import { ContainerScroll } from "@/components/ui/container-scroll-animation";
// NOTE:
// - If you are using WordPress headless with Next.js, next/image is OK.
// - If you are using React/Vite inside a WP theme/plugin, replace next/image with a normal .
import Image from "next/image";
export function HeroScrollDemo() {
return (
  
 Unleash the power of 
  Scroll Animations
 } > 
);
}

Step 1 — Install External Dependencies

npm i framer-motion

Implementation Guidelines

1. Analyze the component structure and identify all required dependencies
2. Review the component arguments and state
3. Identify any required providers/hooks and install them

Questions to Ask

• What data/props will be passed to this component?
• Are there any specific state management requirements?
• Are there any required assets (images, icons, etc.)?
• What is the expected responsive behavior?
• What is the best place to use this component in the app?

Steps to Integrate

1. Copy/paste all code in the correct directories
2. Install external dependencies
3. Replace image assets with known Unsplash images (example provided)
4. Use lucide-react icons for logos if needed (not required for this component)