Collapsing Grid 5

A gradient mesh composed of rounded square tiles arranged in a 16x10 grid pattern. The tiles transition smoothly from purple (#8145ff) on the left side to cyan and light-blue (#0273ef) on the right side, creating a horizontal color gradient. Each tile has subtle dark borders creating separation and depth. The top-left corner features the most saturated purple tones, while the bottom-right corner displays the most vibrant cyan-blue hues. The overall effect is a smooth, pixelated color transition with rounded corners on each tile element. The base layer appears to be a deep dark-blue (#160091) background. The pixelation creates a modern, digital aesthetic with a soft, glowing quality due to the rounded tile edges and the blend mode interactions between the swirl effect and the pixelate layer.

Code

vue

<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="151" :frequency="0.6" :position="{ x: 0.28, y: 0.84 }" :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="#8145ff" color-b="#0273ef" color-space="oklab" :detail="1.3" :speed="2" :visible="true" />
    </Pixelate>
  </Shader>
</template>