Arrow Grid 2

A dark, tech-noir shader effect displaying a diagonal grid pattern of small triangular ASCII characters (⦉⦊) arranged in precise rows across a black background. The characters feature chromatic aberration with distinct color fringing - predominantly cyan, magenta, yellow, and white edges creating a retro CRT monitor aesthetic. The grid appears to be distorted by a bulge effect with a 35-degree rotation, creating a subtle warping that makes the triangles appear to curve slightly. Overlaid on this are animated ripple patterns with white and black wave interference creating concentric circular distortions emanating from the center. A blob-like organic shape with green (#5cf525) to blue (#1e6ce9) gradient provides dynamic movement beneath the grid, with yellow highlight accents (#fff71a) suggesting 3D depth. The entire composition is processed through a CRT screen filter with visible scanlines (frequency 210, intensity 0.91) and pixel grid artifacts (60px size), creating authentic vintage computer monitor scanline distortion. A tilt-shift blur effect with 90-degree angle orientation adds depth-of-field, keeping the center sharp while edges fade. The overall mood is cyberpunk, digital, and nostalgic with high contrast and vibrant neon-like color separation typical of old arcade or early computer graphics.

Code

vue

<script setup lang="ts">
import {
  Shader,
  Ascii,
  Blob,
  Bulge,
  CRTScreen,
  Checkerboard,
  ChromaFlow,
  CursorTrail,
  Group,
  Ripples,
  SolidColor,
  TiltShift
} from 'shaders/vue'
</script>

<template>
  <Shader
    :disable-telemetry="true"
  >
    <SolidColor color="#17171a" />
    <Group>
      <Checkerboard :cells="22" color-b="#383e42" />
      <Ripples blend-mode="overlay" :frequency="23.8" :opacity="0.32" :speed="1.9" :thickness="0.3" />
      <Blob id="idmh47oyx205ue8s7u1" color-a="#5cf525" color-b="#1e6ce9" :deformation="0.37" highlight-color="#fff71a" :highlight-intensity="0.45" :highlight-x="0.06" :highlight-y="-0.1" :softness="0.63" :speed="2" :visible="true" />
      <Ripples blend-mode="overlay" :frequency="6.2" mask-source="idmh47oyx205ue8s7u1" :opacity="0.4" :softness="0.57" :speed="-0.5" :thickness="0.39" />
      <ChromaFlow base-color="#eef21d" down-color="#f0e1e1" :intensity="1.5" left-color="#e1e1f0" mask-source="idmh47oyx205ue8s7u1" :momentum="10" right-color="#ededd5" up-color="#c1e0c1" />
      <CursorTrail />
      <Ascii :cell-size="60" characters="⦉⦊" />
      <Bulge edges="mirror" :falloff="1" :radius="2.6" :strength="-0.29" :transform="{ edges: 'mirror', rotation: 35 }" />
    </Group>
    <TiltShift :angle="90" :falloff="0.26" :intensity="10" :width="0.29" />
    <CRTScreen :brightness="2" :color-shift="0.8" :contrast="1.01" :pixel-size="60" :scanline-frequency="210" :scanline-intensity="0.91" />
  </Shader>
</template>