Shaders
header.lightDarkMode D
Gallery

A dynamic abstract shader effect featuring radiant god rays emanating from the upper center area, creating dramatic light streaks that converge toward a vanishing point. The composition is dominated by a vibrant color gradient transitioning from deep dark-blue and black in the upper regions to vivid magenta and purple tones in the lower portions. The god rays component generates bright cyan-tinted light beams (#ccdaed) that pierce through the dark background with a spotty, atmospheric quality. A subtle film grain texture overlays the entire image, adding a cinematic quality and slight noise throughout. The tritone color grading applies a sophisticated three-color mapping using dark navy (#110c2e) for shadows, electric blue (#2f00ff) for midtones, and hot magenta (#ff03ee) for highlights, creating a neon-like cyberpunk aesthetic. A zoom blur effect centered slightly right of frame adds radial motion blur that intensifies the sense of depth and movement toward the viewer. The overall mood is intense, futuristic, and energetic with strong contrast between the dark void-like areas and the luminous colored rays. Horizontal line patterns are visible across the surface, suggesting a digital scan or interference pattern that enhances the technological feel.

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 :blend-mid="0.4" color-a="#110c2e" color-b="#2f00ff" color-c="#ff03ee" />
    <ZoomBlur :center="{ x: 0.58, y: 0.58 }" :intensity="100" />
  </Shader>
</template>