The Phantom Lift 3D Levitation Input
The Phantom Lift 3D Levitation Input
This input treats the UI element as a physical object in 3D space. It lifts, tilts, and emits light from beneath when activated.
Analysis
Description: A dark, matte-finish input. When the user clicks, the entire bar physically levitates upwards (Y-axis) and tilts backward (X-axis), revealing a hot glowing lava-like light emanating from underneath it. The icon floats independently above the text.
Uses:
High-end E-commerce (Checkout forms).
Gaming Profiles.
Product Launch countdowns.
Benefits:
Spatial Awareness: Uses depth to indicate state, which is very intuitive for users.
Aesthetic Delight: The "glow from beneath" feels extremely premium, like under-glow on a sports car.
Touch Friendly: The large lifting animation prevents finger obstruction on mobile.
Technique Used:
CSS Perspective: Sets the vanishing point for 3D elements.
Transform TranslateZ: moves elements closer or further from the "camera," creating parallax between the icon and the input.
Focus-Within: Applies styles to the parent wrapper when the child input is focused, allowing us to rotate the whole container.