The Text Flashlight Reveal transforms simple typography into an interactive, cinematic motion experience. By blending a highly responsive mask with flexible playback controls, this component turns static headlines into an engaging journey of discovery. It gives users absolute control over how they experience your content: they can manually uncover hidden text using a cursor-tracking flashlight, or sit back and switch to an automated sweep mode. Complete with an optional horizontal scrolling loop, it is the perfect premium addition for creative portfolios, product launches, or full-screen storytelling layouts.
FEATURES AND CAPABILITY:
Dual-Mode Tracking (Mode):
Mouse Mode: The flashlight follows the user's cursor on desktop or finger on touch devices, dynamically fading out near boundaries and disappearing upon exit.
Auto Mode: The flashlight operates autonomously, continuously sweeping across the canvas to reveal text without requiring user input.
Adjustable Spotlight Size (Radius): Controls the scale of the revealed area. A larger radius provides broader spotlight coverage, while a smaller radius creates a tight, highly focused beam.
Edge Softness (Falloff): Manages the gradient feathering of the flashlight mask. Lower values create a sharp, hard-edged spotlight, while higher values produce a soft, gradual fade from highlighted to hidden.
Proximity Fading (Edge Fade): Exclusive to Mouse Mode. Controls how early and smoothly the flashlight dims as the cursor approaches the component's boundaries. Setting this to 0 disables proximity fading entirely, keeping the light at full strength until the cursor completely exits.
Infinite Scrolling (Marquee): Toggles a seamless, horizontal loop. When enabled, the text automatically duplicates and repeats infinitely, allowing the flashlight mask to overlay onto moving typography. When disabled, the text remains static.
Loop Direction (Marquee Dir): Dictates the scroll trajectory of the looping text, allowing you to set the marquee movement to slide either Left or Right.
Automated Pace (Auto Speed): Exclusive to Auto Mode. Measures the time (in seconds) it takes for the flashlight to complete a single sweep. Lower values increase the speed, while higher values slow it down.
Text Alignment (Align): Aligns static text and marquee positioning horizontally (Left, Center, or Right), ensuring perfect structural synchronization between the background layer and the mask layer.
Visibility Control (Base Opacity): Adjusts the transparency of the unlit text layer. Low opacity (e.g., 0.1) keeps the text mysterious and barely visible until illuminated, while high opacity (e.g., 0.8) makes the text readable from the start, offering a more subtle highlight effect.
Underlying Layer Color (Base): Sets the color of the "always visible" text layer, which is modulated by the Base Opacity setting.
Illuminated Layer Color (Highlight): Customizes the bright, vibrant color that is only revealed inside the moving circular flashlight mask.
Backdrop Customization (Background): Controls the solid surface color behind the typography, allowing you to easily fine-tune the visual contrast between the background, base text, and highlighted text.
Global Font Styling (Font): Complete typography controls over font size, font family, style/weight (variant), line height, and letter spacing. Changes apply symmetrically to both the base layer and the flashlight mask layer to prevent misalignments.
Synchronized Layout Buffering (Padding): Sets the inner spacing between the component's outer edges and the text. Increasing padding pushes the text inward and automatically recalibrates the flashlight tracking overlay by the exact same margin to ensure pixel-perfect positioning.
Sophieee291
