Dot Gradient

A smooth gradient background transitioning diagonally from vibrant magenta in the lower left corner through pink in the center to bright orange in the upper right corner. The gradient uses linear interpolation with mirror edge handling, creating a seamless color flow across the entire canvas. Overlaid on this gradient is a subtle dot grid pattern consisting of small, twinkling yellowish-green dots scattered across the surface at moderate density. The dots appear to shimmer with a linear dodge blend mode, creating a luminous, starry effect that adds depth and visual interest to the gradient. The overall composition has a warm, energetic atmosphere with a modern, digital aesthetic. The dots are small (approximately 4% of the viewport) and distributed evenly across the canvas, creating a celestial or cosmic feel against the warm gradient backdrop.

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

<template>
  <Shader
    :disable-telemetry="true"
  >
    <LinearGradient color-a="#ff7b00" color-b="#d400ff" edges="mirror" :end="{ x: 0.27, y: 0.86 }" :start="{ x: 0.7, y: 0.16 }" />
    <DotGrid blend-mode="linearDodge" color="#d8fa2d" :dot-size="0.04" :twinkle="1" />
  </Shader>
</template>