Popping Bubbles 4

A sophisticated dot matrix visualization displaying a flowing gradient effect mapped through a grid of circular dots. The composition features a dense array of small dots arranged in a regular grid pattern, with dot sizes varying based on underlying luminance data. The color palette transitions smoothly across the canvas, blending soft blue tones (#b8d8e8) in the upper left, transitioning through lavender and purple hues (#c9b8e8) in the upper right, mint green tones (#a8e0d0) in the center-right, and dusty rose/mauve (#e8c4d8) in the upper-middle area. The dots themselves appear in white against a light background, with their opacity and size creating a subtle depth effect that reveals the flowing gradient beneath. The overall effect creates a serene, organic appearance despite the geometric grid structure, with the gradient flowing smoothly across the composition at a moderate animation speed. The color space uses oklab for smooth perceptual transitions, and a subtle distortion effect (0.1 intensity) adds gentle waviness to the gradient flow. The visualization has a calm, meditative quality with cool to warm color transitions creating visual movement across the horizontal and vertical axes.

<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.65" :seed="43" :speed="0.07" :turbulence="23.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="#b8d8e8" color-b="#c9b8e8" color-c="#a8e0d0" color-d="#e8c4d8" color-space="oklab" :distortion="0.1" mask-source="idmpa1xx4hdhp247w9r" :speed="0.6" />
  </Shader>
</template>