Shaders
header.lightDarkMode D
Gallery

Digital Activation 8

Digital Activation

A sophisticated digital shader effect featuring a three-dimensional spherical or teardrop-shaped form rendered with a glass-like material against a near-black background. The shape is filled with a dense grid of small yellow-gold square pixels or dots arranged in a regular pattern, creating a pixelated texture that follows the contours of the 3D form. The yellow elements (#ffe100) transition from bright and saturated on the right side to darker and more subdued on the left side, suggesting volumetric lighting and depth. A subtle spiral gradient emanates from the lower portion of the shape, blending from dark navy blue (#0a131f) to bright yellow, creating a sense of rotational energy and movement. The glass material exhibits chromatic aberration effects with a slight rainbow-like color separation at the edges, particularly visible along the curved boundaries. The overall composition has a dark, atmospheric quality with a faint background dot grid pattern in dark gray (#292936), adding subtle texture to the void. The lighting appears to come from the upper right, creating highlights and dimensional depth on the glossy surface. The effect conveys a sense of technological sophistication, digital transformation, and dynamic energy.

Code

vue
<script setup lang="ts">
import {
  Shader,
  Ascii,
  DotGrid,
  Glass,
  SolidColor,
  Spiral
} from 'shaders/vue'
</script>

<template>
  <Shader
    :disable-telemetry="true"
  >
    <SolidColor color="#0e0f14" />
    <DotGrid color="#292936" :density="49" :dot-size="0.1" />
    <Glass :aberration="0.8" :cutout="true" :edge-softness="0.2" :fresnel="0" :fresnel-softness="0.23" :highlight="0" :highlight-softness="0.16" :light-angle="274" :refraction="2" :scale="1.45" :shape="{ type: 'roundedRectSDF', radius: 0.48, height: 0.25, rounding: 0.5, rotation: 32 }" shape-sdf-url="" shape-type="circleSDF">
      <SolidColor color="#0e0f14" />
      <Ascii characters="◘•" :gamma="0.55" :spacing="0.8">
        <Spiral :center="{ x: 0, y: 0.8 }" color-a="#0a131f" color-b="#ffe100" :softness="0.4" />
      </Ascii>
    </Glass>
  </Shader>
</template>