Flowing Dots 3

A vibrant gradient background transitioning diagonally from magenta/pink in the lower left corner to golden yellow/orange in the upper right corner. The gradient uses smooth color interpolation creating a warm, energetic aesthetic. Overlaid on this base gradient is a pixelated dot grid pattern that creates a halftone or mosaic effect, with the dot density and size varying across the canvas to create visual depth and dimensionality. The dots appear more prominent and larger in the center-right area, gradually fading toward the edges. The overall effect suggests a digital, modern interface with a subtle organic quality from the flowing gradient beneath the geometric dot structure. The color transition is smooth and continuous, with intermediate peachy-orange tones dominating the center area. The pixelated overlay adds a contemporary, tech-forward aesthetic while maintaining visual softness through the gradient foundation.

Code

vue

<script setup lang="ts">
import {
  Shader,
  ChromaFlow,
  CursorRipples,
  DotGrid,
  LinearGradient
} from 'shaders/vue'
</script>

<template>
  <Shader
    :disable-telemetry="true"
  >
    <DotGrid id="idmlsai28917usa8l1j" :density="40" :dot-size="{ type: 'map', source: 'idmlsaoh7xdy8aayjbd', channel: 'alpha', inputMax: 1, inputMin: 0, outputMax: 1, outputMin: 0 }" :twinkle="0.9" :visible="false" />
    <ChromaFlow id="idmlsaoh7xdy8aayjbd" :intensity="1.4" :radius="4.6" :visible="false" />
    <LinearGradient color-a="#ff5eea" color-b="#ffb214" color-space="oklch" :end="{ x: 1, y: 0 }" :start="{ x: 0, y: 1 }" />
    <LinearGradient color-a="#a3a1f5" color-b="#faf13e" color-space="oklch" :end="{ x: 1, y: 0 }" mask-source="idmlsai28917usa8l1j" :start="{ x: 0, y: 1 }" :visible="true" />
    <CursorRipples />
  </Shader>
</template>