Popping Bubbles

A gradient dot matrix visualization displaying a smooth color transition across the canvas. The image features a regular grid of circular dots that vary in size and color intensity based on an underlying flowing gradient. The left side of the composition shows cyan and turquoise tones with medium-sized dots, transitioning through the center with blue and purple hues, and culminating on the right side with magenta and pink tones. The dots are smallest in the upper left corner and gradually increase in size toward the center and right portions of the image. The top-right corner displays the largest, most saturated dots in bright magenta and pink. The overall effect creates a smooth, wave-like color flow from cool cyan-blue tones on the left to warm magenta-pink tones on the right, with the dot size variation creating a sense of depth and movement. The background remains white, allowing the colored dots to stand out clearly. The grid maintains consistent spacing throughout, with approximately 17 dots per row, creating a uniform structure that contrasts with the organic color gradient flowing across it.

<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="1" :seed="33" :speed="0.09" :turbulence="5.5" :visible="false" />
    <DotGrid id="idmpa1xx4hdhp247w9r" :density="17" :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="#ff38b6" color-b="#685ef2" color-c="#3c2eff" color-d="#05ffe1" :distortion="0.1" mask-source="idmpa1xx4hdhp247w9r" :speed="4" />
  </Shader>
</template>