Shaders
header.lightDarkMode D
Gallery

Digital Activation 6

Digital Activation

A dark, tech-noir digital interface displaying a grid-based data visualization with a deep navy-black background (#0e0f14). The composition features two symmetrical rectangular panels positioned left and right, filled with a dense matrix of small blue square glyphs arranged in a grid pattern. The squares transition from bright cyan-blue (#0ab1ff) in the center of each panel to darker, dimmer blue tones toward the edges, creating a gradient falloff effect. A subtle dot grid pattern (#292936) underlays the entire composition, providing texture and depth. The panels appear to have a glass-like refractive quality with slight chromatic aberration effects, giving them a translucent, luminous appearance. A spiral gradient effect emanates from the center-right area, blending from dark navy (#0a131f) to bright cyan (#0ab1ff), adding dynamic energy to the otherwise static grid. The overall aesthetic is cyberpunk-inspired with a strong emphasis on data visualization, featuring sharp geometric precision and a cool, electronic color palette. The image conveys a sense of digital information flow and technological sophistication.

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: 1, y: 1 }" :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.98, y: 0.43 }" color-a="#0a131f" color-b="#0ab1ff" :softness="0.4" />
      </Ascii>
    </Glass>
  </Shader>
</template>