Swinging Spotlight Text Reveal

This is a Swinging Spotlight Text Reveal. It uses a virtual pendulum mask to selectively illuminate static vector letters as it passes over them. Its function is to direct user focus and add a tactile, environmental lighting effect to primary typographic elements.

Specs

• Weight: ~4 KB (Dependencies: GSAP Core).
• Performance: Relies on hardware-accelerated SVG transforms. [!] The concurrent SVG Gaussian Blur (<feGaussianBlur>) and <feMerge> operations require moderate GPU composition. Best used on single hero elements.
• Theming / Customization: Managed entirely within the SVG markup. Adjusting the beam width requires modifying the #lamp path data.
• Responsiveness: Fluid and scalable. The container stretches proportionally across the viewport via inherent viewBox behavior.
• Graceful Degradation: If JavaScript fails to initialize, the text remains partially illuminated in a static, centered position.

Anatomy

• HTML: A monolithic <svg> container. It houses a <defs> block defining a clipPath (the exact text outline), a <filter> (the neon glow), and a <mask> (the moving light beam shape).
• CSS: Stripped to the bone. Handles only viewport centering and a dark background to maximize the lighting contrast.
• JS: The metronome. A minimal GSAP timeline applies a continuous, yoyo-ing rotation to the #lamp mask path.

Logic

The elegance lies in rendering the text geometry twice and selectively exposing the glowing layer.

tl.fromTo('#lamp', {
	rotation: -26,
	svgOrigin: '400 130'
}, {	
	duration: 1,
	rotation: 26,
	svgOrigin: '400 130',
	ease: 'power1.inOut',
	repeat: -1,
	yoyo: true
})

GSAP rotates the #lamp path back and forth around a precise absolute point (svgOrigin: '400 130'). The light text group utilizes a complex stacking mechanism: it is masked by the swinging #lamp (so only the illuminated slice is visible), clipped by #lightTextMask (ensuring the light never spills outside the letter borders), and processed through a <feGaussianBlur> glow filter. The dark text group sits behind it permanently, acting as the unlit, ambient state.

Feel

Mechanical and precise. The power1.inOut easing gives the swinging beam genuine physical weight, smoothly accelerating at the bottom of the arc and lingering naturally at the peaks.