ham7a311

Liquid Glass CTA

CTAs 1

About

A glass-capsule newsletter sign-up form that floats over a slow drifting aurora background, bends the colour behind it at its rim, catches light at the pointer, and squashes like a liquid drop on successful submit.

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

Code

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

Usage.tsx

"use client";

import LiquidGlassCta from "@/components/ui/liquid-glass-cta";

export default function LiquidGlassCtaDemo() {
  return (
    <div className="flex min-h-screen w-full items-center justify-center">
      <LiquidGlassCta
        palette="dusk"
        eyebrow="The Sunday Letter · from Vitrine"
        headline="One careful email, every Sunday."
        sub="How good product teams in the Gulf plan, ship and write about it. Four minutes, no tracking pixels."
        action="Subscribe"
      />
    </div>
  );
}

More by ham7a311

View all
  • Route Globe

    Route Globe

    12
  • Wave Mesh

    Wave Mesh

    8
  • Uptime Ribbon

    Uptime Ribbon

    6
  • Glass Carousel

    Glass Carousel

    6
  • Glass Tiles

    Glass Tiles

    6
  • Streak Field Stats

    Streak Field Stats

    5
  • Wind Map

    Wind Map

    5
  • Time Window

    Time Window

    4

More in CTAs

View all
  • Call to Action

    Call to Action

    12
  • Call to action

    Call to action

    172
  • Button

    Button

    72
  • Two-Plan Pricing Cards

    Two-Plan Pricing Cards

    31
  • Hero

    Hero

    1.2K
  • Call to Action

    Call to Action

    22
  • Responsive Hero Banner

    Responsive Hero Banner

    2K
  • CTA 3

    CTA 3

    403