Building an Award-Winning Portfolio Showcase with Smooth View Transitions and Framer Motion

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

interface Project {
  id: string;
  title: string;
  category: string;
  image: string;
}

const projects: Project[] = [
  { id: '1', title: 'Kinetix Studio', category: 'Creative Direction', image: 'https://images.unsplash.com/photo-1618005182384-a83a8bd57fbe' },
  { id: '2', title: 'Mono Space', category: 'Brand Identity', image: 'https://images.unsplash.com/photo-1600585154340-be6161a56a0c' },
];

export function ProjectGrid() {
  return (
    <div className="grid grid-cols-1 md:grid-cols-2 gap-8 p-6 max-w-7xl mx-auto bg-neutral-950 text-white min-h-screen">
      {projects.map((project) => (
        <motion.div 
          key={project.id}
          className="group relative overflow-hidden rounded-lg aspect-[4/3] bg-neutral-900 cursor-pointer"
          whileHover={{ scale: 0.98 }}
          transition={{ duration: 0.3, ease: [0.16, 1, 0.3, 1] }}
        >
          <img 
            src={project.image} 
            alt={project.title}
            className="w-full h-full object-cover transition-transform duration-700 group-hover:scale-105"
          />
          <div className="absolute inset-0 bg-gradient-to-t from-black/80 via-black/20 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex flex-col justify-end p-8">
            <span className="text-xs uppercase tracking-widest text-neutral-400 mb-1">{project.category}</span>
            <h3 className="text-2xl font-light tracking-tight">{project.title}</h3>
          </div>
        </motion.div>
      ))}
    </div>
  );
}

import React, { useEffect, useRef } from 'react';

export function CustomCursor() {
  const cursorRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
    const cursor = cursorRef.current;
    if (!cursor) return;

    let mouseX = 0;
    let mouseY = 0;
    let cursorX = 0;
    let cursorY = 0;

    const handleMouseMove = (e: MouseEvent) => {
      mouseX = e.clientX;
      mouseY = e.clientY;
    };

    const render = () => {
      // Lerp (Linear Interpolation) for smooth trailing lag
      cursorX += (mouseX - cursorX) * 0.2;
      cursorY += (mouseY - cursorY) * 0.2;

      cursor.style.transform = `translate3d(${cursorX}px, ${cursorY}px, 0)`;
      requestAnimationFrame(render);
    };

    window.addEventListener('mousemove', handleMouseMove);
    const animationFrame = requestAnimationFrame(render);

    return () => {
      window.removeEventListener('mousemove', handleMouseMove);
      cancelAnimationFrame(animationFrame);
    };
  }, []);

  return (
    <div 
      ref={cursorRef}
      className="fixed top-0 left-0 w-8 h-8 rounded-full border border-white pointer-events-none z-50 -ml-4 -mt-4 mix-blend-difference hidden md:block"
    />
  );
}

import React, { useState } from 'react';

export function ViewTransitionWrapper() {
  const [view, setView] = useState<'grid' | 'list'>('grid');

  const toggleView = () => {
    // Check if View Transitions API is supported by the browser
    if (!document.startViewTransition) {
      setView((prev) => (prev === 'grid' ? 'list' : 'grid'));
      return;
    }

    document.startViewTransition(() => {
      setView((prev) => (prev === 'grid' ? 'list' : 'grid'));
    });
  };

  return (
    <div className="p-8 bg-black min-h-screen text-white">
      <button 
        onClick={toggleView}
        className="mb-8 px-4 py-2 border border-neutral-700 rounded text-sm hover:bg-neutral-800 transition-colors"
      >
        Switch to {view === 'grid' ? 'List View' : 'Grid View'}
      </button>

      <div className={view === 'grid' ? 'grid grid-cols-3 gap-4' : 'flex flex-col gap-2'}>
        <div className="p-6 bg-neutral-900 rounded" style={{ viewTransitionName: 'item-1' }}>
          Project Alpha
        </div>
        <div className="p-6 bg-neutral-900 rounded" style={{ viewTransitionName: 'item-2' }}>
          Project Beta
        </div>
      </div>
    </div>
  );
}

Build a React component using Tailwind CSS and Framer Motion that renders an immersive portfolio showcase. Include:
1. A sticky minimalist header with dark-mode styling (bg-black, text-white).
2. A responsive masonry or multi-column grid with hover zoom effects on images.
3. Staggered fade-in animations for grid items using Framer Motion variants.
4. Clean TypeScript interfaces for project cards and semantic HTML structure.