Collapsing Grid 4

A gradient shader effect displaying a 16x12 grid of rounded square tiles with smooth color transitions. The composition features a diagonal gradient flowing from tan/beige in the upper-left corner to vibrant magenta/purple in the lower-right corner. The tiles have a 0.03 unit gap between them with variable roundness that increases toward the right side of the composition. The underlying swirl effect creates a smooth color interpolation between tan (#d6ac82) and bright magenta (#b90cd5) using oklab color space, producing natural-looking intermediate hues including mauve, dusty rose, and orchid tones. A pale yellow background (#fff6a8) provides subtle contrast. The effect demonstrates a radial color mapping where the roundness of each tile increases based on an invisible alpha channel from a hidden group component, creating a subtle three-dimensional appearance. The overall mood is vibrant and modern with a smooth, organic color transition despite the geometric grid structure.

<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" :angle="84" :frequency="0.6" :position="{ x: 0.84, y: 0.52 }" :softness="0.8" :thickness="0.5" :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="#fff6a8" />
    <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="#d6ac82" color-b="#b90cd5" color-space="oklab" :detail="1.3" :speed="2" :visible="true" />
    </Pixelate>
  </Shader>
</template>