Blueprint

A smooth gradient background transitioning from bright cyan-blue (#0088ff) in the lower-left quadrant to deep purple-blue (#2f04e0) in the upper-right corner, creating a radial gradient effect centered slightly left of center at coordinates (0.355, 0.376). The gradient has soft, feathered edges that fade smoothly across the entire canvas. Overlaid on this base are subtle diagonal line patterns created by a stretched grid effect at a 70-degree angle, positioned in the upper-left area. These grid lines are very faint and semi-transparent, rendered in white with a luminance mask applied, creating a geometric texture that appears to stretch diagonally across the composition. The entire effect is softened by a diffuse blur with intensity of 2, giving the image a slightly hazy, atmospheric quality. A fine film grain texture is applied at 0.2 strength, adding subtle noise throughout the image for a refined, polished appearance. The overall mood is cool, professional, and modern with a sense of depth and dimensionality created by the layered gradient and subtle texture elements.

<script setup lang="ts">
import {
  Shader,
  DiffuseBlur,
  FilmGrain,
  Grid,
  RadialGradient,
  SimplexNoise,
  Stretch
} from 'shaders/vue'
</script>

<template>
  <Shader
    :disable-telemetry="true"
  >
    <RadialGradient :center="{ x: 0.36, y: 0.38 }" color-a="#0088ff" color-b="#2f04e0" />
    <SimplexNoise id="idmjrn7fogx30o8e3em" :balance="-0.53" :contrast="3.7" :scale="1.6" :visible="false" />
    <Stretch :angle="70" blend-mode="linearDodge" :center="{ x: 0.21, y: 0 }" edges="mirror" :falloff="1">
      <Grid :cells="18" mask-source="idmjrn7fogx30o8e3em" mask-type="luminance" :thickness="0.2" />
    </Stretch>
    <DiffuseBlur :intensity="2" />
    <FilmGrain :strength="0.2" />
  </Shader>
</template>