Shaders
header.lightDarkMode D
Gallery

Digital Activation 3

Digital Activation

A sophisticated digital shader effect featuring a dark, near-black background (#0e0f14) with a subtle dot grid pattern in dark purple-gray (#292936). The dominant visual element is a large ring-shaped glass structure with chromatic aberration and refraction effects, creating a glowing neon aesthetic. A bright lime-green spiral (#55ff0a) emanates from the lower-left portion of the ring, flowing upward and curving around the glass shape with a soft, feathered edge. The spiral creates a luminous trail effect against the dark background. ASCII characters (◘•) are distributed across the composition in a grid pattern, with the characters becoming more densely packed and brighter green where the spiral passes through them, creating a sense of data flow or digital energy. The glass component has a subtle white highlight and fresnel effect along its edges, with a thickness of 0.2 and an aberration value of 0.8 creating color separation. The overall composition has a cyberpunk aesthetic with strong contrast between the deep blacks and the vibrant lime-green accents. The lighting angle is set to 274 degrees, creating directional illumination across the glass surface. The effect conveys motion and energy flowing through a digital matrix or network structure.

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" :center="{ x: 0, y: 0 }" :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: 'ringSDF', radius: 0.8, thickness: 0.185 }">
      <SolidColor color="#0e0f14" />
      <Ascii characters="◘•" :gamma="0.8" :spacing="0.8">
        <Spiral :center="{ x: 0.07, y: 0.66 }" color-a="#0a131f" color-b="#55ff0a" :softness="0.4" />
      </Ascii>
    </Glass>
  </Shader>
</template>