LED Flow 3

A dark, atmospheric shader effect dominated by a deep navy-black background (#0c061a). The composition features a subtle diagonal band of golden-yellow to lime-green gradient (#ffd000 to #6aff00) that sweeps across the lower-left to upper-right portion of the canvas. This gradient band is masked by an intricate dot grid pattern, creating a stippled, pixelated appearance where the gradient only appears through small white dots arranged in a regular grid formation. The dots have a density of 60 with a size of 0.12, giving the effect a granular, digital quality. A twirl distortion effect with negative intensity (-1.2) is applied, creating a subtle vortex-like warping centered slightly right of center (0.654, 0.537), which adds organic movement and curvature to the otherwise geometric dot pattern. The overall mood is dark, mysterious, and technological, with a subtle film grain overlay (strength 0.03) adding texture and analog warmth to the digital composition. The gradient appears to flow diagonally with luminance-based masking, creating depth and dimensionality against the nearly black background.

<script setup lang="ts">
import {
  Shader,
  DotGrid,
  FilmGrain,
  Group,
  LinearGradient,
  SolidColor,
  Swirl,
  Twirl
} from 'shaders/vue'
</script>

<template>
  <Shader
    :disable-telemetry="true"
  >
    <Group id="idmjrnv6c0pom01tg0f" :visible="false">
      <Swirl :blend="100" color-a="#ffffff" color-b="#000000" :detail="1.3" mask-source="idmjrnuq8x4whbsr7v9" />
      <DotGrid id="idmjrnuq8x4whbsr7v9" :density="60" :dot-size="0.12" :visible="false" />
      <Twirl :center="{ x: 0.65, y: 0.54 }" edges="wrap" :intensity="-1.2" :visible="true" />
    </Group>
    <SolidColor color="#0c061a" />
    <LinearGradient color-a="#ffd000" color-b="#6aff00" color-space="oklch" edges="mirror" :end="{ x: 0.26, y: 0.42 }" mask-source="idmjrnv6c0pom01tg0f" mask-type="luminance" :start="{ x: 0.75, y: 0.7 }" />
    <FilmGrain :strength="0.03" />
  </Shader>
</template>