Popping Bubbles 2

A halftone dot matrix visualization displaying a smooth color gradient transition from yellow-green on the left to deep red-orange on the right. The image uses variable-sized circular dots arranged in a regular grid pattern, where dot sizes are modulated by an underlying luminance map to create tonal depth and visual interest. The left third features predominantly yellow and light-green dots with larger diameters, gradually transitioning through orange and coral tones in the middle section, culminating in dense red and dark-orange dots on the right side. The smallest dots appear as sparse, barely visible points in the lightest areas, while the densest, largest dots concentrate in the darker regions, creating a sophisticated halftone printing effect. The overall composition has a smooth, flowing quality with no harsh edges, suggesting the dots are being controlled by a flowing gradient shader with subtle distortion applied. The background remains white, allowing the colored dots to stand out with high contrast. The effect creates a sense of heat or intensity increasing from left to right, with a technical, digital aesthetic reminiscent of color separation printing or thermal imaging visualization.

<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.6" :seed="50" :speed="0.09" :turbulence="25" :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="#f5ff38" color-b="#ffc100" color-c="#ff564d" color-d="#ff9735" color-space="oklab" :distortion="0.1" mask-source="idmpa1xx4hdhp247w9r" :speed="4" />
  </Shader>
</template>