Fireworks
FireworksA dynamic neon shader effect featuring radiating lines emanating from a vanishing point at the bottom center of the composition. The lines are rendered with a gradient color transition from hot pink (#f2126e) on the left side to electric blue (#3e67f4) on the right side, creating a vibrant chromatic spread. The lines appear to be falling or moving downward with motion blur trails, giving a sense of rapid movement and energy. The effect is contained within a circular mask with soft edges that fades to transparency, creating a radial burst pattern. The background is a very dark purple-black (#12091f), providing maximum contrast for the neon elements. A strong glow effect is applied with high intensity (3.5) and a size of 15.9, creating luminous halos around each line that blend into the dark background. The overall composition has a cyberpunk aesthetic with a subtle halftone overlay pattern at 45 degrees and fine paper texture grain for added visual complexity. The lines vary in length and density (26 lines total), with approximately 35% trail length creating comet-like streaks. The effect conveys motion, energy, and a sense of data or light particles radiating outward from a central point.
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.5, y: 1 }" :radius="1.05" :softness="0.47" />
<SolidColor color="#12091f" />
<PolarCoordinates :center="{ x: 0.5, y: 1 }" mask-source="idmmksxe5fmdwqd736t" mask-type="alphaInverted">
<FallingLines color-a="#f2126e" color-b="#3e67f4" :density="26" :speed="0.55" :speed-variance="0.55" />
</PolarCoordinates>
<Glow :intensity="3.5" :size="15.9" :threshold="0.2" />
<Halftone blend-mode="overlay" :frequency="158" :smoothness="0" />
<Paper :displacement="0.31" :grain-scale="2.5" :roughness="0.82" />
</Shader>
</template>