antigravity-design-expert

Glassmorphism combines translucent backgrounds, backdrop-filter: blur(12px), and semi-transparent borders to simulate frosted glass. Layer soft diffused box-shadows underneath to make elements appear floating above the surface.

Apply transform: rotateX(60deg) rotateZ(-45deg) to the grid container with a perspective property on the parent. This tilts the layout into an isometric view while keeping child cards interactive.

Use GSAP ScrollTrigger for scroll-linked motion like parallax and float-in effects with rotation, since it ties animation progress to scroll position. Reserve CSS transitions for simple hover and focus state changes.

Animating expensive properties like box-shadow, filter, or layout properties forces repaints every frame. Animate only transform and opacity, and add will-change: transform to offload rendering to the GPU.

Wrap all animation logic in a prefers-reduced-motion: reduce media query check and disable transitions and GSAP effects when the user has enabled that system preference. This is a required constraint, not an optional enhancement.

Yes, React Three Fiber handles WebGL 3D scenes while Tailwind manages layout and utility styling around the canvas. For simpler depth effects, CSS 3D transforms with perspective often suffice without a WebGL layer.