Comet Streaks

A dynamic motion graphics effect featuring diagonal streaks of light falling from upper-left to lower-right at approximately 40 degrees. The composition uses a deep dark navy/black background (#140d1c) that provides high contrast. Multiple elongated rectangular light trails in vibrant warm tones create a sense of rapid downward movement. The primary color gradient transitions smoothly from bright orange (#ff6a00) through red-orange to deep magenta-red (#e8153e), with each streak having a glowing quality that suggests motion blur. The trails vary in length and intensity, creating a layered depth effect. A tilt-shift blur effect is applied with a 52-degree angle and 0.8 falloff, creating selective focus that enhances the sense of motion and three-dimensionality. The overall atmosphere is energetic and modern, with a tech-forward aesthetic. Individual streaks have soft edges that fade to transparency, and the density of approximately 40 lines creates a dense but not overwhelming visual field. The color space uses oklab for smooth gradient transitions, resulting in perceptually uniform color blending between the warm orange and cool red tones.

<script setup lang="ts">
import {
  Shader,
  FallingLines,
  LinearGradient,
  SolidColor,
  TiltShift
} from 'shaders/vue'
</script>

<template>
  <Shader
    :disable-telemetry="true"
    color-space="srgb"
  >
    <SolidColor color="#140d1c" />
    <FallingLines id="idmmijuosi5e6y2didn" :angle="40" color-space="hsl" :density="40" :speed="0.1" :speed-variance="0.2" :stroke-width="1" :trail-length="0.31" :visible="false" />
    <LinearGradient color-a="#ff6a00" color-b="#e8153e" color-space="oklab" edges="mirror" :end="{ x: 0.41, y: 0.68 }" mask-source="idmmijuosi5e6y2didn" :start="{ x: 0.21, y: 0.82 }" />
    <TiltShift :angle="52" :falloff="0.8" :width="0" />
  </Shader>
</template>