Emboss Surface

Turns any element into a lit material surface. Four variants — emboss, deboss, plaster and metal-stamp — each describe a different relief recipe: two shadow layers for a raised surface, the same pair inset for a pressed one, a wider pair plus an SVG specular filter for plaster, and a hard zero-blur pair with an SVG drop-shadow for a stamped plate.

A stack of box-shadows can only darken, which is why plaster is different: it blurs the element's own alpha channel into a height field, lights that field with feSpecularLighting, and clips the result back to the original silhouette. That is what actually produces a lit surface rather than a shaded one.

Usage

Wrap content in the component and pick a variant. The rendered element takes its background from color and its size from your own classes, so give it a shape and padding. Note that the default color is the page background itself: pass a colour of your own, or the surface blends straight into the page and its relief reads only from the shadows. Add interactive when you want the light to follow the pointer — it is gated to hover-capable pointers and reduced motion automatically.

<template>
  <div class="flex w-full max-w-2xl flex-col gap-4">
    <div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
      <MEmbossSurface
        v-for="entry in variants"
        :key="entry.value"
        :variant="entry.value"
        :color="entry.color"
        :softness="entry.softness"
        class="flex h-36 flex-col items-center justify-center gap-1 rounded-2xl border border-default p-6"
      >
        <span
          class="text-lg font-semibold"
          :class="entry.textClass"
        >
          {{ entry.label }}
        </span>
        <span
          class="text-xs opacity-70"
          :class="entry.textClass"
        >
          {{ entry.hint }}
        </span>
      </MEmbossSurface>
    </div>

    <MEmbossSurface
      variant="plaster"
      interactive
      color="#ded9d2"
      :softness="0.8"
      :depth="3"
      class="flex h-32 items-center justify-center rounded-2xl border border-default"
    >
      <p class="text-sm font-medium text-stone-800">
        Move the pointer across this surface
      </p>
    </MEmbossSurface>
  </div>
</template>

<script setup lang="ts">
const variants = [
  { value: 'emboss', label: 'Emboss', hint: 'Raised surface', color: '#52525b', softness: 0.5, textClass: 'text-zinc-100' },
  { value: 'deboss', label: 'Deboss', hint: 'Pressed surface', color: '#52525b', softness: 0.5, textClass: 'text-zinc-100' },
  { value: 'plaster', label: 'Plaster', hint: 'Lit SVG relief', color: '#d6d3d1', softness: 0.8, textClass: 'text-stone-800' },
  { value: 'metal-stamp', label: 'Metal stamp', hint: 'Hard zero-blur edges', color: '#71717a', softness: 0.35, textClass: 'text-zinc-50' },
] as const
</script>

Customize

Every prop is live — switch the material, drag the depth, softness and light angle, and toggle pointer tracking. variant and as are dropdowns; the rest start at the component's own defaults.

Variants

plaster is the only variant that mounts an SVG filter, and the only one whose filter is an url(#…) rather than a drop-shadow. metal-stamp is the only other variant that touches filter, and the only one with a zero-blur layer.

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.embossSurface in app.config.ts.

Accessibility

The component renders no ARIA roles or attributes of its own and adds nothing to the accessibility tree — it is a box-shadow, a background colour and, for plaster, an aria-hidden="true" SVG whose <title> is decorative. Its only semantic contribution is as: setting as="button" gives you a real button, and setting as="div" leaves whatever you put inside to carry the semantics.

Interactive light tracking is pointer-only. There is no keyboard equivalent and no focus styling, so a keyboard user sees the surface at its resting angle — which is a fine outcome, but it is not an interactive control and should not be used as one.

The SVG filter's id comes from Vue's useId rather than a random string, so it is stable across server and client render. This matters: the surface references it from its own inline filter, and a hydration mismatch would leave the filter dangling and the plaster variant unlit until the next paint.

Under prefers-reduced-motion — read via useReducedMotion — the box-shadow transition is dropped entirely and pointer tracking is disabled, so the surface renders statically. Note this only removes the transition on box-shadow; the highlight/shade layers are still composed.

Performance

• The whole style object is one computed. Nothing recomputes per pointer event except the two custom properties --es-dx and --es-dy, written directly to element.style — no Vue re-render per move.
• The pointer only sets a direction, never a distance: the offset is normalized by the cursor's distance from centre and scaled by depth, so the relief depth stays a property of the material rather than of the pointer's distance.
• The hover-capability check uses matchMedia with a change listener rather than a feature sniff, and the listener is removed in onBeforeUnmount.
• plaster is the only variant that costs an SVG filter pass; the other three are pure box-shadow and (for metal-stamp) filter: drop-shadow, all handled by the compositor.
• Shadow layers are emitted as CSS custom properties (calc(var(--es-blur) * 1px)), so the light angle can change without rebuilding the shadow string — only the custom properties are updated.