Embossed Relief 4

A minimalist embossed shader effect on a warm, off-white background (#f5f2eb). The composition features a circular embossed shape with subtle 3D depth, creating a gentle inset effect. Within this circle are four horizontal parallel lines that appear to be embossed or engraved, creating a layered depth effect with soft shadows and highlights. The embossing has a shallow depth of 0.08, producing delicate relief details rather than dramatic protrusions. The lighting appears to respond to mouse movement along the x-axis, creating dynamic shadow and highlight variations across the embossed elements. A fine paper texture overlay (displacement 0.15, roughness 0.3) adds tactile surface quality and subtle grain throughout, enhancing the physical, handcrafted appearance. The overall mood is serene and sophisticated, with warm neutral tones and soft, diffused lighting that creates a subtle three-dimensional quality without harsh contrasts. The effect suggests embossed paper or a finely crafted material surface.

Code

vue

<script setup lang="ts">
import {
  Shader,
  Emboss,
  Paper,
  SolidColor
} from 'shaders/vue'
</script>

<template>
  <Shader
    :disable-telemetry="true"
  >
    <SolidColor color="#f5f2eb" />
    <Emboss :depth="0.08" :light-angle="{ axis: 'x', type: 'mouse', curve: 0.4, momentum: 0.15, outputMax: 311, outputMin: 240, smoothing: 0.2 }" :light-intensity="0.2" :shadow-intensity="0.23" shape-sdf-url="https://data.shaders.com/storage/v1/object/public/user-uploaded-images/user_33nh0FG48zZa0rIUZuK7vgwPfZe/LxxV4-VS2bDS_sdf.bin" />
    <Paper />
  </Shader>
</template>