Shaders
header.lightDarkMode D
Gallery

A radial gradient shader effect transitioning from a warm yellow-orange core in the lower left corner to a vibrant orange-red throughout the composition. The effect features a glowing aura with high intensity (2.69) and a glow size of 27.5 pixels, creating a soft luminous halo around the central light source. A circular gradient element centered at coordinates (0, 1) with radius 2 and color #ffbb6e adds a peachy-orange focal point. The composition includes god rays emanating from the lower left (0, 1) with a ray color of #ff4800, creating dramatic light streaks with low spotty value (0.14) for smooth ray distribution. A progressive blur effect with linear dodge blending mode and 270-degree angle creates a directional fade from the center outward. A dot grid pattern with color #faa657 and high density (160) adds fine texture detail with subtle twinkling. The saturation is enhanced at 1.13 intensity, making colors more vivid. The overall atmosphere is warm, energetic, and luminous, resembling a sunset or sunrise with intense light diffusion.

Code

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