Collapsing Grid

A gradient-based shader effect displaying a smooth color transition across a pixelated grid structure. The image shows a diagonal gradient flowing from bright yellow (#ffe424) in the upper-left and lower-right corners to vibrant magenta (#ff47ff) in the center-right and lower-left areas. The pixelation effect creates rounded square cells with varying sizes, with a gap of 0.03 between them. The roundness of the pixels is dynamically mapped to an alpha channel, creating organic variation in cell corner radius from sharp (0.13) to fully rounded (1.0). A swirl pattern with dual-color interpolation (magenta to yellow-green) is blended at 50% opacity, creating a subtle turbulent distortion across the grid. The overall effect has a smooth, flowing quality despite the discrete pixelated structure, with the color space using oklab for perceptually uniform transitions. The atmosphere is vibrant and energetic, with warm yellows contrasting against cool magentas, creating visual depth and movement across the composition.

<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.4" :angle="133" :frequency="0.6" :position="{ x: 0.07, y: 0.08 }" :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="#ffe424" />
    <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="#ff47ff" color-b="#f3fc4d" color-space="oklab" :detail="1.3" :speed="2" :visible="true" />
    </Pixelate>
  </Shader>
</template>