Fireworks 3
FireworksA 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
<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>