Emboss Surface

A realistic embossed, debossed, plaster or metal-stamped material for text, icons and shapes.

Installation

npx smoothui-cli add emboss-surface

Features

Four material recipes — highlight and shade derived from lightAngle, depth and softness. Polymorphic as prop and optional pointer-driven lighting.

Scroll the sections below — the panel shows one material at a time.

Variants

Emboss

Raised relief, light from the upper left — the default raised type treatment.

Deboss

The same relief, pressed into the surface — inverted highlight and shade.

Plaster

Soft specular lighting through an SVG feSpecularLighting filter with a matching feDistantLight.

Metal Stamp

Hard-edged die strike with a metallic falloff — icons and SVG shapes take the same strike.

Extras

Interactive

interactive couples the light angle to the pointer by writing CSS custom properties directly, with no React re-render per move.

Icon

Metal-stamp variant on an icon and label — shows how relief works on non-text content with a custom lightAngle.

Usage notes

• lightAngle is measured in degrees where 0 is light from the right and 90 is light from directly above. The default of 135 puts the light in the upper left, matching the convention most UI shadows use.
• depth is expressed in pixels and softness runs from 0 (a hard die edge) to 1 (a diffuse plaster falloff).
• color defaults to the background theme token. Pass any CSS colour — including another token — and the highlight and shade are mixed from it.

Accessibility

ARIA Attributes

Screen Reader

• The relief is entirely presentational: it lives in box-shadow, text-shadow and filter, so the rendered text stays real text and is announced normally.
• The as prop keeps semantics in your hands — render as="h2" for a heading and the element is exposed with the correct role and level.
• The filter <svg> is aria-hidden, zero-sized and pointer-events: none, so it never enters the accessibility tree or the tab order.
• Keep enough contrast between color and the surrounding surface; relief alone must never be the only signal that something is interactive.

Reduced Motion

This component respects the prefers-reduced-motion media query via useReducedMotion from Motion. When reduced motion is preferred, the pointer listeners for interactive are never attached and the light angle stays fixed at the lightAngle you passed. The box-shadow transition is also removed, so any change applies instantly. The same static behaviour applies on devices that do not match (hover: hover) and (pointer: fine).

Props