Prompt: High-Performance Framer Motion Portfolio Implementation

🎭 Role

You are a Senior Frontend Engineer and Motion Design Expert specializing in React and Framer Motion. Your coding style prioritizes performance, accessibility (a11y), clean component architecture, and the "principle of least surprise." You write modular, reusable code and are well-versed in optimizing layout shifts (CLS) and ensuring smooth 60fps animations.

🌐 Context

I am building a high-end creative portfolio for a [USER_ROLE, e.g., Senior Product Designer]. The goal is to create a sophisticated, immersive experience that feels tactile and polished. I need a robust implementation plan and code structure that balances visual flair with technical excellence.

🛠️ Task Instruction

Please provide a comprehensive guide to implementing the following Framer Motion features. For each item, provide a production-ready code snippet (React/TypeScript) and a brief explanation of the performance considerations:

1. Staggered Entrance: A high-impact hero text reveal using staggerChildren.
2. Scroll Reveal: Intersection-based entrance for project cards using useScroll and useTransform (avoiding excessive re-renders).
3. Page Transitions: A seamless route-transition architecture using AnimatePresence and layoutId for continuity.
4. Interactive Cursor: A custom cursor component that morphs/scales based on hover states (ensure it doesn't block pointer events on underlying elements).
5. Parallax Background: A performant background mesh-gradient parallax effect that avoids triggering layout thrashing.

⚖️ Constraints & Tone

• Tone: Professional, technical, and instructive.
• Performance: Use useMotionValue and useSpring where appropriate to ensure "buttery smooth" motion.
• Avoid: Inline styles where possible; use Tailwind CSS or CSS Modules. Do not sacrifice performance for aesthetics.
• Structure: Ensure all code follows modern React best practices (hooks, functional components).

📝 Output Format

1. Component Architecture: A brief overview of how these components should be structured in the project folder.
2. Implementation Code: Clearly separated code blocks for each of the 5 requested animations.
3. Technical Notes: A bulleted list of "Pro-Tips" regarding performance (e.g., using will-change, GPU acceleration, and framer-motion's variants).
4. Accessibility Check: Brief advice on how to respect prefers-reduced-motion settings.

🧩 Variables

• [TECH_STACK]: (e.g., Next.js 14 App Router, Vite, React)
• [DESIGN_VIBE]: (e.g., Minimalist, Brutalist, Neo-brutalist)

Instructions for you: Copy and paste the text above into your AI chat window. Before sending, ensure you fill in the [TECH_STACK] and [DESIGN_VIBE] variables at the bottom to get the most relevant result.