Collapsing Grid 9

A gradient-based shader effect displaying a smooth tonal transition from black at the bottom to white at the top, rendered through a pixelated circular dot pattern. The composition features approximately 16x8 grid of rounded circles with varying opacity levels, creating a halftone-like appearance. The circles transition from solid black on the left and bottom edges, through medium gray tones in the middle sections, to pure white in the upper-right quadrant. The pixelation scale of 18 with 0.03 gap spacing creates distinct circular cells with rounded corners (roundness mapped from 0.13 to 1.0). The overall effect produces a smooth luminosity gradient despite the discrete pixel structure, with a dark background (#121212) providing contrast. The swirl component beneath adds subtle color blending between white and black in oklab color space, creating smooth tonal transitions. The effect has a technical, data-visualization quality with precise geometric spacing and mathematical gradient progression.

<script setup lang="ts">
import {
  Shader,
  ChromaFlow,
  Group,
  Pixelate,
  SineWave,
  SolidColor,
  Swirl
} from 'shaders/vue'
</script>

<template>
  <Shader
    :disable-telemetry="true"
  >
    <Group id="idmpijta5dnhqxghigt" :visible="false">
      <SineWave :amplitude="0.2" :frequency="0.6" :position="{ x: 0.49, y: 1 }" :softness="0.8" :thickness="1" :visible="true" />
      <ChromaFlow base-color="#ffffff" down-color="#ffffff" :intensity="1.5" left-color="#ffffff" :momentum="15" :opacity="0.4" :radius="4.3" right-color="#ffffff" up-color="#ffffff" :visible="true" />
    </Group>
    <SolidColor color="#121212" />
    <Pixelate :gap="0.03" :roundness="{ type: 'map', source: 'idmpijta5dnhqxghigt', channel: 'alpha', inputMax: 1, inputMin: 0, outputMax: 1, outputMin: 0.13 }" :scale="18">
      <Swirl color-a="#ffffff" color-b="#000000" color-space="oklab" :detail="1.5" :speed="0.9" :visible="true" />
    </Pixelate>
  </Shader>
</template>