Blueprint 3

A sophisticated gradient-based shader effect featuring a radial gradient transitioning from bright cyan-blue (#0088ff) at the center to deep purple (#2f04e0) at the edges. The composition is dominated by a diagonal grid pattern with fine white lines at approximately 155 degrees, creating a sense of perspective and depth. The grid appears to stretch from the upper-left toward the lower-right, with the grid density increasing toward the right side of the composition. A subtle diffuse blur with intensity of 2 softens the overall effect, creating a smooth, ethereal quality. The grid lines are rendered with luminance masking, allowing them to interact with the underlying noise layer. A light film grain texture with 0.2 strength adds subtle noise throughout. The linear dodge blend mode on the stretch effect creates bright, luminous grid lines that appear to glow against the blue-purple gradient background. The overall atmosphere is modern, digital, and tech-forward, with a sense of motion and dimensional depth created by the stretched grid perspective.

<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.58, y: 0.72 }" color-a="#0088ff" color-b="#2f04e0" />
    <SimplexNoise id="idmjrn7fogx30o8e3em" :balance="-0.53" :contrast="3.7" :scale="1.1" :visible="false" />
    <Stretch :angle="155" blend-mode="linearDodge" :center="{ x: 0.85, y: 0.45 }" edges="mirror" :falloff="1">
      <Grid :cells="50" mask-source="idmjrn7fogx30o8e3em" mask-type="luminance" :thickness="0.2" />
    </Stretch>
    <DiffuseBlur :intensity="2" />
    <FilmGrain :strength="0.2" />
  </Shader>
</template>