Fireworks 4
FireworksA dynamic neon light effect featuring radiating lines emanating from a central point located in the lower-left quadrant of the composition. The lines are thin, glowing streaks that extend outward in a starburst pattern, creating a sense of motion and energy. The color palette consists of cyan (#a8d8ea) and magenta/pink (#d4a5c9) neon lines that blend and transition across the spectrum, with the lines appearing to move or fall at a 90-degree angle. The background is a very dark navy-blue (#0a1520), providing stark contrast to the bright neon elements. A white circular mask (#ffffff) with soft edges and high opacity is positioned at the center point, creating a radial gradient effect that constrains the falling lines within a circular boundary. The lines have a trail effect with moderate length, creating a sense of continuous motion. A glow effect is applied with moderate intensity (0.8) and a size of 7 pixels, causing the neon lines to bloom and diffuse into the dark background. A subtle halftone pattern at 45 degrees with high frequency (175) adds texture and visual complexity. A paper texture with displacement and grain adds subtle organic noise to the overall composition. The overall mood is futuristic, energetic, and cyberpunk-inspired, with a strong emphasis on neon aesthetics and motion graphics.
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.3, y: 0.85 }" :radius="1.05" :softness="0.47" />
<SolidColor color="#0a1520" />
<PolarCoordinates :center="{ x: 0.3, y: 0.85 }" mask-source="idmmksxe5fmdwqd736t" mask-type="alphaInverted" :radius="0.6">
<FallingLines color-a="#a8d8ea" color-b="#d4a5c9" color-space="oklab" :density="30" :speed="0.3" :speed-variance="0.55" />
</PolarCoordinates>
<Glow :intensity="0.8" :size="7" :threshold="0.2" />
<Halftone blend-mode="overlay" :frequency="175" :smoothness="0" />
<Paper :displacement="0.18" :grain-scale="1.9" :roughness="0.55" />
</Shader>
</template>