Shaders
header.lightDarkMode D
Gallery

Digital Activation 7

Digital Activation

A dark, cyberpunk-themed shader effect featuring a deep black background (#0e0f14) with a subtle dot grid pattern in dark gray (#292936) creating a subtle texture across the entire canvas. The dominant visual element is a magenta/pink glowing rectangular shape with rounded corners positioned in the upper portion of the image. This shape appears to be constructed from a grid of small square blocks arranged in a pixelated pattern, creating a retro digital aesthetic. The magenta color (#ff29ff) is vibrant and luminous, contrasting sharply against the dark background. The shape has a glass-like quality with subtle refraction and chromatic aberration effects, giving it depth and a slightly warped appearance. Below the main shape, vertical bar-chart-like elements in magenta extend downward, resembling an audio equalizer or data visualization. The overall composition suggests a futuristic, tech-forward aesthetic with ASCII art influences. The lighting appears to come from the upper left (274 degrees), creating subtle highlights and depth perception. The entire effect has a neon-like quality with the magenta glowing against the darkness, creating a moody, atmospheric cyberpunk environment.

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: 'roundedRectSDF', radius: 1, height: 0.4, rounding: 0.05, rotation: 0 }" 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="#ff29ff" :softness="0.4" />
      </Ascii>
    </Glass>
  </Shader>
</template>