ham7a311

Liquid Glass CTA

CTAs 2

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 LiquidGlassCtaLagoonDemo() {
  return (
    <div className="flex min-h-screen w-full items-center justify-center">
      <LiquidGlassCta
        palette="lagoon"
        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
  • Wave Mesh

    Wave Mesh

    148
  • Route Globe

    Route Globe

    132
  • Glass Tiles

    Glass Tiles

    116
  • Glyph Swell

    Glyph Swell

    52
  • Orbit Ring Stats

    Orbit Ring Stats

    49
  • Ask Bar

    Ask Bar

    41
  • Intent Label

    Intent Label

    34
  • Glass Ribbons

    Glass Ribbons

    30

More in CTAs

View all
  • Hills Landscape Footer with Call to Action

    Hills Landscape Footer with Call to Action

    167
  • Call to Action 01

    Call to Action 01

    58
  • CTA 3

    CTA 3

    413
  • Call To Action

    Call To Action

    29
  • Responsive Hero Banner

    Responsive Hero Banner

    2.1K
  • Hero

    Hero

    1.3K
  • Centered Hero with Image Fan

    Centered Hero with Image Fan

    1K
  • Two-Plan Pricing Cards

    Two-Plan Pricing Cards

    40