Collapsing Grid 2

A gradient-based shader effect displaying a smooth color transition across a pixelated grid layout. The image shows 16 columns and 10 rows of rounded square tiles with dark navy blue (#160091) as the base background. The primary visual effect is a diagonal gradient flowing from the top-left to bottom-right, transitioning from bright lime green (#0fff5b) in the upper-left quadrant through cyan and teal tones in the middle sections, to deep blue (#0d47ba) in the lower-right quadrant. Each tile has subtle rounded corners with a gap of approximately 3% between them, creating a clean, modular appearance. The gradient appears to be generated by a Swirl component with a blend value of 50, creating smooth color interpolation across the pixelated surface. The overall effect suggests a heat map or data visualization with organic color flow, enhanced by the pixelation effect that maintains crisp tile boundaries while allowing the underlying gradient to create a sense of depth and directional movement. The lighting is even with no apparent shadows or highlights, maintaining a flat, digital aesthetic.

<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.55, y: 0.67 }" :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="#160091" />
    <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="#0d47ba" color-b="#0fff5b" color-space="oklab" :detail="1.3" :speed="2" :visible="true" />
    </Pixelate>
  </Shader>
</template>