Shaders
header.lightDarkMode D
Gallery

A dark, atmospheric shader effect featuring a perforated or dotted surface pattern that creates a three-dimensional mesh appearance. The composition shows a gradient transition from nearly pure black on the left side to a lighter blue-tinted area on the right, where small circular perforations become increasingly visible and luminous. The dots appear to have a subtle glow or highlight, creating a sense of depth and dimensionality. The overall effect resembles a metallic mesh or speaker grille with backlighting, where light gradually illuminates the perforations from behind. The color palette is predominantly cool-toned, with deep navy and dark blue hues dominating, while subtle blue highlights (#4a81ff) accent the perforated areas. The surface has a smooth, reflective quality with gentle curvature, and the lighting creates a subtle volumetric effect that makes the mesh appear to recede into darkness on the left while emerging into illuminated visibility on the right. The atmosphere is technological and sleek, with a professional, modern aesthetic.

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="#080e24" :detail="2.8" :speed="0.8" />
    <GlassTiles :intensity="40" mask-source="idmjrma2hqerhhnv380" :roundness="1" :tile-count="25">
      <Swirl :blend="20" color-a="#0c0c1c" color-b="#4a81ff" :detail="2.8" :speed="0.8" />
    </GlassTiles>
    <Blob id="idmjrma2hqerhhnv380" :center="{ x: 0.9, y: 0.95 }" :deformation="2" :highlight-intensity="0" :highlight-x="-1" :highlight-y="-1" :highlight-z="-1" :size="0.82" :softness="1.5" :speed="0.6" :visible="false" />
  </Shader>
</template>