Cloudflare 4

A radiant gradient shader effect transitioning from deep orange (#ff4000) on the left side to pale yellow on the right side. The composition features a soft, luminous glow with high intensity (2.69) creating a warm, diffused light effect. A circular gradient element positioned at coordinates (1, 0) with color #ffbb6e adds a secondary light source in the upper right area. The effect incorporates god rays emanating from the top-right corner with a ray color of #ff4800, creating dramatic light streaks with low density (0.1) and minimal spottiness (0.14). A progressive blur with linear dodge blending mode creates a directional fade from top to bottom (angle 270°), enhanced by a dot grid pattern in color #faa657 with high density (160) and subtle twinkling. The overall atmosphere is warm, energetic, and celestial, resembling a sunset or sunrise with atmospheric light diffusion. The saturation is enhanced (1.13 intensity), making colors vibrant and punchy. The blend modes use normal-oklch and linear dodge to create additive light effects that enhance the glowing, luminous quality.

<script setup lang="ts">
import {
  Shader,
  Circle,
  DotGrid,
  Glow,
  Godrays,
  ProgressiveBlur,
  Saturation,
  SolidColor
} from 'shaders/vue'
</script>

<template>
  <Shader
    :disable-telemetry="true"
  >
    <Glow :intensity="2.69" :size="27.5" :threshold="0.37">
      <Saturation :intensity="1.13">
        <SolidColor color="#ff4000" />
      </Saturation>
      <Circle blend-mode="normal-oklch" :center="{ x: 1, y: 0 }" color="#ffbb6e" :radius="2" :softness="1" />
      <ProgressiveBlur :angle="270" blend-mode="linearDodge" :center="{ x: 0.5, y: 0.5 }" :intensity="5">
        <DotGrid color="#faa657" :density="160" :dot-size="0.22" :twinkle="1" />
      </ProgressiveBlur>
      <Godrays blend-mode="linearDodge" :center="{ x: 1, y: 0 }" :density="0.1" :intensity="1" ray-color="#ff4800" :speed="1.82" :spotty="0.14" />
    </Glow>
  </Shader>
</template>