import { useState, useRef, useCallback, useMemo, useEffect } from 'react' import { TegakiRenderer } from 'tegaki' import type { TegakiBundle } from 'tegaki/core' import caveat from 'tegaki/fonts/caveat' import italianno from 'tegaki/fonts/italianno' import parisienne from 'tegaki/fonts/parisienne' import tangerine from 'tegaki/fonts/tangerine' import { Play, Pause, Repeat, ChevronDown, Download, LoaderCircle, } from 'lucide-react' const FONTS: { value: string; label: string; bundle: TegakiBundle }[] = [ { value: 'caveat', label: 'Caveat', bundle: caveat as unknown as TegakiBundle }, { value: 'italianno', label: 'Italianno', bundle: italianno as unknown as TegakiBundle }, { value: 'parisienne', label: 'Parisienne', bundle: parisienne as unknown as TegakiBundle }, { value: 'tangerine', label: 'Tangerine', bundle: tangerine as unknown as TegakiBundle }, ] const APPLE_COLORS = [ '#007AFF', '#AF52DE', '#FF3B30', '#FF9500', '#FFCC00', '#34C759', ] const BACKGROUNDS = [ { src: '/bg-sequoia.jpg', label: 'Sequoia' }, { src: '/bg-tahoe.jpg', label: 'Tahoe' }, { src: '/bg-sonoma.jpg', label: 'Sonoma' }, { src: '/bg-ventura.jpg', label: 'Ventura' }, { src: '/bg-bigsur.jpg', label: 'Big Sur' }, { src: null, label: 'Gradient' }, ] const EASINGS: Record<string, (t: number) => number> = { linear: (t) => t, easeIn: (t) => t * t * t, easeOut: (t) => 1 - (1 - t) ** 3, easeInOut: (t) => t < 0.5 ? 4 * t * t * t : 1 - (-2 * t + 2) ** 3 / 2, } const EASING_OPTIONS = [ { value: 'easeInOut', label: 'Ease In Out' }, { value: 'easeOut', label: 'Ease Out' }, { value: 'easeIn', label: 'Ease In' }, { value: 'linear', label: 'Linear' }, ] export default function App() { const tegakiRef = useRef<any>(null) const progressRef = useRef<HTMLDivElement>(null) const previewRef = useRef<HTMLDivElement>(null) const [text, setText] = useState('hello') const [bgIndex, setBgIndex] = useState(3) const [fontKey, setFontKey] = useState('parisienne') const [fontVersion, setFontVersion] = useState(0) const [strokeWidth, setStrokeWidth] = useState(2.0) const [overlap, setOverlap] = useState(0.02) const [duration, setDuration] = useState(2.0) const [easing, setEasing] = useState('easeInOut') const [isPlaying, setIsPlaying] = useState(true) const [isLooping, setIsLooping] = useState(false) const [isRecording, setIsRecording] = useState(false) const recorderRef = useRef<MediaRecorder | null>(null) const recordRafRef = useRef<number>(0) const fontSize = useMemo(() => { const base = 40 + (strokeWidth - 1) * 20 const len = text.trim().length || 1 if (len <= 5) return base return Math.max(24, base * (5 / len)) }, [strokeWidth, text]) const activeFont = useMemo( () => FONTS.find((f) => f.value === fontKey)?.bundle ?? (caveat as unknown as TegakiBundle), [fontKey], ) const nextBgIndex = (bgIndex + 1) % BACKGROUNDS.length const isWhiteBg = BACKGROUNDS[bgIndex].src === null const handlePlayPause = useCallback(() => { const engine = tegakiRef.current?.engine if (!engine) return if (isPlaying) { engine.pause() setIsPlaying(false) } else { if (engine.isComplete) engine.restart() else engine.play() setIsPlaying(true) } }, [isPlaying]) const handleComplete = useCallback(() => { if (!isLooping) setIsPlaying(false) }, [isLooping]) const handleTimeChange = useCallback( (time: number) => { if (progressRef.current) { const total = tegakiRef.current?.engine?.duration || duration const p = total > 0 ? Math.min(1, time / total) : 0 progressRef.current.style.width = `${p * 100}%` } }, [duration], ) const handleTextInput = useCallback( (e: React.ChangeEvent<HTMLInputElement>) => { const val = e.target.value .toLowerCase() .replace(/[^a-z\s]/g, '') .slice(0, 15) setText(val) }, [], ) const cycleBg = useCallback(() => { setBgIndex((i) => (i + 1) % BACKGROUNDS.length) }, []) const handleDownload = useCallback(async () => { const preview = previewRef.current if (!preview || isRecording) return const tegakiCanvas = preview.querySelector( 'canvas[data-tegaki="canvas"]', ) as HTMLCanvasElement | null if (!tegakiCanvas) return const bgSrc = BACKGROUNDS[bgIndex].src let bgImage: HTMLImageElement | null = null if (bgSrc) { bgImage = await new Promise<HTMLImageElement>((resolve) => { const img = new Image() img.crossOrigin = 'anonymous' img.onload = () => resolve(img) img.src = bgSrc }) } const rect = preview.getBoundingClientRect() const w = 1920 const h = Math.round(w / (rect.width / rect.height)) const scale = w / rect.width const recCanvas = document.createElement('canvas') recCanvas.width = w recCanvas.height = h const ctx = recCanvas.getContext('2d')! const stream = recCanvas.captureStream(60) const mimeType = MediaRecorder.isTypeSupported('video/webm; codecs=vp9') ? 'video/webm; codecs=vp9' : 'video/webm' const recorder = new MediaRecorder(stream, { mimeType, videoBitsPerSecond: 8_000_000, }) const chunks: Blob[] = [] recorder.ondataavailable = (e) => { if (e.data.size > 0) chunks.push(e.data) } recorder.onstop = () => { const blob = new Blob(chunks, { type: 'video/webm' }) const url = URL.createObjectURL(blob) const a = document.createElement('a') a.href = url a.download = `${text || 'hello'}.webm` a.click() URL.revokeObjectURL(url) setIsRecording(false) } recorderRef.current = recorder setIsRecording(true) recorder.start() const engine = tegakiRef.current?.engine engine?.restart() setIsPlaying(true) let done = false const drawFrame = () => { if (bgImage) { const imgRatio = bgImage.width / bgImage.height const canvasRatio = w / h let sw = bgImage.width, sh = bgImage.height, sx = 0, sy = 0 if (imgRatio > canvasRatio) { sw = bgImage.height * canvasRatio sx = (bgImage.width - sw) / 2 } else { sh = bgImage.width / canvasRatio sy = (bgImage.height - sh) / 2 } ctx.drawImage(bgImage, sx, sy, sw, sh, 0, 0, w, h) } else { ctx.fillStyle = '#f5f5f7' ctx.fillRect(0, 0, w, h) } const tegakiRect = tegakiCanvas.getBoundingClientRect() const previewRect = preview.getBoundingClientRect() const dx = (tegakiRect.left - previewRect.left) * scale const dy = (tegakiRect.top - previewRect.top) * scale const dw = tegakiRect.width * scale const dh = tegakiRect.height * scale ctx.drawImage(tegakiCanvas, dx, dy, dw, dh) const eng = tegakiRef.current?.engine if (eng?.isComplete && !done) { done = true setTimeout(() => { recorder.stop() cancelAnimationFrame(recordRafRef.current) }, 300) } if (!done) { recordRafRef.current = requestAnimationFrame(drawFrame) } } recordRafRef.current = requestAnimationFrame(drawFrame) }, [bgIndex, isRecording, text]) useEffect(() => { return () => { cancelAnimationFrame(recordRafRef.current) recorderRef.current?.stop() } }, []) return ( <div className="min-h-screen bg-[#fafafa] dark:bg-zinc-950 flex items-center justify-center p-4"> <div className="w-full max-w-3xl space-y-4"> <div ref={previewRef} className="relative overflow-hidden rounded-2xl" style={{ aspectRatio: '16 / 10' }} > <div className="absolute inset-0 bg-[#f5f5f7] dark:bg-zinc-900 transition-opacity duration-700 ease-in-out" style={{ opacity: isWhiteBg ? 1 : 0 }} /> {BACKGROUNDS.map((bg, i) => bg.src ? ( <img key={bg.src} src={bg.src} alt="" className="absolute inset-0 w-full h-full object-cover transition-opacity duration-700 ease-in-out" style={{ opacity: i === bgIndex ? 1 : 0 }} draggable={false} /> ) : null, )} <div className="absolute inset-0 flex items-center justify-center z-10 overflow-hidden px-8"> <TegakiRenderer key={fontVersion} ref={tegakiRef} font={activeFont} time={{ mode: 'uncontrolled', playing: isPlaying, loop: isLooping, duration, easing: EASINGS[easing], loopGap: 0.5, onTimeChange: handleTimeChange, }} timing={{ glyphGap: overlap }} effects={isWhiteBg ? { gradient: { colors: APPLE_COLORS } } : {}} onComplete={handleComplete} style={{ fontSize: `${fontSize}px`, color: isWhiteBg ? '#1d1d1f' : '#ffffff', maxWidth: '100%', }} > {text || ' '} </TegakiRenderer> </div> <div className="absolute bottom-3 left-3 right-3 z-20 flex items-center gap-2"> <button onClick={handleDownload} disabled={isRecording} className="shrink-0 w-9 h-9 flex items-center justify-center rounded-full transition-all active:scale-[0.92] disabled:opacity-60" style={{ background: isWhiteBg ? 'rgba(0,0,0,0.06)' : 'rgba(0,0,0,0.3)', backdropFilter: 'blur(24px)', WebkitBackdropFilter: 'blur(24px)', }} > {isRecording ? ( <LoaderCircle size={14} className={`animate-spin ${isWhiteBg ? 'text-zinc-500' : 'text-white/80'}`} /> ) : ( <Download size={14} className={isWhiteBg ? 'text-zinc-500' : 'text-white/80'} /> )} </button> <div className="flex-1 flex items-center gap-1 rounded-full px-1.5 py-1" style={{ background: isWhiteBg ? 'rgba(0,0,0,0.06)' : 'rgba(0,0,0,0.3)', backdropFilter: 'blur(24px)', WebkitBackdropFilter: 'blur(24px)', }} > <button onClick={handlePlayPause} className={`w-8 h-8 flex items-center justify-center rounded-full transition-all active:scale-[0.92] ${ isWhiteBg ? 'text-zinc-500 hover:text-zinc-900 hover:bg-zinc-200/60' : 'text-white/80 hover:text-white hover:bg-white/10' }`} > {isPlaying ? ( <Pause size={13} fill="currentColor" strokeWidth={0} /> ) : ( <Play size={13} fill="currentColor" strokeWidth={0} /> )} </button> <input type="text" value={text} onChange={handleTextInput} maxLength={15} placeholder="type here..." className={`bg-transparent text-sm flex-1 outline-none min-w-0 text-center ${ isWhiteBg ? 'text-zinc-700 placeholder:text-zinc-400' : 'text-white/90 placeholder:text-white/30' }`} /> <button onClick={() => setIsLooping((l) => !l)} className={`w-8 h-8 flex items-center justify-center rounded-full transition-all active:scale-[0.92] ${ isWhiteBg ? isLooping ? 'text-zinc-900 bg-zinc-200/60' : 'text-zinc-400 hover:text-zinc-600' : isLooping ? 'text-white bg-white/15' : 'text-white/35 hover:text-white/60' }`} > <Repeat size={13} /> </button> </div> <button onClick={cycleBg} className={`shrink-0 w-9 h-9 rounded-full overflow-hidden border-2 transition-all active:scale-[0.92] ${ isWhiteBg ? 'border-zinc-300 hover:border-zinc-400' : 'border-white/40 hover:border-white/70' }`} title={BACKGROUNDS[nextBgIndex].label} > {BACKGROUNDS[nextBgIndex].src ? ( <img src={BACKGROUNDS[nextBgIndex].src} alt={BACKGROUNDS[nextBgIndex].label} className="w-full h-full object-cover" draggable={false} /> ) : ( <div className="w-full h-full" style={{ background: `linear-gradient(135deg, ${APPLE_COLORS.join(', ')})`, }} /> )} </button> </div> <div className="absolute bottom-0 left-0 right-0 h-[2px] z-30" style={{ background: isWhiteBg ? 'rgba(0,0,0,0.06)' : 'rgba(255,255,255,0.1)', }} > <div ref={progressRef} className="h-full" style={{ width: '0%', background: isWhiteBg ? 'rgba(0,0,0,0.2)' : 'rgba(255,255,255,0.6)', transition: 'width 50ms linear', }} /> </div> </div> <div className="rounded-2xl border border-zinc-200/80 dark:border-zinc-800 bg-white dark:bg-zinc-900 p-5 md:p-6 shadow-sm"> <div className="grid grid-cols-1 md:grid-cols-3 gap-x-6 gap-y-5 mb-6"> <Slider label="Stroke Width" value={strokeWidth} min={1.0} max={5.0} step={0.05} display={strokeWidth.toFixed(1)} onChange={setStrokeWidth} /> <Slider label="Overlap" value={overlap} min={0} max={0.45} step={0.01} display={overlap.toFixed(2)} onChange={setOverlap} /> <Slider label="Duration" value={duration} min={0.5} max={8.0} step={0.05} display={`${duration.toFixed(2)}s`} onChange={setDuration} /> </div> <div className="grid grid-cols-1 md:grid-cols-2 gap-x-6 gap-y-4"> <div> <label className="block text-xs text-zinc-500 dark:text-zinc-400 mb-1.5">Font</label> <div className="relative"> <select value={fontKey} onChange={(e) => { setFontKey(e.target.value); setFontVersion((v) => v + 1); setIsPlaying(true) }} className="w-full appearance-none bg-zinc-100 dark:bg-zinc-800 rounded-lg px-3 py-2 pr-8 text-sm text-zinc-900 dark:text-white outline-none border-0 focus:ring-2 focus:ring-zinc-300 dark:focus:ring-zinc-600 cursor-pointer" > {FONTS.map((f) => (<option key={f.value} value={f.value}>{f.label}</option>))} </select> <ChevronDown size={14} className="absolute right-2.5 top-1/2 -translate-y-1/2 text-zinc-400 pointer-events-none" /> </div> </div> <div> <label className="block text-xs text-zinc-500 dark:text-zinc-400 mb-1.5">Easing</label> <div className="relative"> <select value={easing} onChange={(e) => setEasing(e.target.value)} className="w-full appearance-none bg-zinc-100 dark:bg-zinc-800 rounded-lg px-3 py-2 pr-8 text-sm text-zinc-900 dark:text-white outline-none border-0 focus:ring-2 focus:ring-zinc-300 dark:focus:ring-zinc-600 cursor-pointer" > {EASING_OPTIONS.map((opt) => (<option key={opt.value} value={opt.value}>{opt.label}</option>))} </select> <ChevronDown size={14} className="absolute right-2.5 top-1/2 -translate-y-1/2 text-zinc-400 pointer-events-none" /> </div> </div> </div> </div> <div className="text-sm text-zinc-400 dark:text-zinc-500 space-y-1.5 px-1"> <p>Fonts powered by <a href="https://www.npmjs.com/package/tegaki" target="_blank" rel="noopener noreferrer" className="underline underline-offset-2 hover:text-zinc-600 dark:hover:text-zinc-300 transition-colors">Tegaki</a></p> <p>Inspired by <a href="https://www.kumailnanji.com/playground/letters" target="_blank" rel="noopener noreferrer" className="underline underline-offset-2 hover:text-zinc-600 dark:hover:text-zinc-300 transition-colors">Kumail Nanji</a>.</p> <p>Source code available on <a href="https://lndevui.com/" target="_blank" rel="noopener noreferrer" className="underline underline-offset-2 hover:text-zinc-600 dark:hover:text-zinc-300 transition-colors">lndevui.com</a></p> </div> </div> </div> ) } function Slider({ label, value, min, max, step, display, onChange }: { label: string; value: number; min: number; max: number; step: number; display: string; onChange: (v: number) => void }) { return ( <div> <div className="flex items-center justify-between mb-2"> <span className="text-xs text-zinc-500 dark:text-zinc-400">{label}</span> <span className="text-xs font-mono tabular-nums text-zinc-900 dark:text-zinc-100">{display}</span> </div> <input type="range" min={min} max={max} step={step} value={value} onChange={(e) => onChange(Number(e.target.value))} /> </div> ) }

Hello Text Animation

Code

Stacks

Inspiration

X ( Twitter ) Post