Shaders
header.lightDarkMode D
Gallery

A dark, atmospheric shader effect featuring a perforated or mesh-like surface with circular holes arranged in a regular grid pattern. The surface appears to curve and undulate in three-dimensional space, creating a sense of depth and movement. The lighting creates strong contrast between the illuminated edges of the holes (appearing in cyan and light-blue tones) and the deep shadows within them (dark navy and black). The holes gradually transition from smaller and darker on the left side to larger and more brightly lit on the right side, suggesting perspective and curvature. A subtle swirling motion is visible beneath the glass tile effect, with hints of cyan-blue coloration bleeding through the perforations. The overall mood is technological, cool, and slightly ominous, with a glossy, reflective quality suggesting a metallic or glass material. The depth of field creates a soft focus on the left transitioning to sharper detail on the right, enhancing the three-dimensional illusion.

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="#0e1028" :detail="2.8" :speed="0.8" />
    <GlassTiles :intensity="40" mask-source="idmjrma2hqerhhnv380" :rotation="22" :roundness="1" :tile-count="25">
      <Swirl :blend="12" color-a="#0c0c1c" color-b="#3e9db8" :detail="2.8" :speed="0.8" />
    </GlassTiles>
    <Blob id="idmjrma2hqerhhnv380" :center="{ x: 0.62, y: 0.35 }" :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>