Cloudflare 5

A radiant gradient shader effect transitioning from pale yellow (#ffbb6e tones) in the upper left corner to deep orange (#ff4000) dominating the center and right portions, with the bottom maintaining a vibrant orange hue. The effect features a multi-layered composition: a base solid color layer in orange-red (#ff4000) with enhanced saturation (1.13 intensity), overlaid with a glow effect (size 27.5, intensity 2.69) creating a luminous, warm aura. A progressive blur radiating from the center (angle 270°, intensity 5) with linear dodge blending creates a directional light effect. Embedded within are god rays (speed 1.82, ray color #ff4800) emanating from the center with low density (0.1) and minimal spottiness (0.14), producing subtle light streaks. A dot grid pattern (#faa657) with high density (160) and small dot size (0.22) adds fine texture throughout, with twinkle animation enhancing the luminous quality. A small circle element (#ffbb6e, radius 2) serves as a focal point. The overall atmosphere is warm, energetic, and celestial, resembling a sunrise or glowing light source with atmospheric depth created by the progressive blur and layered effects.

<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: 0, 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" :density="0.1" :intensity="1" ray-color="#ff4800" :speed="1.82" :spotty="0.14" />
    </Glow>
  </Shader>
</template>