Shaders
header.lightDarkMode D
Gallery

A pixelated digital effect displaying an animated plasma pattern with a gradient fade. The left side features dense, bright lime-green pixels (#36b500) arranged in a pixelated grid pattern with a scale of 74 pixels. The pixels gradually transition from solid, tightly-packed squares on the left to increasingly sparse, smaller dots moving toward the right side of the image. The effect creates a sense of dispersal or dissolution. The background is a very dark near-black color (#09060f). The plasma animation underneath generates organic, flowing patterns with high contrast (1.6x) and intensity (1.8x), creating a dynamic, turbulent appearance. The pixelation gap is modulated by an invisible sine wave mapped to the alphaInverted channel, creating the progressive fade effect from dense to sparse pixels. The overall mood is technological, digital, and somewhat ethereal, with a strong sense of motion and energy flowing from left to right. The roundness value of 0.2 gives the pixels slightly softened edges rather than hard squares.

Code

vue
<script setup lang="ts">
import {
  Shader,
  Pixelate,
  Plasma,
  SineWave,
  SolidColor
} from 'shaders/vue'
</script>

<template>
  <Shader
    :disable-telemetry="true"
  >
    <SolidColor color="#09060f" />
    <Pixelate :gap="{ type: 'map', curve: 0.35, source: 'idmmbhthud5inxgebqc', channel: 'alphaInverted', inputMax: 1, inputMin: 0, outputMax: 1, outputMin: 0.16 }" :roundness="0.2" :scale="74">
      <Plasma :balance="57" color-a="#36b500" :contrast="1.6" :density="3.3" :intensity="1.8" />
    </Pixelate>
    <SineWave id="idmmbhthud5inxgebqc" :amplitude="0.1" :angle="122" :position="{ x: 0.33, y: 0.63 }" :softness="1" :thickness="0.9" :visible="false" />
  </Shader>
</template>