You are given a task to integrate an existing React component in the codebase The codebase should support: - shadcn project structure - Tailwind CSS - Typescript If it doesn't, provide instructions on how to setup project via shadcn CLI, install Tailwind or Typescript. Determine the default path for components and styles. If default path for components is not /components/ui, provide instructions on why it's important to create this folder Copy-paste this component to /components/ui folder: ```tsx motion-footer.tsx "use client"; import * as React from "react"; import { useEffect, useRef } from "react"; import { gsap } from "gsap"; import { ScrollTrigger } from "gsap/ScrollTrigger"; import { cn } from "@/lib/utils"; // Register ScrollTrigger safely for React if (typeof window !== "undefined") { gsap.registerPlugin(ScrollTrigger); } // ------------------------------------------------------------------------- // 1. THEME-ADAPTIVE INLINE STYLES // ------------------------------------------------------------------------- const STYLES = ` @import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800;900&display=swap'); .cinematic-footer-wrapper { font-family: 'Plus Jakarta Sans', sans-serif; -webkit-font-smoothing: antialiased; /* Dynamic Variables using standard shadcn/tailwind v4 tokens */ --pill-bg-1: color-mix(in oklch, var(--foreground) 3%, transparent); --pill-bg-2: color-mix(in oklch, var(--foreground) 1%, transparent); --pill-shadow: color-mix(in oklch, var(--background) 50%, transparent); --pill-highlight: color-mix(in oklch, var(--foreground) 10%, transparent); --pill-inset-shadow: color-mix(in oklch, var(--background) 80%, transparent); --pill-border: color-mix(in oklch, var(--foreground) 8%, transparent); --pill-bg-1-hover: color-mix(in oklch, var(--foreground) 8%, transparent); --pill-bg-2-hover: color-mix(in oklch, var(--foreground) 2%, transparent); --pill-border-hover: color-mix(in oklch, var(--foreground) 20%, transparent); --pill-shadow-hover: color-mix(in oklch, var(--background) 70%, transparent); --pill-highlight-hover: color-mix(in oklch, var(--foreground) 20%, transparent); } @keyframes footer-breathe { 0% { transform: translate(-50%, -50%) scale(1); opacity: 0.6; } 100% { transform: translate(-50%, -50%) scale(1.1); opacity: 1; } } @keyframes footer-scroll-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } } @keyframes footer-heartbeat { 0%, 100% { transform: scale(1); filter: drop-shadow(0 0 5px color-mix(in oklch, var(--destructive) 50%, transparent)); } 15%, 45% { transform: scale(1.2); filter: drop-shadow(0 0 10px color-mix(in oklch, var(--destructive) 80%, transparent)); } 30% { transform: scale(1); } } .animate-footer-breathe { animation: footer-breathe 8s ease-in-out infinite alternate; } .animate-footer-scroll-marquee { animation: footer-scroll-marquee 40s linear infinite; } .animate-footer-heartbeat { animation: footer-heartbeat 2s cubic-bezier(0.25, 1, 0.5, 1) infinite; } /* Theme-adaptive Grid Background */ .footer-bg-grid { background-size: 60px 60px; background-image: linear-gradient(to right, color-mix(in oklch, var(--foreground) 3%, transparent) 1px, transparent 1px), linear-gradient(to bottom, color-mix(in oklch, var(--foreground) 3%, transparent) 1px, transparent 1px); mask-image: linear-gradient(to bottom, transparent, black 30%, black 70%, transparent); -webkit-mask-image: linear-gradient(to bottom, transparent, black 30%, black 70%, transparent); } /* Theme-adaptive Aurora Glow */ .footer-aurora { background: radial-gradient( circle at 50% 50%, color-mix(in oklch, var(--primary) 15%, transparent) 0%, color-mix(in oklch, var(--secondary) 15%, transparent) 40%, transparent 70% ); } /* Glass Pill Theming */ .footer-glass-pill { background: linear-gradient(145deg, var(--pill-bg-1) 0%, var(--pill-bg-2) 100%); box-shadow: 0 10px 30px -10px var(--pill-shadow), inset 0 1px 1px var(--pill-highlight), inset 0 -1px 2px var(--pill-inset-shadow); border: 1px solid var(--pill-border); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1); } .footer-glass-pill:hover { background: linear-gradient(145deg, var(--pill-bg-1-hover) 0%, var(--pill-bg-2-hover) 100%); border-color: var(--pill-border-hover); box-shadow: 0 20px 40px -10px var(--pill-shadow-hover), inset 0 1px 1px var(--pill-highlight-hover); color: var(--foreground); } /* Giant Background Text Masking */ .footer-giant-bg-text { font-size: 26vw; line-height: 0.75; font-weight: 900; letter-spacing: -0.05em; color: transparent; -webkit-text-stroke: 1px color-mix(in oklch, var(--foreground) 5%, transparent); background: linear-gradient(180deg, color-mix(in oklch, var(--foreground) 10%, transparent) 0%, transparent 60%); -webkit-background-clip: text; background-clip: text; } /* Metallic Text Glow */ .footer-text-glow { background: linear-gradient(180deg, var(--foreground) 0%, color-mix(in oklch, var(--foreground) 40%, transparent) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; filter: drop-shadow(0px 0px 20px color-mix(in oklch, var(--foreground) 15%, transparent)); } `; // ------------------------------------------------------------------------- // 2. MAGNETIC BUTTON PRIMITIVE (Zero Dependency) // ------------------------------------------------------------------------- export type MagneticButtonProps = React.ButtonHTMLAttributes & React.AnchorHTMLAttributes & { as?: React.ElementType; }; const MagneticButton = React.forwardRef( ({ className, children, as: Component = "button", ...props }, forwardedRef) => { const localRef = useRef(null); useEffect(() => { if (typeof window === "undefined") return; const element = localRef.current; if (!element) return; const ctx = gsap.context(() => { const handleMouseMove = (e: MouseEvent) => { const rect = element.getBoundingClientRect(); const h = rect.width / 2; const w = rect.height / 2; const x = e.clientX - rect.left - h; const y = e.clientY - rect.top - w; gsap.to(element, { x: x * 0.4, y: y * 0.4, rotationX: -y * 0.15, rotationY: x * 0.15, scale: 1.05, ease: "power2.out", duration: 0.4, }); }; const handleMouseLeave = () => { gsap.to(element, { x: 0, y: 0, rotationX: 0, rotationY: 0, scale: 1, ease: "elastic.out(1, 0.3)", duration: 1.2, }); }; element.addEventListener("mousemove", handleMouseMove as any); element.addEventListener("mouseleave", handleMouseLeave); return () => { element.removeEventListener("mousemove", handleMouseMove as any); element.removeEventListener("mouseleave", handleMouseLeave); }; }, element); return () => ctx.revert(); },[]); return ( { (localRef as any).current = node; if (typeof forwardedRef === "function") forwardedRef(node); else if (forwardedRef) (forwardedRef as any).current = node; }} className={cn("cursor-pointer", className)} {...props} > {children} ); } ); MagneticButton.displayName = "MagneticButton"; // ------------------------------------------------------------------------- // 3. MAIN COMPONENT // ------------------------------------------------------------------------- const MarqueeItem = () => (

