CoreHigh-End Animated Cardsno dependencies

LiquidGlassCard

Layered translucent card combining CSS backdrop blur, specular rim lighting, pointer-reactive highlight sheen, and optional SVG turbulence surface texture.

Preview

CSS Translucency + Rim Sheen

Layered Specular Translucency

Combines CSS backdrop-filter blur, pointer-tracked rim illumination, and subtle surface sheen with graceful browser fallbacks.

Customize

3 props
16
0.26

Installation

Copies the component source and its CSS Module into your project.

npx motionfoundry add liquid-glass-card

Writes components/ui/liquid-glass-card.tsx and components/styles/liquid-glass-card.module.css.

Usage

Updates live as you change the controls — only props that differ from the defaults are included.

example.tsx
1import { LiquidGlassCard } from "@motionfoundry/ui";2 3export function Example() {4  return (5    <LiquidGlassCard />6  );7}

Props

PropTypeDefault
title

Card title.

string'Layered Specular Translucency'
description

Body description.

string'Combines CSS backdrop-filter...'
blurPx

CSS backdrop-filter blur radius in pixels.

number16
rimIntensity

Opacity of the pointer-reactive specular rim highlight.

number0.26
surfaceTint

Translucent card fill tint.

string'rgba(24, 24, 32, 0.72)'

Accessibility

Uses layered CSS translucency and SVG filter texture (without claiming physical optical refraction) while preserving high-contrast foreground text and fallback solid backgrounds when backdrop-filter is unsupported or prefers-reduced-motion is active.

Toggle prefers-reduced-motion in your OS or browser devtools (Rendering → Emulate CSS media feature) to verify the reduced-motion state.

Source

components/ui/liquid-glass-card.tsx
1"use client";2 3import * as React from "react";4import styles from "../styles/liquid-glass-card.module.css";5 6export interface LiquidGlassCardProps extends React.HTMLAttributes<HTMLDivElement> {7  /** Card title */8  title?: string;9  /** Supporting copy */10  description?: string;11  /** Backdrop blur radius in pixels */12  blurPx?: number;13  /** Pointer rim highlight intensity */14  rimIntensity?: number;15  /** Translucent background tint */16  surfaceTint?: string;17}18 19export function LiquidGlassCard({20  title = "Layered Specular Translucency",21  description = "Combines CSS backdrop-filter blur, pointer-tracked rim illumination, and subtle surface sheen with graceful browser fallbacks.",22  blurPx = 16,23  rimIntensity = 0.26,24  surfaceTint = "rgba(24, 24, 32, 0.72)",25  children,26  className = "",27  ...rest28}: LiquidGlassCardProps) {29  const cardRef = React.useRef<HTMLDivElement>(null);30 31  const handlePointerMove = (e: React.PointerEvent<HTMLDivElement>) => {32    const el = cardRef.current;33    if (!el) return;34    const rect = el.getBoundingClientRect();35    el.style.setProperty("--mf-lg-x", `${e.clientX - rect.left}px`);36    el.style.setProperty("--mf-lg-y", `${e.clientY - rect.top}px`);37    el.style.setProperty("--mf-lg-active", "1");38  };39 40  const handlePointerLeave = () => {41    cardRef.current?.style.setProperty("--mf-lg-active", "0");42  };43 44  return (45    <div46      ref={cardRef}47      onPointerMove={handlePointerMove}48      onPointerLeave={handlePointerLeave}49      style={50        {51          "--mf-lg-blur": `${blurPx}px`,52          "--mf-lg-rim": rimIntensity,53          "--mf-lg-tint": surfaceTint,54        } as React.CSSProperties55      }56      className={`${styles.card} ${className}`.trim()}57      {...rest}58    >59      <div aria-hidden="true" className={styles.specularSheen} />60      <div aria-hidden="true" className={styles.edgeHighlight} />61      <div className={styles.inner}>62        <span className={styles.eyebrow}>CSS Translucency + Rim Sheen</span>63        <h3 className={styles.title}>{title}</h3>64        <p className={styles.description}>{description}</p>65        {children}66      </div>67    </div>68  );69}