Lumen Effects

✦ Lumen Effects

is a cinematic text animation component for Framer. Combine scroll text reveal, camera-style word zoom and typewriter effect animation in one no-code component, built for hero headlines, scrollytelling and animated typography.

THREE ANIMATION MODES

- Reveal: word by word or letter by letter text reveal from a before state to an after state, with per-unit mask, blur, scale, rotation and offset controls

- Camera: a cinematic camera frames one word at a time, pushes each through its mask, then pulls back to the full sentence

- Typeboard: typewriter effect with a glowing dot or blinking caret, smooth or keyboard-rhythm pacing, and a caret that morphs into the final period

KEY FEATURES

- Scroll-triggered animation with a pinned sticky stage, or in-view autoplay

- Overlap stagger, easing and scroll smoothing controls

- Optional mask per word or letter for clean reveals

- Five easing curves, including a springy back-out

- Ink-settle blur or keystroke jitter with human pauses after punctuation

- Five dot endings: jump and shrink, pop, shrink, fade or morph into period

- Push up, down, left, right or zoom pop transitions

- Focus width and zoom cap for precise camera framing

- Push-in and push-out states with independent opacity, blur, scale and rotation

- Custom fonts, tracking, line height and text case

- Reduced motion support and canvas-safe rendering

- Built on Framer Motion values for smooth, scroll-synced playback

- Native property controls, no code required

IDEAL FOR

- Hero section headlines and landing pages

- Scrollytelling, product launches and case studies

- SaaS, agency and portfolio websites

- Storytelling sections, intros and coming soon pages

WHY CHOOSE LUMEN

One component replaces a folder of single-effect text animations. Camera and Typeboard measure layout once and refresh on resize or font load, so results stay crisp on any screen size.

Drop it in, type your text, pick a mode and publish. Professional kinetic typography with zero code.