Shaders
header.lightDarkMode D
Gallery

A pixelated shader effect displaying a dynamic gradient-based noise pattern. The left two-thirds of the image features a chaotic mosaic of small square pixels in magenta, cyan, light-blue, light-green, and green colors, creating an organic, turbulent appearance. The pixelation scale is set to 41 pixels, producing distinct blocky artifacts. The right third transitions smoothly into a solid bright green area with fine dotted texture. The color distribution appears to be controlled by a simplex noise generator with a scale of 4.3, creating natural-looking organic variation. A linear gradient with dynamic angle mapping (controlled by noise luminance) blends magenta (#f131f6) and dark-green (#517c06) colors across the composition. A dither effect with bayer4 pattern and screen blend mode adds subtle texture and visual noise throughout, using bright green (#19d36b) and dark purple (#070226) in a 3-pixel pattern. The overall effect creates a sense of digital turbulence transitioning to calm, with a vibrant, neon-like quality enhanced by the screen blend mode creating a glowing appearance where colors overlap.

Code

vue
<script setup lang="ts">
import {
  Shader,
  Circle,
  Dither,
  LinearGradient,
  Pixelate,
  SimplexNoise
} from 'shaders/vue'
</script>

<template>
  <Shader
    :disable-telemetry="true"
  >
    <Circle id="idmm4025i3rr2toqt6j" :center="{ x: 0, y: 0 }" :radius="2.5" :visible="false" />
    <SimplexNoise id="idmm5kajmj4uwhjdgmm" :scale="4.3" :speed="0.1" :visible="false" />
    <Pixelate :scale="41">
      <LinearGradient :angle="{ type: 'map', curve: 0, source: 'idmm5kajmj4uwhjdgmm', channel: 'luminance', inputMax: 1, inputMin: 0, outputMax: 360, outputMin: 0 }" color-a="#f131f6" color-b="#517c06" color-space="hsl" edges="mirror" :end="{ x: 0.89, y: 0.39 }" mask-source="idmm4025i3rr2toqt6j" :start="{ x: 0.67, y: 0.48 }" :visible="true" />
    </Pixelate>
    <Dither blend-mode="screen" color-a="#19d36b" color-b="#070226" :pixel-size="3" />
  </Shader>
</template>