Shaders
header.lightDarkMode D
Gallery

A radial gradient shader effect transitioning from deep orange-red (#ff4000) on the left and upper portions to warm golden-yellow tones on the right and lower portions. The effect features a luminous glow with high intensity (2.69) creating a soft halo around the composition. A circular gradient element centered at coordinates (1, 1) with warm tan color (#ffbb6e) provides a focal point. The shader incorporates god rays emanating from the bottom-right corner with orange-red coloring (#ff4800), creating dramatic light streaks with low spotty value (0.14) for smooth ray distribution. A progressive blur effect angled at 270 degrees with linear dodge blending creates an upward light diffusion. Underlying the composition is a dot grid pattern in warm orange (#faa657) with high density (160) and subtle twinkle animation, visible through the blur effect. The overall atmosphere is warm, energetic, and celestial, resembling a sunset or divine light source. Saturation is enhanced (1.13 intensity) to amplify the vibrancy of the warm color palette.

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