Popping Bubbles 3

A radial gradient dot matrix shader effect displaying a sophisticated color field visualization. The composition features a dense grid of circular dots that vary in size and opacity based on underlying luminance mapping. The center of the image contains a bright white area that gradually transitions outward. Four distinct color regions emanate from the center in a flowing pattern: vibrant purple (#b938ff) in the upper-center area, cyan/turquoise (#17e6d5) on the right side, light blue (#4dc1ff) distributed across the upper-right and lower portions, and bright lime-green (#aeff35) concentrated in the bottom-right corner. The dots themselves range from fully opaque and saturated in the colored regions to nearly transparent and pale in the white center and outer edges. The effect creates a smooth, organic color transition despite the discrete dot-based rendering, achieved through the FlowingGradient component with subtle distortion (0.1). The dot density remains constant at 35 dots per unit area, but their individual sizes vary from 0.35 to 0.9 relative units based on the underlying marble texture luminance mapping. The overall mood is modern, scientific, and visually harmonious, with a sense of flowing energy radiating from the center outward. The color space uses oklab for perceptually uniform transitions between hues.

<script setup lang="ts">
import {
  Shader,
  DotGrid,
  FlowingGradient,
  Marble,
  SolidColor
} from 'shaders/vue'
</script>

<template>
  <Shader
    :disable-telemetry="true"
  >
    <Marble id="idmpa1zdwjasui1k6tk" color-b="#000000" :scale="0.7" :turbulence="4.5" :visible="false" />
    <DotGrid id="idmpa1xx4hdhp247w9r" :density="35" :dot-size="{ type: 'map', source: 'idmpa1zdwjasui1k6tk', channel: 'luminance', inputMax: 1, inputMin: 0, outputMax: 0.9, outputMin: 0.35 }" :visible="false" />
    <SolidColor color="#ffffff" />
    <FlowingGradient color-a="#b938ff" color-b="#17e6d5" color-c="#4dc1ff" color-d="#aeff35" color-space="oklab" :distortion="0.1" mask-source="idmpa1xx4hdhp247w9r" :speed="4" />
  </Shader>
</template>