Shaders
header.lightDarkMode D
Gallery

A mesmerizing shader effect featuring a grid of circular perforations or holes arranged in a regular pattern across a curved, three-dimensional surface. The holes appear to be semi-spherical indentations with depth, creating a honeycomb-like structure. The surface is illuminated with a cyan-green glow that emanates from the right side, creating a dramatic lighting gradient that transitions from dark navy-black on the left to bright cyan-green on the right. The lighting creates strong specular highlights on the raised edges of each circular perforation, giving them a glossy, metallic appearance. The overall effect suggests a technological or sci-fi aesthetic, with the curved surface appearing to wrap around the viewer's perspective. The depth of field creates a subtle blur effect where the perforations fade into focus from the foreground to background, enhancing the three-dimensional quality. The swirling base layer beneath the glass tiles adds subtle color variation and movement, while the cyan-green accent color (#22e8c4) provides vibrant contrast against the dark navy base colors (#0c0c1c, #0e1a2e). The atmosphere is cool, modern, and futuristic with an emphasis on geometric precision and luminous depth.

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="#22e8c4" :detail="2.8" :speed="0.8" />
    </GlassTiles>
    <Blob id="idmjrma2hqerhhnv380" :center="{ x: 0.52, y: 0.38 }" :deformation="1.4" :highlight-intensity="0" :highlight-x="-1" :highlight-y="-1" :highlight-z="-1" :size="0.75" :softness="1.2" :speed="0.6" :visible="false" />
  </Shader>
</template>