Shaders
header.lightDarkMode D
Gallery

A retro digital matrix effect with a layered composition. The background features a dense grid of small colored dots in cyan, magenta, yellow, and green arranged in a regular pattern, creating a pixelated texture reminiscent of old CRT monitors. Overlaid on this is a swirling gradient effect that transitions between bright lime green (#25f55c) and golden yellow (#f0bc22), creating organic flowing patterns with soft blending. The middle section contains horizontal scan lines that add a CRT screen authenticity with reduced opacity. ASCII characters (@, %, #, *, +, =, -, :, .) are scattered throughout in a monospace font, creating a hacker/terminal aesthetic. A bright cyan and magenta cursor trail effect is visible in the center-right area, forming a glowing path with gradient coloration. The overall effect is enhanced by a hard light blend mode that creates contrast and luminosity variations. The image has a strong retro-futuristic, cyberpunk atmosphere with high contrast between the bright neon colors and the dark background. Scan line artifacts and pixel distortion reinforce the vintage computer monitor aesthetic.

Code

vue
<script setup lang="ts">
import {
  Shader,
  Ascii,
  CRTScreen,
  Checkerboard,
  CursorTrail,
  SineWave,
  Swirl
} from 'shaders/vue'
</script>

<template>
  <Shader
    :disable-telemetry="true"
  >
    <Swirl :coarse-x="50" :coarse-y="50" color-a="#25f55c" color-b="#f0bc22" :fine-x="50" :fine-y="50" :medium-x="50" :medium-y="50" />
    <CRTScreen blend-mode="hardLight" :brightness="1.1" :color-shift="3.6" :contrast="1.2">
      <Checkerboard />
      <SineWave :amplitude="0.01" :frequency="0.9" :softness="0.27" :thickness="0.78" />
      <CursorTrail :radius="1" />
      <Ascii />
    </CRTScreen>
  </Shader>
</template>