Shaders
header.lightDarkMode D
Gallery

A dynamic abstract shader effect featuring radial godrays emanating from the upper-center area, creating streaking light rays that fade into a dark background. The composition uses a tritone color grading system with deep dark-blue shadows (#07161f), vibrant orange-red mid-tones (#ff3700), and bright electric blue highlights (#0353ff). A zoom blur effect originates from the left side, creating a sense of motion and depth that pulls the viewer's eye diagonally across the frame. Fine vertical line patterns overlay the entire image, created by the film grain effect at low intensity (0.09), adding texture and visual complexity. The godrays have a spotty quality with moderate density (0.3), creating an organic, atmospheric light diffusion effect. The overall mood is cinematic and energetic, with a cool-to-warm color balance that creates visual tension. The background maintains a deep navy-blue tone while the foreground elements feature magenta, pink, and red gradients that blend with the blue undertones, creating a neon-like aesthetic typical of modern digital art and VFX.

Code

vue
<script setup lang="ts">
import {
  Shader,
  FilmGrain,
  Godrays,
  Tritone,
  ZoomBlur
} from 'shaders/vue'
</script>

<template>
  <Shader
    :disable-telemetry="true"
  >
    <Godrays background-color="#1829b5" :center="{ x: 0.52, y: 1 }" :intensity="0.58" ray-color="#ccdaed" :speed="2" />
    <FilmGrain :strength="0.09" />
    <Tritone color-a="#07161f" color-b="#ff3700" color-c="#0353ff" color-space="oklch" />
    <ZoomBlur :center="{ x: 0.11, y: 0.51 }" :intensity="100" />
  </Shader>
</template>