Prayani

ASCII Liquid Login

Component 1

About

Split sign-in card over living water: a moving ASCII preview panel, a light ASCII texture on a crisp background image, hold-to-ripple and a glyph dissolve on success.

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

Code

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

Usage.tsx

import { AsciiLiquidLogin } from "@/components/ui/ascii-liquid-login";

export default function DemoOne() {
  return <AsciiLiquidLogin onBack={() => {}} onForgotPassword={() => {}} />;
}

More by Prayani

View all
  • Loading Animation

    Loading Animation

    155
  • Mesh Gradient

    Mesh Gradient

    17