Glass Card

A glass surface built from four stacked layers: a blurred body, a refracting rim, a pointer-tracked specular highlight with a vertical light sweep, and a chromatic rim gradient blended additively over the top. Pointer movement springs all of them toward the cursor; leaving returns them to rest.

Because backdrop-filter only shows what is behind the element, the effect is invisible on a flat page. Put something with colour and contrast behind it — a gradient, an image, or blurred blobs — and the panel starts reading as glass.

Usage

Wrap any content in MGlassCard and give it a background to refract. class merges onto the root, so rounded-* on your side lines up with the rim, which paints rounded-[inherit] at the radius the component sets.

<template>
  <div class="relative w-full max-w-md overflow-hidden rounded-3xl bg-gradient-to-br from-rose-500 via-violet-500 to-sky-500 p-6">
    <div class="absolute -left-6 top-4 size-24 rounded-full bg-amber-300/80 blur-2xl" />
    <div class="absolute -right-4 bottom-2 size-28 rounded-full bg-teal-300/80 blur-2xl" />

    <MGlassCard class="rounded-3xl">
      <div class="space-y-4 text-white">
        <p class="text-xs font-medium uppercase tracking-widest text-white/70">
          Focus session
        </p>
        <h3 class="text-2xl font-semibold leading-tight">
          Deep work, uninterrupted
        </h3>
        <p class="text-sm text-white/80">
          Move the pointer across the panel — the highlight, the vertical sweep and
          the chromatic rim all follow it, then settle back on leave.
        </p>
        <UButton
          label="Start session"
          icon="i-lucide-play"
        />
      </div>
    </MGlassCard>
  </div>
</template>

Customize

Tuning the surface

Each visual layer is a prop, so the surface can be tuned without leaving the component. The two that move are driven by the pointer; the rest are static.

Props

Slots

UI

This component's theme exposes the slots below. Override any of them per instance with the ui prop, or app-wide under ui.glassCard in app.config.ts.

Accessibility

Every decorative layer — the SVG filter host, the body, the rim, the chromatic gradient, the specular highlight, the sweep, the bottom shade and the inner ring — is aria-hidden="true", and the SVG host is focusable="false". The component adds nothing to the accessibility tree; only your slot content does.

There is no role and no keyboard behaviour: the surface is a presentation wrapper, and the hover lift is a pointer affordance. Two guards keep it out of the way when it should not be there — tracking only runs under (hover: hover) and (pointer: fine), and useReducedMotion disables it entirely, removing both the pointer tracking and the whileHover lift and collapsing the root transition to duration: 0.

Anything focusable inside the card keeps its own focus ring; nothing here clips or restyles it.

Performance

• The pointer loop writes transform directly onto three plain div layers from a single requestAnimationFrame callback. Motion's own DOM pipeline snapshots MotionValues handed over through style once at mount, so the springs are read manually instead — Vue does not re-render on any frame.
• pointermove and pointerleave are attached lazily to the resolved root element, only when interactive is true, and both are removed on unmount along with the rAF frame and the matchMedia listener.
• Three layers composite with mix-blend-mode: plus-lighter; only the two that move get will-change: transform.
• rimWidth is the one layout-affecting prop: it drives the content padding, so changing it live reflows the slot content. Everything else is paint or composite.
• The rim's refraction adds an SVG feTurbulence + feDisplacementMap filter whose id is namespaced per instance with useId. The component probes CSS.supports for it once on mount and skips the filter node entirely where it is unsupported.