Arrow Skies 3

A vibrant gradient shader effect transitioning from yellow (#fff700) in the bottom-left corner through orange and pink tones toward blue (#0000ff) in the top-right corner, creating a smooth diagonal color flow across the entire canvas. The gradient uses OKLCH color space for perceptually uniform transitions. Overlaid on this base gradient is a dense repeating pattern of small arrow characters (↖↗) arranged in a regular grid with 30-pixel cell spacing, creating a directional vector field effect. The arrows themselves are colored with the same yellow-to-blue gradient, creating visual continuity. A subtle godrays effect with light-blue rays (#87b4ff) emanates from the bottom-left corner using linear-dodge blending at 20% opacity, adding atmospheric depth and luminosity. The rays have a spotty quality (value: 1) creating an organic, scattered light effect. A wave distortion effect with sine wave pattern (frequency 1.4, angle 151°, speed 3.9) subtly undulates across the arrow pattern, creating a rippling, fluid motion sensation. A soft yellow circle (#ffdd00) with high softness (value: 1) is positioned near the bottom-left area, serving as a focal point and light source that anchors the godrays effect. The overall composition creates a sense of dynamic energy and directional flow, with warm colors dominating the lower-left transitioning to cool colors in the upper-right, producing a vibrant, modern, tech-forward aesthetic.

<script setup lang="ts">
import {
  Shader,
  Ascii,
  Circle,
  Godrays,
  LinearGradient,
  WaveDistortion
} from 'shaders/vue'
</script>

<template>
  <Shader
    :disable-telemetry="true"
  >
    <LinearGradient color-a="#fff700" color-space="oklch" :end="{ x: 0.53, y: 0.32 }" :start="{ x: 0, y: 1 }" />
    <Godrays blend-mode="linearDodge" :center="{ x: 0, y: 1 }" :density="0.1" :intensity="0.7" :opacity="0.2" ray-color="#87b4ff" :speed="2" :visible="true" />
    <Ascii characters="↖↖↗↗">
      <LinearGradient color-a="#fff700" color-space="oklch" :end="{ x: 0.5, y: 0 }" :start="{ x: 0.5, y: 1 }" />
      <WaveDistortion :angle="151" :frequency="1.4" :speed="3.9" :strength="0.5" />
      <Circle blend-mode="normal-oklch" :center="{ x: 0.53, y: 1 }" color="#ffdd00" :radius="1.87" :softness="1" />
    </Ascii>
  </Shader>
</template>