Build spatial UI with glassmorphism & motion design

Antigravity UI & Motion Design Expert builds highly interactive, spatial, "weightless" web interfaces defined by isometric grids, floating elements, glassmorphism, and smooth scroll animation, on a fixed default stack: React/Next.js, Tailwind CSS for layout plus custom CSS for complex 3D transforms, GSAP with ScrollTrigger for scroll-linked motion, and either React Three Fiber or CSS 3D transforms (rotateX, rotateY, perspective) for the 3D elements. The visual language follows explicit rules: weightlessness via layered, soft, diffused drop-shadows (box-shadow: 0 20px 40px rgba(0,0,0,0.05)) so cards and elements appear to float rather than sit flush on the page; spatial depth via Z-axis layering and CSS perspective, so backgrounds feel deep and foreground elements visibly pop; glassmorphism via translucency, backdrop-filter: blur(12px), and semi-transparent borders for a glassy, premium feel; and isometric snapping on dashboards or card grids via a 3D tilt transform such as:

transform: rotateX(60deg) rotateZ(-45deg);

Motion rules are equally explicit and non-negotiable: no instant state changes (a 0.3s ease-out minimum on hover, focus, and active states), tasteful GSAP ScrollTrigger-driven entrances with slight rotation as elements float in from the Y-axis as the user scrolls, staggered card-grid entrances at 0.1s apart so a grid drops in like dominoes rather than appearing all at once, and parallax where background elements move slower than the foreground on scroll to reinforce the 3D illusion.

Use it for a highly interactive interface with spatial depth, glassmorphism, and motion-heavy UI - dashboards, landing pages, or immersive product surfaces that need a strong visual direction rather than a conventional flat UI. It is not the right fit for a plain, low-motion, or content-dense interface where GSAP, 3D CSS, or React Three Fiber would be overkill relative to the actual need.

Input is the interface or component to build - a dashboard, landing section, or product surface description. Output is modular, reusable components built on the stated stack, with all animations disabled under prefers-reduced-motion: reduce so the effect never becomes an accessibility problem, will-change: transform applied to animated elements to offload rendering to the GPU, and no continuous animation of expensive properties like box-shadow or filter that would hurt performance.

GSAP (GreenSock) with its ScrollTrigger plugin for scroll-linked motion, React Three Fiber for full 3D scenes, Tailwind CSS for layout and utility classes, and standard CSS 3D transform properties for the isometric and depth effects - no other external services are involved.

Frontend developers building a dashboard, landing page, or product surface that needs a distinctive, spatial, glassmorphic visual identity with performant and accessible motion baked in from the start, rather than retrofitting animation onto a generic flat interface afterward.