Updated Top Bar

Transition Pages Available — Create stunning animated experiences with ease Transitions Available

Get Started
Spotlight Configurator

How to Use in Breakdance Builder

  1. Customize your Spotlight effect using the controls below
  2. Click the Get Code button and copy the JavaScript
  3. In Breakdance Builder, add a Code element and paste the JavaScript
  4. Add the attribute
    data-spotlight📋
    with value "true" to your container element
This tool creates a custom script with your settings built-in. All your Spotlight configurations are included in the generated code! Remember to set the attribute value to "true".
Spotlight
Breakfusion Exclusive Get Your Spotlight Effect

Add stunning spotlight animations with sparkles to your website elements with this custom-crafted JavaScript snippet.

  • Eye-catching spotlight effects with customizable colors
  • Fully responsive design that adapts to any container
  • Smooth scroll-triggered animations with GSAP integration
  • Beautiful sparkle effects for added visual appeal
  • Automatic text illumination with Window Light mode
  • Works in all modern browsers and devices
Effect Settings
Spotlight Color

Choose the color for your spotlight effect

Spotlight Effect

Choose a realistic lighting effect

Light Direction 45°

Direction the light is coming from

Spotlight Intensity 0.8

Controls the brightness of the spotlight effect

Spotlight Size 150%

Adjust the size of the spotlight relative to element

Blur Amount 8px

Add blur for a softer spotlight effect

Animation Duration 1s
Sparkle Settings
Enable Sparkles
Add magical sparkle effects to the spotlight
Sparkle Count 5

Number of sparkles that appear initially

Sparkle Frequency 30%

Chance of new sparkles appearing during animation

Sparkle Size 6px
Trigger Settings
Trigger Type

When the spotlight effect should activate

Scroll Start Position top bottom
Scroll End Position bottom top
Reverse on Scroll
Reverse animation when scrolling up