Shaders
header.lightDarkMode D
Gallery

A dark, atmospheric digital effect featuring a pixelated plasma animation against a near-black background. The composition shows purple and magenta pixels of varying sizes and intensities scattered across the frame, creating a diagonal gradient pattern that flows from the lower-left corner toward the upper-right. The pixelation effect creates a mosaic-like appearance with individual square blocks that vary in opacity and brightness. The plasma underneath generates organic, flowing patterns in bright purple (#8c00ff) and deep black, with a wavy, undulating quality that suggests movement and energy. The pixels appear to have soft, rounded edges with a slight glow effect. The overall mood is technological and ethereal, with a sense of depth created by the varying pixel sizes and opacity levels. The effect uses an inverted alpha channel mapping to control the gap spacing between pixels, creating a dynamic, breathing quality to the pixelation. The background is a very dark purple-black (#09060f), providing maximum contrast for the bright purple elements.

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="#8c00ff" :contrast="1.6" :density="3.3" :intensity="1.8" />
    </Pixelate>
    <SineWave id="idmmbhthud5inxgebqc" :amplitude="0.1" :angle="203" :position="{ x: 0.23, y: 0.6 }" :softness="0.8" :thickness="0.7" :visible="false" />
  </Shader>
</template>