Text Animations

Lumen

Copy that lights up as you read it. Words ahead sit dim and unfocused, and stay lit once you pass them.

Cook BookScroll-driven animation Scroll reveal Stagger Interpolation / Tween Blur Purposeful animation

Controls

dimOpacity0.15

fadeSpan6 words

blurAmount4.0 px

startOffset0.15

endOffset0.60

highlightColor

#a855f7

Install

bun add motion clsx tailwind-merge

Then copy 2 files into your project:

components/registry/lumen/lumen.tsx
lib/utils.ts

Props

Prop	Type	Default	Description
dimOpacity	number	0.15	Opacity of words that haven't been reached yet.
fadeSpan	number	6	Width of the reading band — words mid-transition at once.
blurAmount	number	4	Blur on a word that hasn't been reached.
startOffset	number	0.15	Point in the scroll pass where the first word brightens.
endOffset	number	0.6	Point by which the last word is fully lit.
highlightColor	string (hex)	"#a855f7"	Amethyst bloom on the leading edge.

What It Demonstrates

Scroll-driven animation: An animation whose progress is tied directly to scroll position.
Scroll reveal: Elements fade or slide into place as they enter the viewport.
Stagger: Animate several items one after another with a small delay between each, creating a cascade.
Interpolation / Tween: Generating all the in-between frames between a start and end value, so motion is continuous.
Blur: A blur filter used to soften an element or mask tiny imperfections.
Purposeful animation: Motion should serve a function — orient, give feedback, show relationships — not just decorate.

Related Components

Appears In

"use client"; import { useMemo, useRef, type RefObject } from "react"; import { motion, useScroll, useTransform, useMotionTemplate, type MotionValue, } from "motion/react"; import { cn } from "@/lib/utils"; export interface LumenProps { text?: string; className?: string; dimOpacity?: number; fadeSpan?: number; blurAmount?: number; startOffset?: number; endOffset?: number; highlightColor?: string; scrollContainerRef?: RefObject<HTMLElement | null>; reducedMotion?: boolean; } interface WordProps { word: string; progress: MotionValue<number>; start: number; end: number; dimOpacity: number; blurAmount: number; highlightColor: string; still: boolean; } function Word({ word, progress, start, end, dimOpacity, blurAmount, highlightColor, still, }: WordProps) { const opacity = useTransform(progress, [start, end], [dimOpacity, 1], { clamp: true, }); const blurPx = useTransform(progress, [start, end], [blurAmount, 0], { clamp: true, }); const filter = useMotionTemplate`blur(${blurPx}px)`; const glow = useTransform( progress, [start, (start + end) / 2, end], [0, 1, 0], { clamp: true }, ); const glowPx = useTransform(glow, (g) => g * 12); const textShadow = useMotionTemplate`0 0 ${glowPx}px ${highlightColor}`; if (still) return <span className="mr-[0.25em] inline-block">{word}</span>; return ( <motion.span className="mr-[0.25em] inline-block will-change-[opacity,filter]" style={{ opacity, filter, textShadow }} > {word} </motion.span> ); } export default function Lumen({ text = "", className, dimOpacity = 0.15, fadeSpan = 6, blurAmount = 4, startOffset = 0.15, endOffset = 0.6, highlightColor = "#a855f7", scrollContainerRef, reducedMotion = false, }: LumenProps) { const targetRef = useRef<HTMLParagraphElement>(null); const words = useMemo(() => text.split(/\s+/).filter(Boolean), [text]); const { scrollYProgress } = useScroll({ target: targetRef, ...(scrollContainerRef ? { container: scrollContainerRef } : {}), offset: ["start end", "end start"], }); const lo = Math.min(startOffset, endOffset - 0.05); const progress = useTransform(scrollYProgress, [lo, endOffset], [0, 1], { clamp: true, }); const total = words.length || 1; const span = Math.min(Math.max(fadeSpan, 1), total); return ( <p ref={targetRef} className={cn("text-balance", className)}> {words.map((word, i) => ( <Word key={`${word}-${i}`} word={word} progress={progress} start={i / total} end={Math.min(1, (i + span) / total)} dimOpacity={dimOpacity} blurAmount={blurAmount} highlightColor={highlightColor} still={reducedMotion} /> ))} </p> ); }

Lumen

Controls

Install

Props

What It Demonstrates

Related Components

Word RevealPro

Letters Pull

Morphing Text

Variable Proximity

Scramble Text

Specter

Appears In

Controls