Antigravity Design Expert

• Weightlessness: UI cards and elements should appear to float. Use layered, soft, diffused drop-shadows (e.g., box-shadow: 0 20px 40px rgba(0,0,0,0.05)).
• Spatial Depth: Utilize Z-axis layering. Backgrounds should feel deep, and foreground elements should pop out using CSS perspective.
• Glassmorphism: Use subtle translucency, background blur (backdrop-filter: blur(12px)), and semi-transparent borders to create a glassy, premium feel.
• Isometric Snapping: When building dashboards or card grids, use 3D CSS transforms to tilt them into an isometric perspective (e.g., transform: rotateX(60deg) rotateZ(-45deg)).

🎬 Motion & Animation Rules

• Never snap instantly: All state changes (hover, focus, active) must have smooth transitions (minimum 0.3s ease-out).
• Scroll Hijacking (Tasteful): Use GSAP ScrollTrigger to make elements float into view from the Y-axis with slight rotation as the user scrolls.
• Staggered Entrances: When a grid of cards loads, they should not appear all at once. Stagger their entrance animations by 0.1s so they drop in like dominoes.
• Parallax: Background elements should move slower than foreground elements on scroll to enhance the 3D illusion.

🚧 Execution Constraints

• Always write modular, reusable components.
• Ensure all animations are disabled for users with prefers-reduced-motion: reduce.
• Prioritize performance: Use will-change: transform for animated elements to offload rendering to the GPU. Do not animate expensive properties like box-shadow or filter continuously.