Web Designers Showcase Component - Detailed Prompt for Vercel v0

Component Overview

Create a modern, interactive React component that showcases two web designers working on a 3D website project. The component should demonstrate their expertise in Three.js and feature smooth Framer Motion animations.

Design Requirements

Layout & Structure

• Split-screen layout with two designer cards side by side on desktop
• Stacked layout on mobile devices
• Glassmorphism design with frosted glass effect and subtle transparency
• Dark theme with vibrant accent colors (neon blue, purple, cyan)
• 3D floating elements in the background using CSS transforms
• Responsive grid system that adapts to different screen sizes

Designer Cards Content

Each designer card should include:

• Profile photo (placeholder with stylized avatar)
• Name and title (e.g., "Alex Chen - Senior 3D Developer", "Sarah Martinez - Creative Technologist")
• Specialization tags (Three.js, WebGL, GLSL Shaders, React Three Fiber, etc.)
• Experience level (years of experience with animated counter)
• Portfolio stats (projects completed, clients served, awards won)
• Skills progress bars with animated fill effects
• Social links (GitHub, LinkedIn, Dribbble) with hover animations
• "View Portfolio" CTA button with gradient background

Three.js Integration Elements

• Floating 3D wireframe objects (cube, sphere, torus) rotating slowly in the background
• Particle system with subtle movement and color transitions
• Interactive hover effects that trigger 3D transformations
• Gradient meshes or geometric patterns as background elements
• Lighting effects that respond to user interaction

Framer Motion Animations

Implement these specific animations:

• Staggered entrance animation for both cards sliding in from opposite sides
• Hover animations with scale, rotation, and glow effects
• Text reveal animations with typewriter or fade-in effects
• Progress bar animations that fill up on component mount
• Floating micro-interactions for skill tags and social icons
• Parallax scrolling effects for background elements
• Page transition animations when switching between designers

Interactive Features

• Card flip animation to reveal additional information on hover/click
• Skill filtering - click on tags to highlight related projects
• Animated statistics counters that increment when in viewport
• Smooth scrolling between sections
• Mouse-following spotlight effect that illuminates cards
• Dynamic color scheme that changes based on selected designer

Visual Effects & Styling

• Gradient borders with animated rainbow effects
• Backdrop blur for modern glass morphism
• Custom CSS animations for floating elements
• Gradient text effects for names and titles
• Box shadows with color matching the theme
• Smooth transitions for all interactive elements (duration: 0.3-0.6s)
• Subtle noise texture overlay for depth

Typography & Content

• Modern sans-serif fonts (Inter, Poppins, or system fonts)
• Hierarchical text sizing with clear visual hierarchy
• Animated text reveals using Framer Motion's text animations
• Color-coded skill levels (beginner: blue, intermediate: purple, expert: gold)
• Tooltip information on hover for technical terms

Responsive Behavior

• Desktop (1200px+): Side-by-side cards with full animations
• Tablet (768px-1199px): Slightly stacked with adjusted spacing
• Mobile (320px-767px): Fully stacked with simplified animations
• Touch-friendly interactions for mobile devices
• Optimized performance for lower-end devices

Sample Designer Data Structure

const designers = [  
  {  
    id: 1,  
    name: "Alex Chen",  
    title: "Senior 3D Developer",  
    avatar: "/placeholder-avatar-1.jpg",  
    experience: 8,  
    location: "San Francisco, CA",  
    specializations: ["Three.js", "WebGL", "GLSL Shaders", "React Three Fiber"],  
    skills: {  
      "Three.js": 95,  
      "WebGL": 88,  
      "Framer Motion": 92,  
      "React": 90,  
      "TypeScript": 85  
    },  
    stats: {  
      projects: 127,  
      clients: 89,  
      awards: 15  
    },  
    social: {  
      github: "alexchen",  
      linkedin: "alex-chen-3d",  
      dribbble: "alexchen3d"  
    },  
    portfolio: "https://alexchen3d.com"  
  },  
  {  
    id: 2,  
    name: "Sarah Martinez",  
    title: "Creative Technologist",  
    avatar: "/placeholder-avatar-2.jpg",  
    experience: 6,  
    location: "New York, NY",  
    specializations: ["Creative Coding", "Interactive Design", "Motion Graphics", "AR/VR"],  
    skills: {  
      "Creative Coding": 92,  
      "Three.js": 87,  
      "After Effects": 94,  
      "Blender": 79,  
      "JavaScript": 88  
    },  
    stats: {  
      projects: 98,  
      clients: 64,  
      awards: 22  
    },  
    social: {  
      github: "sarahmartinez",  
      linkedin: "sarah-martinez-creative",  
      dribbble: "sarahcreates"  
    },  
    portfolio: "https://sarahcreates.studio"  
  }  
];  

Animation Timeline

1. 0-0.5s: Background 3D elements fade in
2. 0.3-0.8s: Left designer card slides in from left
3. 0.5-1.0s: Right designer card slides in from right
4. 0.8-1.5s: Text content animates in with stagger
5. 1.2-2.0s: Progress bars animate to their values
6. 1.5s+: Continuous floating and hover interactions

Performance Considerations

• Lazy loading for heavy 3D elements
• Optimized animations using transform and opacity only
• Reduced motion respect for accessibility
• Frame rate optimization for smooth 60fps animations
• Memory management for Three.js objects

Accessibility Features

• ARIA labels for all interactive elements
• Keyboard navigation support
• Screen reader compatibility with semantic HTML
• High contrast mode support
• Reduced motion preferences respected
• Focus indicators with custom styling

Technical Implementation Notes

• Use Tailwind CSS for styling with custom utilities
• Implement Framer Motion variants for consistent animations
• Create custom hooks for Three.js scene management
• Use React.memo for performance optimization
• Implement intersection observer for scroll-triggered animations
• Add error boundaries for graceful fallbacks

Expected Output

A polished, production-ready React component that serves as an impressive showcase of both designers' skills while demonstrating advanced web technologies. The component should feel premium, interactive, and showcase the cutting-edge nature of 3D web development.