Collapsing Grid 8

A pixelated gradient shader effect displaying a smooth color transition across a 16x10 grid of rounded square cells with subtle gaps between them. The composition creates a diagonal gradient flowing from deep blue and purple tones in the upper-left corner, transitioning through magenta and pink in the center, and fading to cream and off-white in the lower-right corner. The pixelation effect uses rounded corners with variable roundness mapped to an invisible sine wave and chroma flow layer, creating organic softness despite the grid structure. The dark background (#1b1029) provides strong contrast, making the gradient cells appear to float. The swirl shader underneath generates subtle color interpolation between white (#ffffff) and deep blue (#271ec7) using OKLCH color space, creating smooth hue transitions. The overall effect combines geometric precision with fluid color blending, producing a modern, gradient-based aesthetic with a calm, meditative atmosphere. The spacing and roundness of cells increase subtly from left to right, enhancing the sense of depth and movement.

<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="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="#1b1029" />
    <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="#271ec7" color-space="oklch" :detail="1.3" :speed="2" :visible="true" />
    </Pixelate>
  </Shader>
</template>