Cloudflare
CloudflareA radiant gradient shader effect dominated by warm orange tones transitioning from deep burnt orange at the edges to a bright golden-yellow luminous center. The composition features a strong radial glow emanating from the lower-center area, creating an intense light source effect. The glow has a soft, diffused quality with high intensity (2.69) and a threshold of 0.37, producing a halo-like appearance. A circular gradient element positioned at the bottom center (coordinates 0.5, 1.0) with a soft edge (softness 0.57) creates the primary light source in a peachy-tan color (#ffbb6e). The overall effect is enhanced by god rays rendered from the same bottom-center point with a warm orange-red color (#ff4800), creating subtle directional light streaks. A progressive blur effect with linear dodge blending adds atmospheric depth, while a dot grid pattern with high density (160) and twinkling creates subtle texture variation. The saturation is boosted (intensity 1.13) to enhance color vibrancy. The entire composition creates a warm, glowing sunset or sunrise-like atmosphere with strong luminosity concentrated in the lower portion of the frame.
Code
<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.5, y: 1 }" color="#ffbb6e" :radius="1.03" :softness="0.57" />
<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: 0.5, y: 1 }" :density="0.1" :intensity="1" ray-color="#ff4800" :speed="1.82" :spotty="0.14" />
</Glow>
</Shader>
</template>