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