Collapsing Grid 7

A gradient shader effect displaying a grid of rounded square pixels arranged in 16 columns and 10 rows. The image shows a smooth color transition from light periwinkle blue in the upper left corner to deep dark purple in the lower right corner. Each pixel has a slight rounded corner with small black gaps between them, creating a distinct grid pattern. The gradient flows diagonally from top-left to bottom-right, with the lightest values (#7974c2 range) at the top transitioning through medium purples in the middle rows to the darkest values (#2d174c) at the bottom-right. The overall effect suggests a swirl or color flow pattern mapped across the pixelated surface, with the roundness of each pixel varying based on an underlying alpha channel map. The atmosphere is cool and digital, with a subtle depth created by the color gradient progression.

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.4" :angle="133" :frequency="0.6" :position="{ x: 0.66, y: 0.78 }" :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="#2d174c" color-b="#7974c2" color-space="oklch" :detail="1.3" :speed="2" :visible="true" />
    </Pixelate>
  </Shader>
</template>