Collapsing Grid 3

A gradient mesh of rounded square tiles arranged in a 18x10 grid pattern. The tiles transition smoothly from light purple (#e2a8ff) in the upper left to deep magenta/pink (#ce57bd) in the lower right, creating a diagonal color gradient. Each tile has slightly rounded corners with a subtle gap (0.03 units) between them, creating a clean, organized appearance. The roundness of the tiles varies based on an underlying swirl effect, with some tiles appearing more circular while others maintain sharper corners. The swirl effect blends two colors (magenta #ce57bd and blue-purple #b073ff) with a detail level of 1.3, creating subtle color variations within the pixelated structure. The overall effect is smooth and modern, with no harsh edges or distortion, maintaining a calm, gradient-focused aesthetic. The lighting appears even across the entire composition with no visible shadows or highlights, creating a flat, contemporary design feel.

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="209" :frequency="0.6" :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="#e2a8ff" />
    <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="#ce57bd" color-b="#b073ff" color-space="oklab" :detail="1.3" :speed="2" :visible="true" />
    </Pixelate>
  </Shader>
</template>