Dot Panels 2

A dark, atmospheric shader effect featuring a deep forest-green to near-black gradient background. The composition uses a radial gradient centered slightly right of center, transitioning from a very dark teal-green (#011c0d) at the edges to an even darker forest-green (#07120a) toward the center. Overlaid on this gradient is a subtle dot grid pattern with small bright lime-green dots (#7ff59b) scattered across the entire canvas at moderate density (60 dots), creating a twinkling starfield or digital rain effect. The dots have a size of 0.06 units and feature a twinkle animation that gives them a flickering, alive quality. A progressive blur effect is applied with an angle of 211 degrees, centered toward the right side of the composition, creating a directional motion blur that softens the right portion of the image with a falloff of 0.68 and intensity of 76. The perspective component applies a 3D camera effect with a wide field of view (96 degrees), pan, and tilt transformations that create subtle depth. A fine film grain texture with 0.02 strength is applied across the entire image, adding subtle noise and texture. The overall mood is dark, mysterious, and technological - reminiscent of a night sky, digital matrix, or deep space environment. The color palette is dominated by very dark greens and blacks with bright accent dots, creating high contrast in localized areas.

<script setup lang="ts">
import {
  Shader,
  DotGrid,
  FilmGrain,
  Grid,
  Perspective,
  ProgressiveBlur,
  RadialGradient
} from 'shaders/vue'
</script>

<template>
  <Shader
    :disable-telemetry="true"
  >
    <Perspective :center="{ x: 0.48, y: 1 }" edges="mirror" :fov="96" :offset="{ x: 0.58, y: 0.57 }" :pan="29.2" :tilt="15" :zoom="2.28">
      <RadialGradient :center="{ x: 0.55, y: 0.6 }" color-a="#011c0d" color-b="#07120a" color-space="oklab" :radius="0.7" />
      <Grid :cells="6" color="#041b33" :thickness="0" />
      <DotGrid color="#7ff59b" :density="60" :dot-size="0.06" :twinkle="1" />
    </Perspective>
    <ProgressiveBlur :angle="211" :center="{ x: 0.77, y: 0.58 }" :falloff="0.68" :intensity="76" />
    <FilmGrain :strength="0.02" :visible="true" />
  </Shader>
</template>