Shaders
header.lightDarkMode D
Gallery

A dark, atmospheric shader effect featuring a perforated or mesh-like surface with semi-circular and circular cutouts arranged in a regular grid pattern. The surface appears metallic and three-dimensional, with subtle lighting that creates depth and dimension across the holes. The background transitions from deep black on the left to a slightly lighter dark blue-gray on the right, creating a directional light source. The perforations have a glossy, reflective quality with soft shadows cast within each opening, suggesting a glass tile or metallic mesh material. The overall composition has a subtle swirl or wave distortion that creates organic movement across the rigid geometric pattern. The lighting emphasizes the edges of each hole, creating a rim-lit effect that makes the surface appear to glow subtly. The atmosphere is cool, technological, and somewhat mysterious, with a depth-of-field effect that keeps the center sharp while edges fade slightly into darkness.

Code

vue
<script setup lang="ts">
import {
  Shader,
  Blob,
  GlassTiles,
  Swirl
} from 'shaders/vue'
</script>

<template>
  <Shader
    :disable-telemetry="true"
  >
    <Swirl :blend="10" color-a="#0c0c1c" color-b="#0e1a2e" :detail="2.8" :speed="0.8" />
    <GlassTiles :intensity="40" mask-source="idmjrma2hqerhhnv380" :rotation="22" :roundness="1" :tile-count="25">
      <Swirl :blend="8" color-a="#0c0c1c" color-b="#7ab8c4" :detail="2.8" :speed="0.8" />
    </GlassTiles>
    <Blob id="idmjrma2hqerhhnv380" :center="{ x: 0.35, y: 0.28 }" :deformation="1.4" :highlight-intensity="0" :highlight-x="-1" :highlight-y="-1" :highlight-z="-1" :size="0.72" :softness="1.2" :speed="0.6" :visible="false" />
  </Shader>
</template>