LiquidGlassCard NEW

A glass-style card component with a liquid visual treatment for modern UI surfaces.

Preview/Playground

Created by

Prashanth

#FFFFFF

Interactive Widget

Click to expand, or drag me around.

Astro

---
import LiquidGlassCard from "@astroanimate/core/LiquidGlassCard";
---

<LiquidGlassCard
  draggable={true}
  expandable={true}
  blurIntensity="lg"
>
  <div>
    <h3>Interactive Widget</h3>
    <p>Click to expand, or drag me around.</p>
  </div>
</LiquidGlassCard>

Installation

bash

npm install @astroanimate/core

Usage

---
import LiquidGlassCard from "@astroanimate/core/LiquidGlassCard";
---

<LiquidGlassCard />

Renders the LiquidGlassCard component with AstroAnimate defaults.

Props

Prop	Type	Default	Description
`width`	`string`	`"360px"`	Base width
`height`	`string`	`"160px"`	Base height
`expandedWidth`	`string`	`"520px"`	Width when clicked (if `expandable=true`)
`expandedHeight`	`string`	`"320px"`	Height when clicked (if `expandable=true`)
`draggable`	`boolean`	`false`	Enable free-form drag with spring snap-back
`expandable`	`boolean`	`false`	Enable click-to-expand
`blurIntensity`	`"sm" \| "md" \| "lg" \| "xl"`	`"sm"`	Backdrop blur radius
`glowIntensity`	`"none" \| "xs" \| "sm" \| "md" \| "lg" \| "xl" \| "2xl"`	`"sm"`	Outer glow intensity
`shadowIntensity`	`"none" \| "xs" \| "sm" \| "md" \| "lg" \| "xl" \| "2xl"`	`"md"`	Inner shadow/depth intensity
`borderRadius`	`string`	`"24px"`	Card border radius
`paddingTop`	`string`	`"24px"`	Inner top padding
`paddingBottom`	`string`	`"24px"`	Inner bottom padding
`paddingLeft`	`string`	`"24px"`	Inner left padding
`paddingRight`	`string`	`"24px"`	Inner right padding
`class`	`string`	`""`	Outer wrapper classes
`contentClass`	`string`	`""`	Inner content wrapper classes

Use When

Building premium floating widgets, tool palettes, or interactive dashboard cards
Needing a futuristic, frosted-glass aesthetic with physical depth and realistic reflections

Avoid When

Nesting inside strict CSS grids or flex layouts where expansion would break surrounding layouts
Displaying long-form reading content (heavy blur and glass effects can reduce text legibility)

Accessibility

Respects prefers-reduced-motion: reduce by completely disabling the heavy SVG turbulence filter, neutralizing drag physics, and making expansion transitions instant

Performance

Zero Hydration: Powered by a lightweight vanilla inline script
Dynamic Injection: The complex SVG displacement filter is generated via JavaScript on the client, keeping the initial server HTML payload incredibly small
Hardware Accelerated: Drag physics update CSS custom properties (-lg-tx, -lg-ty) via requestAnimationFrame to maintain 60fps

Credits

Credit to @Barsan