Spatial Interaction
Exploring depth, physics, and living interfaces.
The Concept
Modern interfaces are moving beyond flat screens. By incorporating physical properties—like inertia, spring physics, and dynamic lighting—digital elements can feel like tangible objects that exist in real space.
The Experiment
We built a spatial UI prototype. It features a glassmorphic card that tracks cursor movement in 3D space, casting dynamic glare and shadow. It also explores magnetic UI components that naturally pull toward the user's cursor to increase the effective hit area and provide tactile feedback.
Design Decisions
Preserve-3D
Using CSS transform-style: preserve-3d to literally push child elements (like text and buttons) out from the card's surface along the Z-axis, creating genuine parallax.
Dynamic Glare
A radial gradient that updates its coordinates based on mouse position, simulating a light source reflecting off a physical glass surface.
Magnetic Elements
Applying math to calculate the cursor's distance from the button center, translating the button slightly towards the cursor to create a "snapping" magnetic feel.
Design Specs & Assets
Use these core parameters to recreate the Interaction aesthetic in your own projects.
Color Palette
#000000 (Void)#FFFFFF (Kinetic Light)Dependencies
GSAP (GreenSock)
Lenis (Smooth Scroll)
Key Snippet: Magnetic Cursor
gsap.to(".cursor", {
x: mouse.x,
y: mouse.y,
duration: 0.6,
ease: "power3.out"
});Accessibility (a11y) Analysis
The Art vs. Access Tradeoff
The Conflict: Scroll-jacking (Lenis) and complex GSAP parallax cause severe motion sickness for vestibular disorder sufferers. Custom magnetic cursors also break standard OS accessibility tools.
The Compromise: @media (prefers-reduced-motion: reduce) must be strictly enforced. If active, GSAP ScrollTriggers must be disabled, and the layout must revert to standard, native vertical scrolling instantly.