Shaders
header.lightDarkMode D
Gallery

A dark, sophisticated shader effect featuring a deep navy-to-black gradient background with a prominent blue dotted halftone pattern concentrated in the upper-left quadrant. The pattern consists of spherical dots that gradually decrease in size and opacity as they disperse diagonally across the composition, creating a sense of depth and movement. The dots exhibit a bright cyan-blue luminescence (#4a81ff equivalent) that contrasts sharply against the nearly black background (#0c0c1c to #080e24). The effect suggests a glass tile or crystalline structure overlaid with swirling distortion, giving the impression of light refracting through a textured surface. The overall mood is technological and sleek, with a subtle sense of motion implied by the gradient dispersal pattern. The composition uses a 45-degree rotation for the tile structure, and the dots appear to follow a radial distribution pattern emanating from the upper-left area, fading into complete darkness toward the bottom-right.

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" :rotation="45" :roundness="1" :tile-count="25">
      <Swirl :blend="0" color-a="#0c0c1c" color-b="#4a81ff" :detail="2.8" :speed="0.8" />
    </GlassTiles>
    <Blob id="idmjrma2hqerhhnv380" :center="{ x: 0.04, y: 0.42 }" :deformation="1" :highlight-intensity="0" :highlight-x="-1" :highlight-y="-1" :highlight-z="-1" :size="0.69" :softness="1" :speed="0.6" :visible="false" />
  </Shader>
</template>