LIVE NOW

Visual Configurator is now active — Customize 50+ professional animations Visual Configurator is live!

Get Started
Spotlight Configurator

How to Use in Bricks Builder

  1. Customize your Spotlight effect using the controls below
  2. Click the Get Code button and copy the JavaScript
  3. In Bricks Builder, add a Code element and paste the JavaScript
  4. Add the attribute
    data-spotlight📋
    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!
Spotlight
BricksFusion 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

JavaScript Code