Shaders
header.lightDarkMode D
Gallery

A dynamic radial burst effect emanating from a central point slightly right of center. The composition features approximately 20-30 luminous lines radiating outward in a starburst pattern against a very dark navy-black background (#0a1118). The lines transition in color from warm golden-orange (#e8a44c) on the left and bottom portions to cool steel-blue (#4a7db8) on the right and upper portions, creating a warm-to-cool color gradient across the radial spread. Each line has a soft glowing trail effect with a length of approximately 35% of the total ray distance, giving the impression of motion or speed lines moving outward. The lines possess soft, feathered edges with a glow radius of approximately 16 pixels, creating a luminous halo around each ray. A subtle halftone texture overlay (172 frequency at 45-degree angle) adds a fine dot pattern texture across the entire composition, while a paper grain texture with 0.72 roughness provides subtle surface irregularity. The central area contains a white circular mask (radius 1.05) with 0.47 softness that constrains the effect, creating a focal point. The overall atmosphere is energetic and futuristic, suggesting rapid movement or energy discharge with a high-tech aesthetic.

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: 0.7, y: 0.34 }" :radius="1.05" :softness="0.47" />
    <SolidColor color="#0a1118" />
    <PolarCoordinates :center="{ x: 0.7, y: 0.34 }" mask-source="idmmksxe5fmdwqd736t" mask-type="alphaInverted" :radius="0.7">
      <FallingLines color-a="#e8a44c" color-b="#4a7db8" color-space="oklab" :density="28" :speed="0.4" :speed-variance="0.55" />
    </PolarCoordinates>
    <Glow :intensity="5" :size="16.1" :threshold="0.3" />
    <Halftone blend-mode="overlay" :frequency="172" :smoothness="0" />
    <Paper :displacement="0.16" :grain-scale="2.1" :roughness="0.72" />
  </Shader>
</template>