4e:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 4f:T11e7,"use client"; import React, { type JSX, useEffect, useMemo, useRef, useState } from "react"; import { cn } from "@/lib/utils"; export type TypewriterSegment = | string | { text: string; className?: string; delay?: number; speed?: number; }; export type TypewriterProps = { text: TypewriterSegment | TypewriterSegment[]; as?: React.ElementType; className?: string; speed?: number; delay?: number; startOnView?: boolean; loop?: boolean; loopDelay?: number; cursor?: boolean; cursorCharacter?: string; cursorClassName?: string; onComplete?: () => void; }; const DEFAULT_SPEED = 30; function normalize(text: TypewriterProps["text"]) { const segments = Array.isArray(text) ? text : [text]; return segments.map((segment) => typeof segment === "string" ? { text: segment } : segment, ); } function TypewriterBase({ text, as: Component = "span", className, speed = DEFAULT_SPEED, delay = 0, startOnView = false, loop = false, loopDelay = 1500, cursor = true, cursorCharacter = "|", cursorClassName, onComplete, }: TypewriterProps) { const segments = useMemo(() => normalize(text), [text]); const containerRef = useRef(null); const [started, setStarted] = useState(!startOnView); const [segmentIndex, setSegmentIndex] = useState(0); const [charIndex, setCharIndex] = useState(0); const [done, setDone] = useState(false); useEffect(() => { if (!startOnView || started || !containerRef.current) return; const node = containerRef.current; const observer = new IntersectionObserver( ([entry]) => { if (entry?.isIntersecting) { setStarted(true); observer.disconnect(); } }, { threshold: 0.1 }, ); observer.observe(node); return () => observer.disconnect(); }, [startOnView, started]); useEffect(() => { if (!started) return; if (segmentIndex >= segments.length) { setDone(true); onComplete?.(); if (loop) { const resetTimer = window.setTimeout(() => { setDone(false); setSegmentIndex(0); setCharIndex(0); }, loopDelay); return () => window.clearTimeout(resetTimer); } return; } const current = segments[segmentIndex]; if (!current) return; const currentSpeed = current.speed ?? speed; const segmentDelay = current.delay ?? 0; const isFirstChar = charIndex === 0; const leadingDelay = isFirstChar ? segmentIndex === 0 ? delay + segmentDelay : segmentDelay : 0; if (charIndex < current.text.length) { const wait = isFirstChar ? leadingDelay + currentSpeed : currentSpeed; const timer = window.setTimeout(() => { setCharIndex((idx) => idx + 1); }, wait); return () => window.clearTimeout(timer); } setSegmentIndex((idx) => idx + 1); setCharIndex(0); return; }, [ started, segmentIndex, charIndex, segments, speed, delay, loop, loopDelay, onComplete, ]); const MotionComponent = Component as keyof JSX.IntrinsicElements; const segmentsWithKeys = useMemo( () => segments.map((segment, idx) => ({ ...segment, key: `${idx}-${segment.text.slice(0, 24)}`, })), [segments], ); const renderedSegments = segmentsWithKeys.map((segment, idx) => { if (idx > segmentIndex) return null; const value = idx < segmentIndex ? segment.text : segment.text.slice(0, charIndex); if (!value) return null; return ( {value} ); }); return React.createElement( MotionComponent, { ref: containerRef as React.RefObject, "data-slot": "typewriter", className: cn("inline-block whitespace-pre-wrap", className), "aria-live": "polite", }, <> {renderedSegments} {cursor && ( )} , ); } export const Typewriter = React.memo(TypewriterBase); 50:Tc48,import { Typewriter } from "@/registry/default/blocks/animations/typewriter/components/elements/typewriter"; export default function TypewriterPage() { return (

Typewriter

Framework-agnostic typewriter effect with multi-segment support, viewport triggers, and custom cursors.

Single line

Multi-segment with emphasis

Loop with custom cursor

Triggered on viewport entry

As a heading

); } 4d:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[null,["$","$L4e",null,{"files":[{"path":"registry/default/blocks/animations/typewriter/components/elements/typewriter.tsx","content":"$4f","type":"registry:component"},{"path":"registry/default/blocks/animations/typewriter/routes/layout.tsx","content":"import { Geist, Geist_Mono } from \"next/font/google\";\n\nconst geistSans = Geist({\n variable: \"--font-geist-sans\",\n subsets: [\"latin\"],\n});\n\nconst geistMono = Geist_Mono({\n variable: \"--font-geist-mono\",\n subsets: [\"latin\"],\n});\n\nexport default function RootLayout({\n children,\n}: Readonly<{\n children: React.ReactNode;\n}>) {\n return (\n \n \n {children}\n \n \n );\n}\n","type":"registry:page","target":"app/layout.tsx"},{"path":"registry/default/blocks/animations/typewriter/routes/page.tsx","content":"$50","type":"registry:page","target":"app/typewriter/page.tsx"}],"className":"h-[70svh] min-h-80"}]]}]