The Hyper Loop Holographic Input
The Hyper Loop Holographic Input
This input features a localized glowing event horizon. It doesn't just glow; it simulates a rotating photon ring using mask composites and conical gradients.
Analysis
Description: A seemingly transparent glass input. Upon focus, a multi-colored neon ring physically rotates around the perimeter, and the label bounces out to float above the field with a glowing text effect.
Uses:
Fintech Dashboards (Crypto wallets).
AI/SaaS Landing Pages (e.g., ChatGPT wrappers).
Cybersecurity login portals.
Benefits:
Visual Hierarchy: The high-contrast glow instantly draws the eye to the active field.
Performance: The rotation uses Houdini (@property), which is smoother than standard keyframes on modern browsers.
Cleanliness: Uses a "Mask Composite" trick to show the border only without filling the center, keeping the text legible.
Technique Used:
CSS Houdini (@property): Allows us to animate the gradient angle variable directly.
Mask Composite (XOR): This cuts a hole in the gradient background so only the border remains visible.
Backdrop Filter: Blurs the background behind the input for a frosted glass look.