Shaders
header.lightDarkMode D
Gallery

A dark, atmospheric shader effect featuring radial lines emanating from the right side of the composition against a very dark burgundy-black background (#1c0b15). The primary visual element consists of multiple falling lines with a golden-tan color (#c59d69) that transition to dark gray (#302d36), creating a sense of motion and depth. These lines are arranged in a polar coordinate system, creating a fan-like or starburst pattern that radiates outward. The lines have a soft, glowing quality with a warm golden luminescence at their leading edges, suggesting movement from right to left. A strong glow effect (size 15.9, intensity 3.5) enhances the luminosity of the brightest elements, creating halos around the golden lines. The overall composition has a cinematic quality with a soft paper texture overlay (roughness 0.65, grain scale 1.6) that adds subtle surface irregularity. A halftone pattern (frequency 199, 45-degree angle) in overlay blend mode adds fine detail and texture throughout. The effect creates a sense of speed, energy, and depth with warm golden highlights contrasting sharply against the cool, dark background. The circular mask constrains the effect to a specific area, with the polar coordinate transformation creating the distinctive radial line pattern.

Code

vue
<script setup lang="ts">
import {
  Shader,
  Circle,
  FallingLines,
  Glow,
  Halftone,
  Paper,
  PolarCoordinates,
  SolidColor
} from 'shaders/vue'
</script>

<template>
  <Shader
    :disable-telemetry="true"
  >
    <Circle id="idmmksxe5fmdwqd736t" :center="{ x: 1, y: 1 }" :radius="1.05" :softness="0.47" />
    <SolidColor color="#1c0b15" />
    <PolarCoordinates :center="{ x: 1, y: 1 }" mask-source="idmmksxe5fmdwqd736t" mask-type="alphaInverted" :radius="0.6">
      <FallingLines color-a="#c59d69" color-b="#302d36" color-space="oklab" :density="35" :speed="0.45" :speed-variance="0.55" />
    </PolarCoordinates>
    <Glow :intensity="3.5" :size="15.9" :threshold="0.2" />
    <Halftone blend-mode="overlay" :frequency="199" :smoothness="0" />
    <Paper :displacement="0.2" :grain-scale="1.6" :roughness="0.65" />
  </Shader>
</template>