Accountability Redefined ✦ Transparent Tracking ✦ 12-Step Progress ✦ Sponsor Connection ✦ Absolute Privacy ✦

); export function CinematicFooter() { const wrapperRef = useRef(null); const giantTextRef = useRef(null); const headingRef = useRef(null); const linksRef = useRef(null); useEffect(() => { if (typeof window === "undefined") return; if (!wrapperRef.current) return; // React strict mode compatible GSAP context cleanup const ctx = gsap.context(() => { // Background Parallax gsap.fromTo( giantTextRef.current, { y: "10vh", scale: 0.8, opacity: 0 }, { y: "0vh", scale: 1, opacity: 1, ease: "power1.out", scrollTrigger: { trigger: wrapperRef.current, start: "top 80%", end: "bottom bottom", scrub: 1, }, } ); // Staggered Content Reveal gsap.fromTo( [headingRef.current, linksRef.current], { y: 50, opacity: 0 }, { y: 0, opacity: 1, stagger: 0.15, ease: "power3.out", scrollTrigger: { trigger: wrapperRef.current, start: "top 40%", end: "bottom bottom", scrub: 1, }, } ); }, wrapperRef); return () => ctx.revert(); },[]); const scrollToTop = () => { window.scrollTo({ top: 0, behavior: "smooth" }); }; return ( <>

Footer prompts & templates

Motion Footer