Shaders
header.lightDarkMode D
Gallery

A dynamic radial shader effect emanating from the lower-right quadrant of the image. The composition features sharp, blade-like rays of light converging toward a focal point, creating a sense of explosive motion and energy. The primary visual elements include: (1) Godrays effect generating luminous streaks with a cyan-teal background (#18b0b5) and pale blue-gray ray color (#ccdaed), centered slightly right and at the bottom edge, creating dramatic light beams that radiate outward; (2) A tritone color grading applying a dark teal shadow tone (#07161f), bright cyan midtone (#00a6ff), and neon green highlight (#03ff10), creating a cyberpunk aesthetic with strong color separation; (3) A zoom blur effect intensely focused at coordinates (0.584, 0.728), pulling the viewer's eye toward the lower-right with a velocity of 100 intensity, creating motion lines that streak horizontally and diagonally; (4) Film grain texture overlay (0.09 strength) adding subtle noise and analog quality to the otherwise digital effect. The overall mood is high-energy, futuristic, and kinetic, with a dark background punctuated by vibrant neon accents. The spatial composition suggests movement flowing from center-right outward, with the strongest visual intensity in the lower-right quadrant gradually fading to near-black in the upper-left.

Code

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

<template>
  <Shader
    :disable-telemetry="true"
  >
    <Godrays background-color="#18b0b5" :center="{ x: 0.52, y: 1 }" :intensity="0.58" ray-color="#ccdaed" :speed="1" />
    <FilmGrain :strength="0.09" />
    <Tritone :blend-mid="0.6" color-a="#07161f" color-b="#00a6ff" color-c="#03ff10" color-space="oklch" />
    <ZoomBlur :center="{ x: 0.58, y: 0.73 }" :intensity="100" />
  </Shader>
</template>