Component 040Forms

Hologram Login

A translucent cyan login panel floats above a glowing projector, beamed up by a pulsing cone of holographic light.

Enter any username and password and press Continue.

Login

Loading preview…

Live interactive previewExplore the interaction, then make it yours.

Quick start

Save hologram-login.tsx in your components folder, then import it below. Requires React and Tailwind CSS.

TSXapp/page.tsx

import HologramLogin from "@/components/ui/hologram-login";

export default function LoginPage() {
  return <HologramLogin />;
}

Behind the interaction

Designed to explore, ready to adapt.

A CSS-only emitter puck and clip-path light cone pulse beneath a frosted, gently floating glass panel.

Labelled fields, required validation, a verifying state, error alerts, and a welcome screen with sign-out are all built in.

Pass an async onSubmit: resolve to show success or reject to display your error message. Reduced motion stops the float and pulse.

Keep exploring