Liquid Glass Login

Forms 16

About

A sign-in card made of real refracting liquid glass over slow, layered flames and rising embers. The card, fields and buttons bend and colour-fringe what is behind them, and the whole form can be dragged anywhere. Email, password, forgot password, and Google, Apple and GitHub sign-in.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Liquid Glass Login to your project and fits it to your theme.

Code

How Liquid Glass Login is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import { GlassLogin } from "@/components/ui/liquid-glass-login";

export default function GlassLoginDemo() {
  return (
    <GlassLogin>
      {/* behind the card, so the glass bends it when you drag the card over */}
      <p className="absolute inset-x-0 bottom-0 m-0 p-4 text-center text-[12px] text-white/60 [text-shadow:0_1px_4px_rgb(0_0_0/0.8)]">
        by{" "}
        <a
          href="https://aakashmehra.com/ref/glasslogin"
          target="_blank"
          rel="noopener noreferrer"
          className="text-white/80 underline-offset-4 hover:underline"
        >
          aakashmehra.com
        </a>
      </p>
    </GlassLogin>
  );
}