Skip to content
Pinky UI

Liquid Card

A translucent surface where light gathers under the pointer.

  • cards
  • liquid
  • glow
  • depth
  • glass
  • translucent
  • refraction
  • surface

Liquid Card

Quiet priority

LIVE

The surface redistributes light and keeps the action attached to the content.

Pointer-aware materialInspect →

Quick usage

usage
import { LiquidCard } from "@pinky-ui/components";

<LiquidCard intensity={0.2} blur={18} tint="cloud">
  <FeatureSummary />
</LiquidCard>

Presets

Clear

Neutral glass. The default.

tint={"clear"} blur={18} intensity={0.2}

Soft

Less blur, gentler light — safest over busy backgrounds.

tint={"clear"} blur={10} intensity={0.14}

Cloud

Cool milk-blue wash.

tint={"cloud"} blur={18} intensity={0.24}

Blush

Warm pink wash for a single hero surface.

tint={"blush"} blur={18} intensity={0.24}

Install

Add @pinky-ui/components as a dependency, or use the CLI to copy this component's source directly into your project — no dependency to manage, fully editable.

shell
npm install @pinky-ui/components

Prefer to run the whole repository locally instead?

repository
git clone https://github.com/florash/Pinky-UI.git
cd Pinky-UI
npm install
npm run dev

Props

PropTypeDefaultDescription
intensitynumber0.2Strength of the highlight and edge refraction, 0–1.
blurnumber18Backdrop blur in px. 0 makes the card opaque and free.
tint"clear" | "cloud" | "blush""clear"Colour wash carried by the surface.
depthnumber0.12Apparent thickness — how far light travels through it.
radius"lg" | "xl" | "2xl""2xl"Corner radius from the shape scale.
paddedbooleantrueTurn off for edge-to-edge media.
disabledbooleanfalseRenders the static surface with no pointer response.

Accessibility

  • Text sits on a tinted backing rather than raw transparency, so contrast survives whatever is behind the card.
  • The highlight and edge layers are aria-hidden and non-interactive.
  • Nothing moves: the surface is safe next to text and needs no pointer.
  • Semantics inside the card are untouched.

Reduced motion

With prefers-reduced-motion: reduce, the light stops following the pointer. The tint, blur and edge remain, so the card looks identical at rest.

When to use

  • One or two premium feature surfaces per screen
  • Cards floating over imagery or a coloured field
  • Pricing or product highlights that need to feel expensive

When not to use

  • Dashboards and dense grids — backdrop blur is the most expensive thing on this list
  • Long text-heavy blocks, where translucency costs legibility
  • Over unpredictable user content where contrast cannot be guaranteed

Playground

Mira Odaka

Interaction designer

Drag your pointer across this card and watch how the parameters change its character.

0.35
0.18
1.02
Radius
generated
<JellyCard
  elasticity={0.35}
  intensity={0.18}
  hoverScale={1.02}
  radius="xl"
>
  <ProfileCard />
</JellyCard>