Light Speed Burst

Animated Backgrounds

About Light Speed Burst

Dense colored streaks accelerate outward along perspective rays, creating a light-speed burst that fades from a green core to cyan and blue edges. Featuring Seeded radial light streaks and Nonlinear perspective acceleration, this effect supports live adjustments, instant previews, and reusable exports in Limot.

Features

Seeded radial light streaks
Nonlinear perspective acceleration
Multicolor gradient from core to edge
Core glow and edge falloff
Adjustable center, density, speed, and streak size

Use cases

Website heroes and brand landing pages
Product demos and launch pages
Video intros and social media assets

Configuration

Synced with the controls

Appearance

ParameterCode keyCurrent value

Background colorbackgroundColor#111111

Colorscolors#ffffff, #d4d4d0, #a7a6a0, #74736e

Glowglow30

Particles

ParameterCode keyCurrent value

Particle countparticleCount4500

Streak lengthstreakLength40px

Line widthlineWidth1px

Spreadspread100%

Position

ParameterCode keyCurrent value

Center xcenterX50%

Center ycenterY50%

Core radiuscoreRadius0px

Motion

ParameterCode keyCurrent value

Speedspeed1

Integration

Ready to use in your project

JavaScript

Use the downloaded HTML file directly. It includes the canvas, styles, and animation script.

<!-- light-speed-burst.html -->
Paste into your page to run

React

Add the JSX file to your project and import it as a component. Override settings with props.

import LightSpeedBurst from "./LightSpeedBurst.jsx";

<LightSpeedBurst />

Vue

Add the Vue single-file component to your project, import it, and use it in your template.

import LightSpeedBurst from "./LightSpeedBurst.vue";

<LightSpeedBurst />

Exports include your current settings. React and Vue components also accept the configuration keys below as props.

Customize in real time, copy standalone code, or export MP4, GIF, and PNG with optional transparency.