Light Beam Type
Light Beam Type is an animated text effect in the UI HUB animated text collection. A text animation on a pure black stage. A light fixture sits just above the top edge (ax = W*0.38, ay = -H*0.03); on pointer activity its lamp warms up (I += (want-I)*(1-exp(-(want?5:1.6)*dt))) and the beam drops from the fixture to an aim point with a cubic ease (P clamps 0..1 over 0.5s, Pe = ease(P) = 1-(1-P)^3).
The component is driven by 5 documented props (className, style, compact, text, hint), so colours, intensity, timing and density can be tuned from the call site instead of being hard-coded.
Implementation notes: 2D Canvas 2D context (devicePixelRatio up to 2); requestAnimationFrame loop with dt clamped to 0.05s; Pointer listeners (pointermove/pointerdown/pointerleave/pointercancel) on the stage.
Preview the animated text effect in the browser above, copy the source, and paste it into your project. Animated Text components in UI HUB are grouped by category so you can compare effects side by side before choosing one.
What is Light Beam Type?
A volumetric light beam drops from a fixture above the stage to your pointer and lights only the letters it touches — spring-weighted aim, cone haze, 36 flickering light streaks, 80 drifting dust motes, a warm-up flicker and a radial fixture glow over a pure black floor.
Light Beam Type at a glance
- Category
- Animated Text
- Pricing
- Free to use
- Libraries
- React
- Styling
- Tailwind CSS
- Configurable props
- 5
- AI prompts
- Ready for Advance, Antigravity, Claude Code, Cursor, Lovable
How Light Beam Type works
A text animation on a pure black stage. A light fixture sits just above the top edge (ax = W*0.38, ay = -H*0.03); on pointer activity its lamp warms up (I += (want-I)*(1-exp(-(want?5:1.6)*dt))) and the beam drops from the fixture to an aim point with a cubic ease (P clamps 0..1 over 0.5s, Pe = ease(P) = 1-(1-P)^3). The aim point is a spring with weight: aimT.x = clamp(pointerX, uL-rx*0.25, uR+rx*0.25), aimT.y = uCy + clamp((pointerY-uCy)/(H*0.5),-1,1)*ry*0.7, integrated in 3 substeps (accel (aimT-aim)*60, damp exp(-9*h)) for a little overshoot. Letters are read from the DOM (.lbt-ch) with getBoundingClientRect; the row bounds give uL/uR/uW, and rx = clamp(uW*0.22, 70, 240), ry = rx*0.55. Each letter's light is g = (1 - hypot((cx-aimX)/rx,(cy-aimY)/ry))*1.5 clamped 0..1, then smoothstepped g*g*(3-2g) and scaled by Ie*reach where reach = clamp((Pe-0.75)/0.25,0,1) so letters only light once the beam reaches the floor. Per letter --g drives a color ramp of rgb and a four-layer text-shadow bloom (a crisp near-white core hugging the glyph plus progressively wider, dimmer blue halos) so the glow traces only the letters. The canvas draws a cone haze (linear gradient), 36 light streaks with per-streak jitter/flicker/edge falloff, 80 drifting dust motes that advance along the beam, and a radial glow at the fixture, all under globalCompositeOperation 'lighter'. The hint word hides (.lbt-on) while the pointer is active.
Technical information for Light Beam Type
| Category | Animated Text |
|---|---|
| Libraries | React |
| Styling | Tailwind CSS |
| Rendering | HTML canvas |
| State change | black stage with the breathing 'Hover' hint and dark letters to the beam down at the pointer with the touched letters glowing blue-white and dust drifting in the cone |
| Props | 5 configurable |
| Usage example | Not published yet |
What Light Beam Type requires
- 2D Canvas 2D context (devicePixelRatio up to 2)
- requestAnimationFrame loop with dt clamped to 0.05s
- Pointer listeners (pointermove/pointerdown/pointerleave/pointercancel) on the stage
- ResizeObserver on the stage + window resize
- getBoundingClientRect per letter per frame to build the text row bounds
- CSS custom property --g written per letter for lighting
- globalCompositeOperation 'lighter' for additive beams and dust
- prefers-reduced-motion matchMedia (snaps aim, freezes flicker/motes and hint breathing, fast beam drop)
Light Beam Type questions
What is Light Beam Type?
A volumetric light beam drops from a fixture above the stage to your pointer and lights only the letters it touches — spring-weighted aim, cone haze, 36 flickering light streaks, 80 drifting dust motes, a warm-up flicker and a radial fixture glow over a pure black floor.
How does Light Beam Type work?
A text animation on a pure black stage. A light fixture sits just above the top edge (ax = W*0.38, ay = -H*0.03); on pointer activity its lamp warms up (I += (want-I)*(1-exp(-(want?5:1.6)*dt))) and the beam drops from the fixture to an aim point with a cubic ease (P clamps 0..1 over 0.5s, Pe = ease(P) = 1-(1-P)^3). The aim point is a spring with weight: aimT.x = clamp(pointerX, uL-rx*0.25, uR+rx*0.25), aimT.y = uCy + clamp((pointerY-uCy)/(H*0.5),-1,1)*ry*0.7, integrated in 3 substeps (accel (aimT-aim)*60, damp exp(-9*h)) for a little overshoot. Letters are read from the DOM (.lbt-ch) with getBoundingClientRect; the row bounds give uL/uR/uW, and rx = clamp(uW*0.22, 70, 240), ry = rx*0.55. Each letter's light is g = (1 - hypot((cx-aimX)/rx,(cy-aimY)/ry))*1.5 clamped 0..1, then smoothstepped g*g*(3-2g) and scaled by Ie*reach where reach = clamp((Pe-0.75)/0.25,0,1) so letters only light once the beam reaches the floor. Per letter --g drives a color ramp of rgb and a four-layer text-shadow bloom (a crisp near-white core hugging the glyph plus progressively wider, dimmer blue halos) so the glow traces only the letters. The canvas draws a cone haze (linear gradient), 36 light streaks with per-streak jitter/flicker/edge falloff, 80 drifting dust motes that advance along the beam, and a radial glow at the fixture, all under globalCompositeOperation 'lighter'. The hint word hides (.lbt-on) while the pointer is active.
Which category does Light Beam Type belong to?
Light Beam Type is listed under Animated Text in the UI HUB catalog. Typography effects that animate letterforms rather than fading a whole block: scramble reveals, rolling letters, random swaps, gradient fills, vaporising text and scroll-linked highlights. Every effect is scoped to a single text element, so you can apply it to a headline without restructuring the surrounding markup. Built for hero headings and section titles.
What does the className prop do in Light Beam Type?
Optional class applied to the root container. It defaults to "".
What does the style prop do in Light Beam Type?
Optional inline styles for the root container. It defaults to {}.
Is Light Beam Type free to use?
Light Beam Type is a free component on UI HUB. You can preview it in the browser and read the full props table on the component page.
Which libraries does Light Beam Type use?
Light Beam Type uses React and is styled with Tailwind CSS.
What does Light Beam Type need to run?
Light Beam Type needs 2D Canvas 2D context (devicePixelRatio up to 2), requestAnimationFrame loop with dt clamped to 0.05s, Pointer listeners (pointermove/pointerdown/pointerleave/pointercancel) on the stage and ResizeObserver on the stage + window resize.