51:I[707087,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"RegistryDependencies"] 52:I[512940,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"Installation"] 53:I[314491,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"FilesView"] 54:Tda6,'use client'; import { useEffect, useRef, useState } from 'react'; import { useInView } from 'motion/react'; export type CharacterPreset = 'default' | 'binary' | 'cyberpunk' | 'minimal'; const PRESETS: Record = { default: '#$%&@!?', binary: '01', cyberpunk: '░▒▓█◣◥', minimal: '·+×÷', }; export interface TextRevealProps { children: string; speed?: number; delay?: number; className?: string; triggerOnView?: boolean; once?: boolean; characters?: string; preset?: CharacterPreset; } function pickRandom(chars: string, exclude?: string): string { const pool = exclude ? [...chars].filter((c) => c !== exclude) : [...chars]; const source = pool.length > 0 ? pool : [...chars]; return source[Math.floor(Math.random() * source.length)]; } export function TextReveal({ children: text, speed = 20, delay = 0, className = '', triggerOnView = false, once = true, characters, preset = 'default', }: TextRevealProps) { const chars = characters ?? PRESETS[preset]; const ref = useRef(null); const inView = useInView(ref, { once, margin: '-100px' }); const active = triggerOnView ? inView : true; const [display, setDisplay] = useState('\u00A0'.repeat(text.length)); const phaseRef = useRef<'scramble' | 'reveal'>('scramble'); const stepRef = useRef(0); const timerRef = useRef | null>(null); const delayRef = useRef | null>(null); useEffect(() => { if (!active) return; const clearAll = () => { if (timerRef.current) clearInterval(timerRef.current); if (delayRef.current) clearTimeout(delayRef.current); timerRef.current = null; delayRef.current = null; }; const start = () => { phaseRef.current = 'scramble'; stepRef.current = 0; setDisplay('\u00A0'.repeat(text.length)); timerRef.current = setInterval(() => { const step = stepRef.current; if (phaseRef.current === 'scramble') { const len = Math.min(step + 1, text.length); const buf: string[] = []; for (let i = 0; i < len; i++) { buf.push(pickRandom(chars, i > 0 ? buf[i - 1] : undefined)); } for (let i = len; i < text.length; i++) buf.push('\u00A0'); setDisplay(buf.join('')); if (step < text.length * 2 - 1) { stepRef.current++; } else { phaseRef.current = 'reveal'; stepRef.current = 0; } } else { const revealed = Math.floor(step / 2); const buf: string[] = text .slice(0, Math.min(revealed, text.length)) .split(''); if (revealed < text.length) { buf.push(step % 2 === 0 ? '_' : pickRandom(chars)); } while (buf.length < text.length) buf.push(pickRandom(chars)); setDisplay(buf.join('')); if (step < text.length * 2 - 1) { stepRef.current++; } else { setDisplay(text); clearAll(); } } }, speed); }; if (delay > 0) { delayRef.current = setTimeout(start, delay * 1000); } else { start(); } return clearAll; }, [active, text, speed, delay, chars]); return ( {display} ); } 4d:["$","div",null,{"className":"flex flex-col gap-12","children":[["$","div",null,{"className":"pt-10 flex flex-col gap-4","children":[["$","ul",null,{"className":"flex gap-2 flex-wrap","children":[["$","li","motion",{"children":["$","a",null,{"href":"https://www.npmjs.com/package/motion","target":"_blank","rel":"noopener noreferrer","className":"rounded-md border p-2 text-sm flex items-center gap-1 ","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"text-xs font-medium","children":"motion"}]]}]}]]}],["$","$L51",null,{"registryDependencies":[]}]]}],["$","$L52",null,{"sourceUrl":"https://www.odysseyui.com/r/components-texts-text-reveal.json","proxyUrl":"https://shadcnregistry.com/r/odysseyui/components-texts-text-reveal","itemId":"@odysseyui/components-texts-text-reveal"}],["$","section",null,{"className":"flex flex-col gap-4","id":"files","children":[["$","h2",null,{"className":"text-lg md:text-2xl font-bold font-mono","children":"Files"}],["$","$L53",null,{"files":[{"path":"registry/components/texts/text-reveal/index.tsx","content":"$54","type":"registry:ui","target":"components/odysseyui/text-reveal.tsx"}]}]]}],"$L55"]}]

Text Reveal

Installation

Files

components

Styles