Emboss Surface

Renders a surface with a 3D emboss or deboss effect. Applies shadows and colors based on variant and light angle. Use for visual depth in backgrounds or interactive elements.

byEdu Calvo from Smoothui

Installation

terminal

pnpm dlx layro-cli add @educlopez/emboss-surface

npx layro-cli add @educlopez/emboss-surface

npx layro-cli add @educlopez/emboss-surface

bunx layro-cli add @educlopez/emboss-surface

New project? Start with init. Writes third-party code and installs packages with scripts off.

Code

Demo

"use client";

import { cn } from "@/lib/utils";
import { useReducedMotion } from "motion/react";
import {
  type CSSProperties,
  type ElementType,
  type ReactNode,
  type PointerEvent as ReactPointerEvent,
  useCallback,
  useEffect,
  useId,
  useState,
} from "react";