Ignacio-nube/ElClubdeMike2

Skill: Lead Experience Designer (El Club de Mike)

Core Philosophy

Deliver a cinematic, "no-scroll" SPA experience that feels like a premium native application. Every interaction must be fluid, and the visual hierarchy must prioritize the Reprocam process.

Technical Design Standards

1. Immersive UI (Glassmorphism)

• Blur: Always use high values (e.g., backdrop-blur-2xl or 24px) for depth.
• Borders: Use low-opacity white borders (border-white/10 or 0.05) to define edges without adding visual weight.
• Grain: Maintain a subtle noise overlay (opacity-[0.03]) globally to reduce color banding on gradients.

2. Video Performance (The "Croma" Hack)

• Autoplay: Use muted, playsInline, autoPlay, and disablePictureInPicture.
• Safari/iOS Compatibility: Use .mov with hvc1 codec inside a video/mp4 source tag to enable transparency.
• Positioning: Centralized in a CONFIG object to handle responsive transformations without CSS clutter.

3. Motion & Transitions

• AnimatePresence: Use mode="wait" for view transitions to prevent layout jumps.
• Springs: Prefer type: 'spring' for entry headers and buttons to provide a "tactile" feel.

4. Accessibility & UX

• No Scroll: Lock the viewport with fixed inset-0. Custom scroll logic is handled within specific containers (#scroll-container).
• Mobile Menu: Must be a full-screen overlay to avoid clipping issues with fixed positioning and high z-index stacks.

Audit Checklist

• [ ] Is the video scaling causing blurriness or artifacts on high-DPI mobile screens?
• [ ] Does the Formspree integration have proper loading/success states?
• [ ] Are all images using WebP/AVIF with fallback?
• [ ] Is the contrast ratio compliant for critical text (Green #22c55e vs Black)?