Arrow Grid

A mesmerizing digital shader effect featuring a spherical bulge distortion at the center of the composition. The image displays a dense grid of small angular bracket characters (⦉⦊) arranged in a repeating pattern across the entire canvas. The characters transition through a vibrant color spectrum: starting with cyan and light-blue tones on the left edges, shifting through white in the upper portions, transitioning to warm orange and red hues in the upper-center area, then flowing into yellow-green tones in the middle sections, and finally transitioning to magenta and pink hues in the lower portions. The spherical bulge effect creates a pronounced 3D convex distortion that warps the character grid outward from the center point (0.5, 0.5), with the distortion most pronounced at the center and gradually diminishing toward the edges. A subtle CRT screen effect overlays the entire composition, adding scanlines and pixel grid artifacts that enhance the retro digital aesthetic. The background is a very dark near-black color (#17171a). A tilt-shift blur effect is applied vertically, keeping the center sharp while progressively blurring the top and bottom edges. The overall mood is cyberpunk and digital, with a sense of depth and movement created by the bulge distortion and chromatic color flow. The characters appear to ripple and flow organically, suggesting liquid or wave-like motion beneath the surface.

<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 color-b="#383e42" />
      <Ripples blend-mode="overlay" :frequency="17.3" :opacity="0.32" :speed="1.9" :thickness="0.3" />
      <Blob id="idmh47oyx205ue8s7u1" :deformation="0.15" 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 characters="⦉⦊" />
      <Bulge edges="mirror" :falloff="0.21" :radius="1.36" :strength="0.5" />
    </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>