Shaders
header.lightDarkMode D
Gallery

A dynamic motion blur effect featuring three diagonal streaks of light traveling across a dark background at approximately 45-degree angles. The primary streak in the center displays a gradient transition from white/light-gray at its core to deep blue edges, with warm orange and red chromatic aberration visible at the trailing end. Two secondary streaks flank the main element, showing similar color separation with blue and orange fringing. The effect creates a sense of rapid motion and speed, with soft, feathered edges that fade into the black background. The fluted glass component creates subtle vertical ribbing patterns across the light streaks, adding texture and refraction. A thin red/orange line appears at the top right, suggesting additional light trails. The overall composition has a cinematic quality with chromatic aberration creating color separation typical of high-speed motion capture or light refraction through glass. Film grain adds subtle texture throughout, enhancing the photographic quality.

Code

vue
<script setup lang="ts">
import {
  Shader,
  ChromaFlow,
  FilmGrain,
  FlutedGlass,
  Swirl
} from 'shaders/vue'
</script>

<template>
  <Shader
    :disable-telemetry="true"
  >
    <Swirl color-a="#000000" color-b="#0a0a0a" :detail="1.7" />
    <ChromaFlow base-color="#18181a" down-color="#b5b5b5" left-color="#4f4f4f" :momentum="13" right-color="#ebebeb" up-color="#f5fff0" />
    <FlutedGlass :aberration="0.61" :angle="120" :frequency="8" :highlight="0.12" :highlight-softness="0" :light-angle="-90" :refraction="4" shape="rounded" :softness="1" :speed="0.15" />
    <FilmGrain :strength="0.05" />
  </Shader>
</template>