Digital Activation 10

A sophisticated digital shader effect featuring a dark, tech-forward aesthetic. The composition centers on a hexagonal glass-like structure with chromatic aberration and refraction properties, creating a subtle iridescent blue-purple fringe around its edges. The background is a deep charcoal-black (#0e0f14) with a subtle dot grid pattern in dark gray (#292936) that provides texture and depth. Within the hexagonal cutout, ASCII characters (◘ and •) are rendered in a monospaced font, creating a pixelated, matrix-like appearance. A spiral gradient flows through the ASCII layer, transitioning from deep navy-blue (#0a131f) at the center to white at the edges, with soft falloff creating a glowing halo effect. The glass component exhibits strong refraction (value: 2) and aberration (value: 0.8), causing light distortion and color separation typical of optical glass. The overall composition has a 3D isometric perspective with the hexagonal shape appearing to protrude from the screen. The lighting angle is set to 274 degrees, creating dimensional highlights and shadows that enhance the glass-like quality. The effect combines cyberpunk aesthetics with scientific visualization, evoking themes of data, technology, and digital transformation.

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.55" :shape="{ type: 'polygonSDF', radius: 0.41, sides: 6, rounding: 0, rotation: 0 }" shape-sdf-url="" shape-type="circleSDF">
      <SolidColor color="#0e0f14" />
      <Ascii characters="◘•" :gamma="2.95" :spacing="0.8">
        <Spiral color-a="#0a131f" :softness="0.4" />
      </Ascii>
    </Glass>
  </Shader>
</template>