Shaders
header.lightDarkMode D
Gallery

A vertical striped shader effect displaying a smooth gradient transition from dark to bright orange-red tones. The composition features approximately 12 evenly-spaced vertical lines or bars that divide the canvas, creating a venetian blind or louvered appearance. The leftmost bars are nearly black with minimal visible color, gradually transitioning through dark brown and deep red tones in the center-left bars. The middle section shows the most vibrant orange-red coloration (#ff3312 and #ff5b38 range), appearing warm and luminous. The rightmost bars fade back toward darker tones with some black vignetting at the edges. The effect creates a sense of depth and motion, as if viewing a glowing heat source through vertical slats. A subtle fluted glass refraction effect creates fine horizontal wave patterns across the bars, adding texture and optical distortion. The overall atmosphere is warm, energetic, and slightly industrial. Film grain adds a subtle noise texture throughout. The lighting appears to come from behind or within the bars, creating a backlit glow effect with chromatic color flow that emphasizes the orange-red spectrum.

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="#ffd8b5" left-color="#ff4000" :momentum="13" right-color="#ff5b38" up-color="#ff3312" />
    <FlutedGlass :aberration="0.61" :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>