Before

); const After = () => (

After

); const ComparisonSliderUsage = () => { return ( } after={} className="h-56 w-full max-w-sm rounded-xl border" /> ); }; export default ComparisonSliderUsage; ``` ## Source Save as `components/ui/comparison-slider.tsx`. ```tsx "use client"; import { ChevronsLeftRight, ChevronsUpDown } from "lucide-react"; import { useCallback, useRef, useState, type KeyboardEvent, type PointerEvent, type ReactNode, } from "react"; import { cn } from "@/lib/utils"; interface ComparisonSliderProps { /** The layer revealed on the leading side of the divider. */ before: ReactNode; /** The layer underneath, revealed as the divider moves across it. */ after: ReactNode; /** Where the divider starts, 0 to 100. */ defaultPosition?: number; orientation?: "horizontal" | "vertical"; /** Accessible name for the divider. */ label?: string; className?: string; } const clamp = (value: number) => Math.min(100, Math.max(0, value)); /** * Two layers stacked, with a divider the reader drags to compare them. * * The top layer is revealed with `clip-path` rather than a width. A clipped * layer is laid out at full size and only painted in part, so both sides stay * pinned to the same geometry. Resize a width instead and the top copy * reflows as it narrows, which turns a comparison of two designs into a * comparison of one design against itself at a different width. * * It is a real slider to anything that is not a mouse: `role="slider"` with a * live value, arrow keys for fine steps, Home and End for the extremes. A * comparison that can only be operated by dragging is one a keyboard user * cannot see the other half of. * * No Motion here. The divider tracks the pointer exactly, because anything * easing toward the cursor would feel broken, so the only animated case is a * keyboard step, which is a CSS transition that `motion-reduce` turns off. */ export function ComparisonSlider({ before, after, defaultPosition = 50, orientation = "horizontal", label = "Compare before and after", className = "", }: ComparisonSliderProps) { const [position, setPosition] = useState(clamp(defaultPosition)); const [dragging, setDragging] = useState(false); const frameRef = useRef(null); const isHorizontal = orientation === "horizontal"; const positionFromPointer = useCallback( (event: PointerEvent) => { const frame = frameRef.current; if (!frame) return; const bounds = frame.getBoundingClientRect(); const next = isHorizontal ? ((event.clientX - bounds.left) / bounds.width) * 100 : ((event.clientY - bounds.top) / bounds.height) * 100; setPosition(clamp(next)); }, [isHorizontal], ); const handlePointerDown = (event: PointerEvent) => { // Capture on the frame, so a drag that leaves the component still tracks // until the button is released. event.currentTarget.setPointerCapture(event.pointerId); setDragging(true); positionFromPointer(event); }; const handlePointerMove = (event: PointerEvent) => { if (!dragging) return; positionFromPointer(event); }; const stopDragging = (event: PointerEvent) => { if (event.currentTarget.hasPointerCapture(event.pointerId)) { event.currentTarget.releasePointerCapture(event.pointerId); } setDragging(false); }; const handleKeyDown = (event: KeyboardEvent) => { const steps: Record = { ArrowLeft: -2, ArrowRight: 2, ArrowUp: -2, ArrowDown: 2, PageDown: -10, PageUp: 10, }; if (event.key === "Home" || event.key === "End") { event.preventDefault(); setPosition(event.key === "Home" ? 0 : 100); return; } const step = steps[event.key]; if (step === undefined) return; event.preventDefault(); setPosition((current) => clamp(current + step)); }; // `inset()` trims from each edge, so the value is how much to hide. const clipPath = isHorizontal ? `inset(0 ${100 - position}% 0 0)` : `inset(0 0 ${100 - position}% 0)`; const Grip = isHorizontal ? ChevronsLeftRight : ChevronsUpDown; return (

{after}

{before}

); } export default ComparisonSlider; ``` ## Credits Written by [Claude Code](https://claude.com/claude-code). --- # Dock The Dock component recreates the macOS dock: items swell as the pointer approaches, and each one names itself in a tooltip on hover or focus. - **Category:** Component - **Docs:** https://uibeats.com/docs/component/dock - **Registry:** https://uibeats.com/r/dock.json - **License:** MIT - **npm dependencies:** `lucide-react`, `motion` ## Installation ```bash npx shadcn@latest add https://uibeats.com/r/dock.json ``` Or install the dependencies and copy the source below: ```bash npm install lucide-react motion ``` ## When to use For a small fixed set of destinations that should feel like an object: a tool palette, a demo launcher, a portfolio nav. Keep it under eight items. ## Props | Prop | Type | Default | Description | | --- | --- | --- | --- | | `children` | `React.ReactNode` | `-` | One per entry (required) | | `size` | `number` | `44` | Resting size of each item, in pixels | | `magnification` | `number` | `76` | Size an item reaches directly under the pointer | | `reach` | `number` | `130` | How far, in pixels, the magnification reaches along the dock | | `className` | `string` | `''` | Additional CSS classes for the dock container | | `DockItem: label` | `string` | `-` | Name shown in the tooltip and used as the item's accessible name (required) | | `DockItem: children` | `React.ReactNode` | `-` | Icon or content for the item (required) | | `DockItem: onClick` | `() => void` | `undefined` | Called when the item is activated | | `DockItem: href` | `string` | `undefined` | Render the item as a link instead of a button | | `DockItem: className` | `string` | `''` | Additional CSS classes for the item itself | ## Example usage ```tsx "use client"; import { Dock, DockItem } from "@/components/demo/component/dock"; import { Home, Layers, Mail, Search, Settings } from "lucide-react"; const ITEMS = [ { label: "Home", icon: Home }, { label: "Search", icon: Search }, { label: "Projects", icon: Layers }, { label: "Mail", icon: Mail }, { label: "Settings", icon: Settings }, ]; const DockUsage = () => { return ( {ITEMS.map(({ label, icon: Icon }) => ( {}}> ))} ); }; export default DockUsage; ``` ## Source Save as `components/ui/dock.tsx`. ```tsx "use client"; import { AnimatePresence, motion, useMotionValue, useReducedMotion, useSpring, useTransform, type MotionValue, } from "motion/react"; import { createContext, useContext, useRef, useState, type ReactNode, } from "react"; interface DockContextValue { mouseX: MotionValue; size: number; magnification: number; reach: number; } const DockContext = createContext(null); function useDock(component: string) { const context = useContext(DockContext); if (!context) { throw new Error(`<${component}> must be rendered inside a .`); } return context; } interface DockProps { children: ReactNode; /** Resting size of each item, in pixels. */ size?: number; /** Size an item reaches directly under the pointer. */ magnification?: number; /** How far, in pixels, the magnification reaches along the dock. */ reach?: number; className?: string; } /** * A macOS-style dock: items swell as the pointer approaches and settle back * on a spring as it leaves. * * The pointer's x position is held in a motion value and read by each item * through context, so magnification runs entirely off the main thread: no * state updates and no re-renders per frame, however many items the dock * holds. */ export function Dock({ children, size = 44, magnification = 76, reach = 130, className = "", }: DockProps) { // Infinity parks every item at its resting size until the pointer arrives. const mouseX = useMotionValue(Number.POSITIVE_INFINITY); const prefersReducedMotion = useReducedMotion(); return ( ); } interface DockItemProps { children: ReactNode; /** Name shown in the tooltip above the item, and its accessible name. */ label: string; onClick?: () => void; /** Render as a link instead of a button. */ href?: string; className?: string; } /** * A single dock entry. * * The label appears on focus as well as hover; a dock whose names only exist * on pointer hover is unusable by keyboard and invisible on touch. */ export function DockItem({ children, label, onClick, href, className = "", }: DockItemProps) { const { mouseX, size, magnification, reach } = useDock("DockItem"); const ref = useRef(null); const [open, setOpen] = useState(false); // Horizontal distance from the pointer to this item's centre. const distance = useTransform(mouseX, (x) => { const bounds = ref.current?.getBoundingClientRect(); if (!bounds) return Number.POSITIVE_INFINITY; return x - bounds.x - bounds.width / 2; }); const targetSize = useTransform( distance, [-reach, 0, reach], [size, magnification, size], { clamp: true }, ); const width = useSpring(targetSize, { mass: 0.1, stiffness: 170, damping: 14, }); const Interactive = href ? "a" : "button"; return ( setOpen(true)} onHoverEnd={() => setOpen(false)} onFocus={() => setOpen(true)} onBlur={() => setOpen(false)} className="relative flex aspect-square shrink-0 items-end justify-center" > {open ? ( ) : null} {children} ); } export default Dock; ``` ## Credits Written by [Claude Code](https://claude.com/claude-code). --- # Liquid Tabs The LiquidTabs component is a tab switcher whose selection pill flows between tabs, stretching in proportion to how fast it is travelling and settling back into shape as it lands. - **Category:** Component - **Docs:** https://uibeats.com/docs/component/liquid-tabs - **Registry:** https://uibeats.com/r/liquid-tabs.json - **License:** MIT - **npm dependencies:** `motion` ## Installation ```bash npx shadcn@latest add https://uibeats.com/r/liquid-tabs.json ``` Or install the dependencies and copy the source below: ```bash npm install motion ``` ## When to use For a handful of peer views: dashboard sections, a filter row, a pricing period toggle. Keep it under about six tabs so the indicator has room to travel. ## Props | Prop | Type | Default | Description | | --- | --- | --- | --- | | `items` | `{ label: string; value: string }[]` | `-` | The tabs to render, in order | | `defaultValue` | `string` | `first item` | Selected tab when the component is uncontrolled | | `value` | `string` | `-` | Selected tab. Pass with onValueChange to control the component | | `onValueChange` | `(value: string) => void` | `-` | Called with the value of the newly selected tab | | `squish` | `number` | `0.22` | Peak stretch of the pill at full speed, as a scale factor | | `className` | `string` | `''` | Additional CSS classes applied to the tab list | ## Example usage ```tsx "use client"; import { useState } from "react"; import { LiquidTabs } from "@/components/demo/component/liquid-tabs"; const tabs = [ { label: "Overview", value: "overview" }, { label: "Analytics", value: "analytics" }, { label: "Reports", value: "reports" }, { label: "Settings", value: "settings" }, ]; const copy: Record = { overview: "The pill stretches as it travels and settles when it lands.", analytics: "Jump across several tabs at once to see it deform further.", reports: "Arrow keys move the selection, so it works without a pointer.", settings: "Widths are measured from the tabs, so any label length fits.", }; const LiquidTabsUsage = () => { const [tab, setTab] = useState("overview"); return (

{copy[tab]}

); }; export default LiquidTabsUsage; ``` ## Source Save as `components/ui/liquid-tabs.tsx`. ```tsx "use client"; import { motion, useReducedMotion, useSpring, useTransform, useVelocity, } from "motion/react"; import { useCallback, useEffect, useLayoutEffect, useRef, useState, type KeyboardEvent, } from "react"; import { cn } from "@/lib/utils"; interface LiquidTabItem { label: string; value: string; } interface LiquidTabsProps { items: LiquidTabItem[]; /** Selected tab when uncontrolled. Defaults to the first item. */ defaultValue?: string; /** Selected tab. Pass with `onValueChange` to control the component. */ value?: string; onValueChange?: (value: string) => void; /** Peak stretch of the pill at full speed, as a scale factor. */ squish?: number; className?: string; } /** * A tab switcher whose selection pill flows between tabs, stretching as it * accelerates and settling back as it lands. * * The squash is derived from the pill's own velocity rather than scripted per * transition: `useVelocity` reads how fast the spring is travelling and maps * that to a horizontal stretch, with the vertical scale as its reciprocal so * the pill keeps its area. Short hops barely deform; a jump across five tabs * stretches hard and snaps back. * * Position and width are measured from the tabs themselves, so labels of any * length work and a resize is picked up without a re-render. */ export function LiquidTabs({ items, defaultValue, value, onValueChange, squish = 0.22, className = "", }: LiquidTabsProps) { const prefersReducedMotion = useReducedMotion(); const listRef = useRef(null); const tabRefs = useRef<(HTMLButtonElement | null)[]>([]); const measured = useRef(false); const [uncontrolled, setUncontrolled] = useState( defaultValue ?? items[0]?.value ?? "", ); const selected = value ?? uncontrolled; const activeIndex = Math.max( 0, items.findIndex((item) => item.value === selected), ); const spring = { stiffness: 420, damping: 34, mass: 0.9 }; const x = useSpring(0, spring); const width = useSpring(0, spring); // Stretch along the direction of travel, compress across it. The reciprocal // keeps the pill's area constant, which is what makes it read as something // deforming rather than something being resized. const velocity = useVelocity(x); const stretch = useTransform( velocity, [-2600, 0, 2600], [1 + squish, 1, 1 + squish], { clamp: true }, ); const scaleX = useSpring(stretch, { stiffness: 500, damping: 30 }); const scaleY = useTransform(scaleX, (current) => 1 / current); const sync = useCallback(() => { const tab = tabRefs.current[activeIndex]; const list = listRef.current; if (!tab || !list) return; const left = tab.offsetLeft; const tabWidth = tab.offsetWidth; // The first measurement is a jump, not an animation: a pill that slides in // from the left edge on mount looks like a bug, not a flourish. if (!measured.current || prefersReducedMotion) { measured.current = true; x.jump(left); width.jump(tabWidth); return; } x.set(left); width.set(tabWidth); }, [activeIndex, prefersReducedMotion, x, width]); useLayoutEffect(sync, [sync]); useEffect(() => { const list = listRef.current; if (!list || typeof ResizeObserver === "undefined") return; // Fonts loading, a container resizing, a label changing: all move the // tabs under the pill without anything re-rendering. const observer = new ResizeObserver(sync); observer.observe(list); return () => observer.disconnect(); }, [sync]); const select = (next: string) => { if (value === undefined) setUncontrolled(next); onValueChange?.(next); }; const handleKeyDown = (event: KeyboardEvent) => { const moves: Record = { ArrowRight: 1, ArrowLeft: -1, Home: -activeIndex, End: items.length - 1 - activeIndex, }; const step = moves[event.key]; if (step === undefined) return; event.preventDefault(); const next = (activeIndex + step + items.length) % items.length; const target = items[next]; if (!target) return; select(target.value); // Focus follows selection, which is what the tab pattern expects. tabRefs.current[next]?.focus(); }; return (

{items.map((item, index) => { const isActive = index === activeIndex; return ( ); })}

); } export default LiquidTabs; ``` ## Credits Written by [Claude Code](https://claude.com/claude-code). --- # Marquee The Marquee component scrolls its children in a seamless, infinite loop, with pause-on-hover and faded edges. - **Category:** Component - **Docs:** https://uibeats.com/docs/component/marquee - **Registry:** https://uibeats.com/r/marquee.json - **License:** MIT - **npm dependencies:** `motion` ## Installation ```bash npx shadcn@latest add https://uibeats.com/r/marquee.json ``` Or install the dependencies and copy the source below: ```bash npm install motion ``` ## When to use The standard home for logo walls, testimonial rows and 'trusted by' strips, where a reader should notice the content without being asked to read it in order. The loop never stops, so nothing essential belongs in it. Keep the speed low enough that a passing glance can still catch a single item. ## Props | Prop | Type | Default | Description | | --- | --- | --- | --- | | `children` | `React.ReactNode` | `-` | Content to scroll; it is rendered twice to form the loop (required) | | `speed` | `number` | `60` | Pixels travelled per second | | `direction` | `'left' \| 'right'` | `'left'` | Direction of travel | | `pauseOnHover` | `boolean` | `true` | Pause while the pointer is over the marquee | | `fadeEdges` | `boolean` | `true` | Fade the leading and trailing edges into the background | | `className` | `string` | `''` | Additional CSS classes for the container | ## Example usage ```tsx "use client"; import { Marquee } from "@/components/demo/component/marquee"; const LOGOS = ["Vercel", "Linear", "Stripe", "Figma", "Raycast", "Supabase"]; const MarqueeUsage = () => { return ( {LOGOS.map((name) => (

{name}

))} ); }; export default MarqueeUsage; ``` ## Source Save as `components/ui/marquee.tsx`. ```tsx "use client"; import { motion, useAnimationFrame, useMotionValue, useReducedMotion, } from "motion/react"; import { useCallback, useEffect, useRef, useState, type ReactNode, } from "react"; interface MarqueeProps { children: ReactNode; /** Pixels travelled per second. */ speed?: number; direction?: "left" | "right"; pauseOnHover?: boolean; /** Fade the leading and trailing edges into the background. */ fadeEdges?: boolean; className?: string; } /** * A seamless, infinitely scrolling row. * * Driven by `useAnimationFrame` against a motion value rather than a CSS * keyframe. That costs nothing extra and buys two things a keyframe cannot: * pausing mid-travel without a jump, and a wrap point measured from the real * rendered width, so any content loops seamlessly without hand-tuned timings. */ export function Marquee({ children, speed = 60, direction = "left", pauseOnHover = true, fadeEdges = true, className = "", }: MarqueeProps) { const trackRef = useRef(null); const x = useMotionValue(0); const [paused, setPaused] = useState(false); const [halfWidth, setHalfWidth] = useState(0); const prefersReducedMotion = useReducedMotion(); const measure = useCallback(() => { const track = trackRef.current; if (!track) return; // The content is rendered twice, so one loop is half the track. setHalfWidth(track.scrollWidth / 2); }, []); useEffect(() => { measure(); const track = trackRef.current; if (!track) return; const observer = new ResizeObserver(measure); observer.observe(track); return () => observer.disconnect(); }, [measure]); useAnimationFrame((_, delta) => { if (paused || halfWidth === 0 || prefersReducedMotion) return; // delta is milliseconds since the last frame, so movement stays constant // regardless of refresh rate. const step = (speed * delta) / 1000; let next = x.get() + (direction === "left" ? -step : step); // Wrap by exactly one copy's width; the seam is never visible. if (next <= -halfWidth) next += halfWidth; if (next >= 0) next -= halfWidth; x.set(next); }); return (

setPaused(true) : undefined} onPointerLeave={pauseOnHover ? () => setPaused(false) : undefined} >

{children}

{/* The duplicate is decorative; screen readers should hear the list once, not twice. */}

); } export default Marquee; ``` ## Credits Written by [Claude Code](https://claude.com/claude-code). --- # Progress Ring The ProgressRing component sweeps an arc round to a value and counts a label up alongside it, driving both from one animation so the number can never finish ahead of the arc describing it. - **Category:** Component - **Docs:** https://uibeats.com/docs/component/progress-ring - **Registry:** https://uibeats.com/r/progress-ring.json - **License:** MIT - **npm dependencies:** `motion` ## Installation ```bash npx shadcn@latest add https://uibeats.com/r/progress-ring.json ``` Or install the dependencies and copy the source below: ```bash npm install motion ``` ## When to use For a single figure that is a share of a whole and wants to be read at a glance: storage used, a score, a completion rate. It is a poor fit for an unbounded number or for anything changing every second, where a ring restarting its sweep on each update reads as a spinner rather than a measurement. ## Props | Prop | Type | Default | Description | | --- | --- | --- | --- | | `value` | `number` | `72` | How far round to sweep, 0 to 100 | | `size` | `number` | `120` | Outer diameter, in pixels | | `strokeWidth` | `number` | `10` | Thickness of the ring, in pixels | | `duration` | `number` | `1.2` | Seconds the sweep takes | | `showLabel` | `boolean` | `true` | Print the percentage in the middle | | `className` | `string` | `''` | Additional CSS classes for styling | ## Example usage ```tsx "use client"; import { ProgressRing } from "@/components/demo/component/progress-ring"; const ProgressRingUsage = () => { return (

The number is driven by the same animation as the arc.

); }; export default ProgressRingUsage; ``` ## Source Save as `components/ui/progress-ring.tsx`. ```tsx "use client"; import { animate, motion, useMotionValue, useMotionValueEvent, useReducedMotion, } from "motion/react"; import { useEffect, useState } from "react"; import { cn } from "@/lib/utils"; interface ProgressRingProps { /** How far round to sweep, 0 to 100. */ value?: number; /** Outer diameter, in pixels. */ size?: number; /** Thickness of the ring, in pixels. */ strokeWidth?: number; /** Seconds the sweep takes. */ duration?: number; /** Print the percentage in the middle. */ showLabel?: boolean; className?: string; } /** * A ring that sweeps round to a value, with the number counting up beneath it. * * The arc is drawn by animating `pathLength`, which Motion resolves against * the circle's real measured length. The usual version of this computes * `2 * Math.PI * r` by hand into `strokeDasharray`, which is correct right up * until the stroke width changes the radius the arc is actually drawn at, and * then the ring stops short of its own end by a few pixels. * * The label is driven by the same animation rather than a second timer, so the * number cannot finish ahead of the arc it is describing. It is read from a * motion value into state, because text content is the one thing a motion * value cannot write without a render. * * Under reduced motion both arrive at their final value immediately: the ring * is a readout, and a readout that withholds the reading is worse than one * that never animated. */ export function ProgressRing({ value = 72, size = 120, strokeWidth = 10, duration = 1.2, showLabel = true, className = "", }: ProgressRingProps) { const prefersReducedMotion = useReducedMotion(); const count = useMotionValue(0); const [display, setDisplay] = useState(0); useMotionValueEvent(count, "change", (latest) => setDisplay(Math.round(latest)), ); useEffect(() => { const controls = animate(count, value, { duration: prefersReducedMotion ? 0 : duration, ease: "easeOut", }); return () => controls.stop(); }, [count, value, duration, prefersReducedMotion]); // The arc is drawn along the centre of the stroke, so the radius has to come // in by half of it or the ring is clipped by its own viewBox. const radius = (size - strokeWidth) / 2; const centre = size / 2; return (

{showLabel ? ( ) : null}

); } export default ProgressRing; ``` ## Credits Written by [Claude Code](https://claude.com/claude-code). --- # Scratch to Reveal The ScratchToReveal component covers your content in a foil the user rubs away with a pointer, firing onComplete and dropping the rest of the foil once enough has been cleared. - **Category:** Component - **Docs:** https://uibeats.com/docs/component/scratch-to-reveal - **Registry:** https://uibeats.com/r/scratch-to-reveal.json - **License:** MIT - **npm dependencies:** `motion` ## Installation ```bash npx shadcn@latest add https://uibeats.com/r/scratch-to-reveal.json ``` Or install the dependencies and copy the source below: ```bash npm install motion ``` ## When to use For a reward worth uncovering: a discount code, a giveaway result, a launch-day surprise. The delay rules it out for anything needed quickly. ## Props | Prop | Type | Default | Description | | --- | --- | --- | --- | | `children` | `React.ReactNode` | `-` | Content hidden under the foil | | `width` | `number` | `300` | Width of the scratch area, in pixels | | `height` | `number` | `200` | Height of the scratch area, in pixels | | `brushSize` | `number` | `22` | Radius of the scratching brush, in pixels | | `threshold` | `number` | `0.55` | Fraction of the foil (0–1) that must be cleared before the rest falls away | | `coverFrom` | `string` | `"#9ca3af"` | Start colour of the foil gradient | | `coverTo` | `string` | `"#4b5563"` | End colour of the foil gradient | | `label` | `string` | `"Scratch here"` | Prompt printed on the foil, scratched away with it | | `onComplete` | `() => void` | `-` | Fired once, when the threshold is crossed | | `className` | `string` | `''` | Additional CSS classes applied to the card | ## Example usage ```tsx "use client"; import { useState } from "react"; import { ScratchToReveal } from "@/components/demo/component/scratch-to-reveal"; const ScratchToRevealUsage = () => { const [won, setWon] = useState(false); return (

setWon(true)} >

You won

BEATS-30

30% off, one use only

{won ? "Nice. The rest fell away on its own." : "Drag across the foil."}

); }; export default ScratchToRevealUsage; ``` ## Source Save as `components/ui/scratch-to-reveal.tsx`. ```tsx "use client"; import { motion, useReducedMotion } from "motion/react"; import { useCallback, useEffect, useRef, useState, type KeyboardEvent, type PointerEvent, type ReactNode, } from "react"; import { cn } from "@/lib/utils"; interface ScratchToRevealProps { children: ReactNode; /** Width of the scratch area, in pixels. */ width?: number; /** Height of the scratch area, in pixels. */ height?: number; /** Radius of the scratching brush, in pixels. */ brushSize?: number; /** Fraction (0–1) that must be cleared before the rest falls away. */ threshold?: number; /** Foil gradient, from top-left to bottom-right. */ coverFrom?: string; coverTo?: string; /** Prompt printed on the foil. Scratched away with everything else. */ label?: string; /** Fired once, when the threshold is crossed. */ onComplete?: () => void; className?: string; } /** Sample every 16th pixel: precise to well under a percent, 16× cheaper. */ const SAMPLE_STRIDE = 16; /** * A scratch card: drag over the foil to rub it away and reveal what is under * it, which falls away on its own once enough has been cleared. * * Erasing is a canvas composite (`destination-out`) rather than a mask built * from tracked points, so the cost of a scratch is constant no matter how long * the user keeps dragging. * * The foil is also a keyboard target. A control that can only be operated by * dragging a pointer across it is unusable to anyone who does not have one, so * Enter and Space reveal the content outright. */ export function ScratchToReveal({ children, width = 300, height = 200, brushSize = 22, threshold = 0.55, coverFrom = "#9ca3af", coverTo = "#4b5563", label = "Scratch here", onComplete, className = "", }: ScratchToRevealProps) { const canvasRef = useRef(null); const lastPoint = useRef<{ x: number; y: number } | null>(null); const moveCount = useRef(0); const [revealed, setRevealed] = useState(false); const prefersReducedMotion = useReducedMotion(); // Read through a ref so the drawing effect never re-runs when the parent // passes a new inline callback. const onCompleteRef = useRef(onComplete); useEffect(() => { onCompleteRef.current = onComplete; }, [onComplete]); const finish = useCallback(() => { setRevealed((already) => { if (!already) onCompleteRef.current?.(); return true; }); }, []); /** * The drawing context, always requested with the same attributes. * * `willReadFrequently` has to be set on the call that *creates* the context. * Later calls return the existing one and ignore their options, so asking * for it in only the read path would silently do nothing. */ const getContext = () => canvasRef.current?.getContext("2d", { willReadFrequently: true }) ?? null; /** Paint the foil. Re-runs if the card is resized or restyled. */ useEffect(() => { const canvas = canvasRef.current; const context = canvas?.getContext("2d", { willReadFrequently: true }); if (!canvas || !context) return; context.globalCompositeOperation = "source-over"; // Back the canvas at device resolution so the scratched edge is crisp on // a retina screen, then work in CSS pixels for everything after. const ratio = window.devicePixelRatio || 1; canvas.width = Math.floor(width * ratio); canvas.height = Math.floor(height * ratio); context.setTransform(ratio, 0, 0, ratio, 0, 0); const gradient = context.createLinearGradient(0, 0, width, height); gradient.addColorStop(0, coverFrom); gradient.addColorStop(1, coverTo); context.fillStyle = gradient; context.fillRect(0, 0, width, height); // Diagonal hatching gives the foil a texture, so a partly scratched card // reads as a surface being removed rather than a shape being drawn. context.strokeStyle = "rgba(255, 255, 255, 0.07)"; context.lineWidth = 6; for (let x = -height; x < width; x += 18) { context.beginPath(); context.moveTo(x, 0); context.lineTo(x + height, height); context.stroke(); } if (label) { context.fillStyle = "rgba(255, 255, 255, 0.85)"; context.font = "600 13px ui-sans-serif, system-ui, -apple-system, sans-serif"; context.textAlign = "center"; context.textBaseline = "middle"; context.fillText(label, width / 2, height / 2); } }, [width, height, coverFrom, coverTo, label]); /** Share of the foil already erased, from the canvas' own alpha channel. */ const clearedFraction = () => { const canvas = canvasRef.current; const context = getContext(); if (!canvas || !context) return 0; const { data } = context.getImageData(0, 0, canvas.width, canvas.height); let cleared = 0; let total = 0; for (let i = 3; i < data.length; i += 4 * SAMPLE_STRIDE) { total++; if ((data[i] ?? 0) < 128) cleared++; } return total === 0 ? 0 : cleared / total; }; const scratch = (x: number, y: number) => { const context = getContext(); if (!context) return; context.globalCompositeOperation = "destination-out"; context.lineCap = "round"; context.lineJoin = "round"; context.lineWidth = brushSize * 2; // Under `destination-out` it is the *source alpha* that erases, and the // context still holds the translucent white the foil's hatching and label // were painted with; leaving it would rub away 7% of the foil per stroke. context.strokeStyle = "#000"; context.fillStyle = "#000"; const from = lastPoint.current ?? { x, y }; context.beginPath(); context.moveTo(from.x, from.y); context.lineTo(x, y); context.stroke(); // A dot as well as the segment, so a tap with no movement still erases. context.beginPath(); context.arc(x, y, brushSize, 0, Math.PI * 2); context.fill(); lastPoint.current = { x, y }; }; const handlePointerDown = (event: PointerEvent) => { if (revealed) return; // Capture keeps the scratch going when the pointer leaves the card // mid-drag, instead of stranding a half-finished stroke. event.currentTarget.setPointerCapture(event.pointerId); lastPoint.current = null; const bounds = event.currentTarget.getBoundingClientRect(); scratch(event.clientX - bounds.left, event.clientY - bounds.top); }; const handlePointerMove = (event: PointerEvent) => { if (revealed || !event.currentTarget.hasPointerCapture(event.pointerId)) { return; } const bounds = event.currentTarget.getBoundingClientRect(); scratch(event.clientX - bounds.left, event.clientY - bounds.top); // Reading pixels back is the expensive half of this component, so it runs // on every eighth move rather than every one. if (++moveCount.current % 8 === 0 && clearedFraction() >= threshold) { finish(); } }; const handlePointerUp = (event: PointerEvent) => { event.currentTarget.releasePointerCapture(event.pointerId); lastPoint.current = null; if (!revealed && clearedFraction() >= threshold) finish(); }; const handleKeyDown = (event: KeyboardEvent) => { if (event.key !== "Enter" && event.key !== " ") return; event.preventDefault(); finish(); }; return (

{children}

); } export default ScratchToReveal; ``` ## Credits Written by [Claude Code](https://claude.com/claude-code). --- # Scroll Progress The ScrollProgress component fills a thin bar as the reader moves through a page or a panel, scaling a single transform rather than resizing an element so it costs nothing on the scroll frame. - **Category:** Component - **Docs:** https://uibeats.com/docs/component/scroll-progress - **Registry:** https://uibeats.com/r/scroll-progress.json - **License:** MIT - **npm dependencies:** `motion` ## Installation ```bash npx shadcn@latest add https://uibeats.com/r/scroll-progress.json ``` Or install the dependencies and copy the source below: ```bash npm install motion ``` ## When to use For long reads where the scrollbar alone does not answer how much is left. Pass a container to track a panel, or omit it to track the whole page. ## Props | Prop | Type | Default | Description | | --- | --- | --- | --- | | `container` | `RefObject` | `-` | Scroll container to track. Omit to track the window, which also switches the bar from absolute to fixed positioning | | `height` | `number` | `3` | Thickness of the bar, in pixels | | `color` | `string` | `var(--primary)` | Any CSS colour or gradient | | `position` | `'top' \| 'bottom'` | `top` | Which edge of the container the bar sits on | | `smooth` | `boolean` | `true` | Ease the bar toward the true position with a spring instead of tracking raw scroll deltas | | `className` | `string` | `''` | Additional CSS classes for styling | ## Example usage ```tsx "use client"; import { useRef } from "react"; import { ScrollProgress } from "@/components/demo/component/scroll-progress"; const ARTICLE = [ "Motion is a language, and most interfaces speak it badly.", "A transition that runs too long reads as lag. One that skips a frame reads as a bug.", "The fix is to move only what actually changed, and to move it the shortest distance that still explains itself.", "Everything else holds still, so the one thing that moved is the thing you notice.", ]; const ScrollProgressUsage = () => { const scrollArea = useRef(null); return ( // The bar wraps the scroll area rather than sitting inside it, so it stays // put while the text moves. Drop `container` to track the whole page.

On motion

{ARTICLE.map((paragraph) => (

{paragraph}

))}

); }; export default ScrollProgressUsage; ``` ## Source Save as `components/ui/scroll-progress.tsx`. ```tsx "use client"; import type { RefObject } from "react"; import { motion, useReducedMotion, useScroll, useSpring } from "motion/react"; import { cn } from "@/lib/utils"; interface ScrollProgressProps { /** * Scroll container to track. Omit to track the window. * * With a container the bar is positioned `absolute`, so it belongs inside a * `relative` wrapper *around* the scroll area rather than inside the area * itself: a bar inside the scroller would scroll away with the content. */ container?: RefObject; /** Thickness of the bar, in pixels. */ height?: number; /** Any CSS colour or gradient. */ color?: string; position?: "top" | "bottom"; /** Ease the bar toward the true position instead of tracking it exactly. */ smooth?: boolean; className?: string; } /** * A bar that fills as its scroll container is read. * * The bar is scaled along X rather than resized: `scaleX` is a compositor-only * transform, so the browser never runs layout for a value that changes on every * scroll frame, and the whole thing costs nothing on the main thread. * * `smooth` runs the progress through a spring. That is the difference between a * bar that judders with a trackpad's raw deltas and one that glides, and it * matters most on exactly the long pages this component is for. */ export function ScrollProgress({ container, height = 3, color = "var(--primary)", position = "top", smooth = true, className = "", }: ScrollProgressProps) { const { scrollYProgress } = useScroll(container ? { container } : undefined); const smoothed = useSpring(scrollYProgress, { stiffness: 120, damping: 26, restDelta: 0.001, }); const prefersReducedMotion = useReducedMotion(); /* * The bar itself survives reduced motion: it moves only because the reader * is scrolling, and pinning it would just make it wrong. The spring does * not: it keeps travelling after the scroll has stopped, which is motion the * reader did not ask for and cannot stop. */ const followsSpring = smooth && !prefersReducedMotion; return ( ); } export default ScrollProgress; ``` ## Credits Written by [Claude Code](https://claude.com/claude-code). --- # Shimmer Effect The ShimmerEffect component creates a shimmering animation, ideal for loading placeholders or skeleton screens. - **Category:** Component - **Docs:** https://uibeats.com/docs/component/shimmer-effect - **Registry:** https://uibeats.com/r/shimmer-effect.json - **License:** MIT - **npm dependencies:** `motion` ## Installation ```bash npx shadcn@latest add https://uibeats.com/r/shimmer-effect.json ``` Or install the dependencies and copy the source below: ```bash npm install motion ``` ## When to use Use for loading states shaped like the content that will replace them. A placeholder that matches the final layout feels faster than a spinner because nothing shifts when the data arrives. ## Props | Prop | Type | Default | Description | | --- | --- | --- | --- | | `width` | `string \| number` | `'100%'` | Width of the shimmer effect | | `height` | `string \| number` | `'1rem'` | Height of the shimmer effect | | `borderRadius` | `string \| number` | `'0.375rem'` | Border radius of the shimmer effect | | `duration` | `number` | `1.5` | Duration of one shimmer animation cycle (in seconds) | | `className` | `string` | `''` | Additional CSS classes for styling | ## Example usage ```tsx import React from "react"; import ShimmerEffect from "@/components/demo/component/shimmer-effect"; const ShimmerEffectUsage = () => { return ; }; export default ShimmerEffectUsage; ``` ## Source Save as `components/ui/shimmer-effect.tsx`. ```tsx "use client"; import { motion, useReducedMotion } from "motion/react"; interface ShimmerEffectProps { width?: string | number; height?: string | number; borderRadius?: string | number; /** Seconds for one sweep. */ duration?: number; className?: string; } /** * A loading placeholder with a sweeping highlight. * * Both colours are derived from `currentColor`, so the placeholder works on a * dark surface as well as a light one. The original hardcoded a black base and * a white sweep, which disappeared entirely in dark mode. */ export function ShimmerEffect({ width = "100%", height = "1rem", borderRadius = "0.375rem", duration = 1.5, className = "", }: ShimmerEffectProps) { const prefersReducedMotion = useReducedMotion(); return ( ); } export default ShimmerEffect; ``` ## Credits Written by [Michael](https://github.com/lappemic). --- # Terminal The Terminal component replays a shell session, typing the commands character by character and printing everything else whole, with the pause sitting in front of each output line where the work would have happened. - **Category:** Component - **Docs:** https://uibeats.com/docs/component/terminal - **Registry:** https://uibeats.com/r/terminal.json - **License:** MIT - **npm dependencies:** `motion` ## Installation ```bash npx shadcn@latest add https://uibeats.com/r/terminal.json ``` Or install the dependencies and copy the source below: ```bash npm install motion ``` ## When to use On a landing page for anything installed from a command line, where showing the install is more convincing than describing it. Keep the session to what a reader can follow at a glance: a transcript long enough to need scrolling has stopped being a demo and become documentation in the wrong place. ## Props | Prop | Type | Default | Description | | --- | --- | --- | --- | | `lines` | `TerminalLine[]` | `-` | The session to replay, in order (required) | | `typingSpeed` | `number` | `0.03` | Seconds per character while a command types | | `lineDelay` | `number` | `0.5` | Seconds between one line finishing and the next starting | | `loop` | `boolean` | `true` | Replay the session from the top once it has finished | | `loopDelay` | `number` | `2.5` | Seconds the finished session is held before it replays | | `chrome` | `boolean` | `true` | Show the window chrome above the output | | `title` | `string` | `bash` | Title shown in the chrome bar | | `className` | `string` | `''` | Additional CSS classes for styling | | `TerminalLine: kind` | `'command' \| 'output' \| 'success' \| 'error'` | `output` | command types out behind a prompt; the rest appear whole | | `TerminalLine: text` | `string` | `-` | The line itself | ## Example usage ```tsx "use client"; import { Terminal } from "@/components/demo/component/terminal"; const session = [ { kind: "command" as const, text: "npx shadcn@latest add terminal.json" }, { kind: "output" as const, text: "Checking registry..." }, { kind: "output" as const, text: "Installing dependencies: motion" }, { kind: "output" as const, text: "Writing components/ui/terminal.tsx" }, { kind: "success" as const, text: "Done. One file, yours to edit." }, ]; const TerminalUsage = () => { return (

); }; export default TerminalUsage; ``` ## Source Save as `components/ui/terminal.tsx`. ```tsx "use client"; import { motion, useReducedMotion } from "motion/react"; import { useEffect, useState } from "react"; import { cn } from "@/lib/utils"; interface TerminalLine { /** `command` types out behind a prompt; the rest appear whole. */ kind?: "command" | "output" | "success" | "error"; text: string; } interface TerminalProps { lines: TerminalLine[]; /** Seconds per character while a command types. */ typingSpeed?: number; /** Seconds between one line finishing and the next starting. */ lineDelay?: number; /** Replay the session from the top once it has finished. */ loop?: boolean; /** Seconds the finished session is held before it replays. */ loopDelay?: number; /** Show the window chrome above the output. */ chrome?: boolean; /** Title shown in the chrome bar. */ title?: string; className?: string; } const TONE: Record = { command: "text-foreground", output: "text-muted-foreground", success: "text-emerald-500", error: "text-destructive", }; /** * A terminal that replays a session, typing the commands and printing the rest. * * Only commands type. Output arriving one character at a time is the thing * that makes most of these read as fake: a real program prints a line at once, * and the pause before it is where the work happened. So `lineDelay` sits in * front of an output line rather than behind it, which is what turns dead time * into something that looks like compilation. * * The schedule is one timer at a time, re-armed from the state it just * produced, rather than a list of timeouts queued up front. A queue cannot be * retimed once the reader changes the speed, and cannot be cancelled cleanly * when the component unmounts mid-run. It also means the reader's next timing * change takes effect on the next line rather than restarting the session. * * With the preference set the whole session is already printed and no timer is * ever armed. That is derived at render rather than written into state, so * there is no frame where the transcript is empty because the effect that * fills it has not run yet. */ export function Terminal({ lines, typingSpeed = 0.03, lineDelay = 0.5, loop = true, loopDelay = 2.5, chrome = true, title = "bash", className = "", }: TerminalProps) { const prefersReducedMotion = useReducedMotion(); const [progress, setProgress] = useState({ line: 0, chars: 0 }); useEffect(() => { if (prefersReducedMotion) return; if (progress.line >= lines.length) { if (!loop) return; const id = setTimeout( () => setProgress({ line: 0, chars: 0 }), loopDelay * 1000, ); return () => clearTimeout(id); } const current = lines[progress.line]; if (!current) return; if (current.kind === "command" && progress.chars < current.text.length) { const id = setTimeout( () => setProgress((state) => ({ ...state, chars: state.chars + 1 })), typingSpeed * 1000, ); return () => clearTimeout(id); } const id = setTimeout( () => setProgress((state) => ({ line: state.line + 1, chars: 0 })), lineDelay * 1000, ); return () => clearTimeout(id); }, [ progress, lines, typingSpeed, lineDelay, loop, loopDelay, prefersReducedMotion, ]); const printed = prefersReducedMotion ? lines.length : progress.line; const typing = prefersReducedMotion ? undefined : lines[progress.line]; const isTyping = typing?.kind === "command"; return (

{chrome ? (

) : null} {/* * Every line is in the DOM from the first render; the ones that have not * been reached yet are held at `opacity-0`. * * Not a live region, and not a growing list. A live region would * re-announce the entire session on every loop, forever, which is the * kind of thing that gets a screen reader turned off rather than a * component admired. At zero opacity the text stays in the accessibility * tree, so the transcript reads in full at any point in the animation. * And because the lines are laid out from the start, the box does not * grow a row at a time and shove the page around beneath it. */}

{lines.map((line, index) => { const isCurrent = index === printed && isTyping; const prompt = line.kind === "command" ? ( $ ) : null; if (isCurrent) { return (

{prompt} {/* * The half-typed text is a picture of the full line, which is * already available to a reader who is not watching it. */} {line.text}

); } return (

= printed && "opacity-0", )} > {prompt} {line.text}

); })}

); } export default Terminal; ``` ## Credits Written by [Claude Code](https://claude.com/claude-code). --- # Timeline The Timeline component lays events down a vertical rail that fills as the reader scrolls through them, scaling a single element rather than resizing it so the fill costs nothing on the main thread. - **Category:** Component - **Docs:** https://uibeats.com/docs/component/timeline - **Registry:** https://uibeats.com/r/timeline.json - **License:** MIT - **npm dependencies:** `motion` ## Installation ```bash npx shadcn@latest add https://uibeats.com/r/timeline.json ``` Or install the dependencies and copy the source below: ```bash npm install motion ``` ## When to use For a sequence where the order carries meaning: a changelog, a roadmap, an onboarding walkthrough, a company history. A list of items that merely happen to be numbered is better as a list: the rail promises the reader that each entry follows from the one above it. ## Props | Prop | Type | Default | Description | | --- | --- | --- | --- | | `items` | `TimelineItem[]` | `-` | The events to render, in order (required) | | `container` | `RefObject` | `-` | Scroll container to track. Omit to track the window | | `nodeSize` | `number` | `12` | Diameter of each node, in pixels | | `smooth` | `boolean` | `true` | Ease the rail toward the true position instead of tracking it exactly | | `className` | `string` | `''` | Additional CSS classes applied to the list | | `TimelineItem: id` | `string` | `-` | Unique key for the entry | | `TimelineItem: title` | `string` | `-` | Heading for the entry | | `TimelineItem: meta` | `string` | `-` | Small line above the title: a date, a version, a stage | | `TimelineItem: body` | `string` | `-` | The entry's copy | ## Example usage ```tsx "use client"; import { useRef } from "react"; import { Timeline } from "@/components/demo/component/timeline"; const milestones = [ { id: "scaffold", meta: "Step one", title: "Scaffold the component", body: "One command writes the four files and edits the three registries that have to know about it.", }, { id: "build", meta: "Step two", title: "Write the animation", body: "Motion lives in the same file as the markup, so there is one place to change how it feels.", }, { id: "document", meta: "Step three", title: "Fill in the props table", body: "The table is the source of truth: the playground controls are derived from it, not written twice.", }, { id: "ship", meta: "Step four", title: "Open the pull request", body: "The suite checks the reduced-motion guard, the title budget and a pixel baseline before it merges.", }, ]; const TimelineUsage = () => { const scrollArea = useRef(null); return (

); }; export default TimelineUsage; ``` ## Source Save as `components/ui/timeline.tsx`. ```tsx "use client"; import { motion, useReducedMotion, useScroll, useSpring, useTransform, } from "motion/react"; import { useRef, type RefObject } from "react"; import { cn } from "@/lib/utils"; interface TimelineItem { id: string; title: string; /** Small line above the title: a date, a version, a stage. */ meta?: string; body: string; } interface TimelineProps { items: TimelineItem[]; /** * Scroll container to track. Omit to track the window. * * The rail is measured against this, so a timeline inside a scrolling panel * has to name that panel or the fill will follow the page instead. */ container?: RefObject; /** Diameter of each node, in pixels. */ nodeSize?: number; /** Ease the rail toward the true position instead of tracking it exactly. */ smooth?: boolean; className?: string; } /** * A vertical list of events with a rail that fills as it is read. * * The fill is `scaleY` on a single element rather than a changing height, so * the browser never runs layout for a value that updates on every scroll * frame. Its progress comes from the list's own position in the scroller, * which is what keeps the filled length honest: the rail is as full as the * reader is far through the entries, not as far as some fraction of the page. * * The `offset` finishes the fill before the last entry leaves the viewport. * Measuring to `end end` means the rail only completes once the list's bottom * edge reaches the bottom of the screen, which for a list that ends above the * fold never happens at all. * * Entries reveal on entry rather than on the rail's progress so that each one * animates once, in place, however the reader arrives at it. */ export function Timeline({ items, container, nodeSize = 12, smooth = true, className = "", }: TimelineProps) { const prefersReducedMotion = useReducedMotion(); const railRef = useRef(null); const { scrollYProgress } = useScroll({ target: railRef, ...(container ? { container } : {}), offset: ["start 85%", "end 65%"], }); const smoothed = useSpring(scrollYProgress, { stiffness: 120, damping: 26, restDelta: 0.001, }); /* * The fill survives reduced motion: it moves only because the reader is * scrolling, and pinning it at zero would leave a rail that is permanently * wrong. The spring does not: it keeps travelling after the scroll stops. */ const scaleY = useTransform( smooth && !prefersReducedMotion ? smoothed : scrollYProgress, (value) => Math.max(value, 0), ); return (

); } export default Timeline; ``` ## Credits Written by [Claude Code](https://claude.com/claude-code). --- # Flip Words The FlipWords component cycles one slot in a sentence through a list of words, blurring each out as the next rises into its place and animating the width difference so the rest of the line never jumps. - **Category:** Text - **Docs:** https://uibeats.com/docs/text/flip-words - **Registry:** https://uibeats.com/r/flip-words.json - **License:** MIT - **npm dependencies:** `motion` ## Installation ```bash npx shadcn@latest add https://uibeats.com/r/flip-words.json ``` Or install the dependencies and copy the source below: ```bash npm install motion ``` ## When to use For a hero line that has to name several audiences or use cases without listing them all at once. Keep the words a similar length and make the sentence true for every one of them: a reader who arrives mid-cycle sees exactly one, so any word that only works as part of the set is a word that fails for most visitors. ## Props | Prop | Type | Default | Description | | --- | --- | --- | --- | | `words` | `string[]` | `-` | The words to cycle through, in order (required) | | `interval` | `number` | `2` | Seconds each word is held before the next one arrives | | `duration` | `number` | `0.5` | Seconds the swap itself takes | | `className` | `string` | `''` | Additional CSS classes applied to the rotating slot | ## Example usage ```tsx "use client"; import { FlipWords } from "@/components/demo/text/flip-words"; const FlipWordsUsage = () => { return (

Built for{" "}

); }; export default FlipWordsUsage; ``` ## Source Save as `components/ui/flip-words.tsx`. ```tsx "use client"; import { AnimatePresence, motion, useReducedMotion } from "motion/react"; import { useEffect, useState } from "react"; import { cn } from "@/lib/utils"; interface FlipWordsProps { words: string[]; /** Seconds each word is held before the next one arrives. */ interval?: number; /** Seconds the swap itself takes. */ duration?: number; className?: string; } /** * One slot in a sentence that cycles through a list of words. * * `mode="popLayout"` is what makes the sentence hold together: it takes the * outgoing word out of the flow the moment it starts leaving, so the incoming * one is already in position rather than waiting for an empty box to collapse. * The `layout` on the wrapper then animates the width difference, so the text * after the slot slides rather than jumping: the thing that makes most * word-rotators look broken mid-sentence. * * With the preference set the list stops advancing altogether. A word that * changes under the reader on a timer is motion whether or not the change * itself is animated, and the sentence still reads with the first one in * place. */ export function FlipWords({ words, interval = 2, duration = 0.5, className = "", }: FlipWordsProps) { const prefersReducedMotion = useReducedMotion(); const [index, setIndex] = useState(0); useEffect(() => { if (prefersReducedMotion || words.length < 2) return; const id = setInterval( () => setIndex((current) => (current + 1) % words.length), interval * 1000, ); return () => clearInterval(id); }, [interval, prefersReducedMotion, words.length]); // A shrinking list can leave the index past the end between renders. const word = words[index % Math.max(words.length, 1)] ?? ""; return ( {word} ); } export default FlipWords; ``` ## Credits Written by [Claude Code](https://claude.com/claude-code). --- # Gradient Text The GradientText component paints a line of text with a colour ramp that travels across it on a loop, so a headline word carries the accent colour as movement rather than as a flat fill. - **Category:** Text - **Docs:** https://uibeats.com/docs/text/gradient-text - **Registry:** https://uibeats.com/r/gradient-text.json - **License:** MIT - **npm dependencies:** `motion` ## Installation ```bash npx shadcn@latest add https://uibeats.com/r/gradient-text.json ``` Or install the dependencies and copy the source below: ```bash npm install motion ``` ## When to use For the one word in a headline that should carry the eye: a product name, the verb in a value proposition. Use it on a short span inside a larger sentence rather than on the whole line: a paragraph of moving gradient is unreadable, and the effect stops meaning anything once everything has it. ## Props | Prop | Type | Default | Description | | --- | --- | --- | --- | | `text` | `string` | `-` | The text to paint (required) | | `from` | `string` | `'var(--brand)'` | First and last stop of the gradient. Any CSS colour | | `via` | `string` | `'var(--accent-pink)'` | Middle stop: the colour that travels across the text | | `duration` | `number` | `4` | Seconds for one pass of the gradient | | `className` | `string` | `''` | Additional CSS classes for styling | ## Example usage ```tsx "use client"; import { GradientText } from "@/components/demo/text/gradient-text"; const GradientTextUsage = () => { return (

Supercharge your

); }; export default GradientTextUsage; ``` ## Source Save as `components/ui/gradient-text.tsx`. ```tsx "use client"; import { motion, useReducedMotion } from "motion/react"; import { cn } from "@/lib/utils"; interface GradientTextProps { text: string; /** First and last stop of the gradient. Any CSS colour. */ from?: string; /** Middle stop: the colour that travels across the text. */ via?: string; /** Seconds for one pass of the gradient. */ duration?: number; className?: string; } /** * Text painted with a gradient that travels across it. * * The ramp is mirrored (`from, via, from, via, from`) and the background is * sized to twice the element, so shifting the position by exactly one image * width returns to the frame it started on. That is what makes the loop * seamless without a reverse: a one-directional sweep that snaps back at the * end reads as a dropped frame, and `repeatType: "mirror"` reads as a * pendulum rather than a sweep. * * Both colours default to theme tokens rather than hex, so installed into a * project with its own accent the text picks that up instead of ours. */ export function GradientText({ text, from = "var(--brand)", via = "var(--accent-pink)", duration = 4, className = "", }: GradientTextProps) { const prefersReducedMotion = useReducedMotion(); return ( {text} ); } export default GradientText; ``` ## Credits Written by [Claude Code](https://claude.com/claude-code). --- # Gravity Text Swap The GravityTextSwap component drops characters into place under a gravity-like fall, so one word gives way to the next instead of simply being replaced. - **Category:** Text - **Docs:** https://uibeats.com/docs/text/gravity-text-swap - **Registry:** https://uibeats.com/r/gravity-text-swap.json - **License:** MIT - **npm dependencies:** `motion` ## Installation ```bash npx shadcn@latest add https://uibeats.com/r/gravity-text-swap.json ``` Or install the dependencies and copy the source below: ```bash npm install motion ``` ## When to use For a headline that cycles through a few words: audiences, use cases, verbs. Keep the words a similar length so the surrounding layout does not jump on every swap. ## Props | Prop | Type | Default | Description | | --- | --- | --- | --- | | `textArray` | `string[]` | `-` | Array of strings to animate between | | `duration` | `number` | `0.5` | Duration of each word's animation (in seconds) | | `pauseDuration` | `number` | `2` | Duration to pause on each word before transitioning (in seconds) | | `className` | `string` | `''` | Additional CSS classes for styling | ## Example usage ```tsx import React from "react"; import GravityTextSwap from "@/components/demo/text/gravity-text-swap"; const GravityTextSwapUsage = () => { return ( ); }; export default GravityTextSwapUsage; ``` ## Source Save as `components/ui/gravity-text-swap.tsx`. ```tsx "use client"; import React, { useState, useEffect } from "react"; import { motion, AnimatePresence, useReducedMotion } from "motion/react"; import { cn } from "@/lib/utils"; interface GravityTextSwapProps { textArray: string[]; duration?: number; pauseDuration?: number; className?: string; } const GravityTextSwap: React.FC = ({ textArray, duration = 0.5, pauseDuration = 2, className = "", }) => { const [, setCurrentIndex] = useState(0); const [currentText, setCurrentText] = useState(textArray[0]); const prefersReducedMotion = useReducedMotion(); useEffect(() => { if (textArray.length <= 1) return; const intervalId = setInterval( () => { setCurrentIndex((prevIndex) => { const nextIndex = (prevIndex + 1) % textArray.length; setCurrentText(textArray[nextIndex] ?? ""); return nextIndex; }); }, (duration + pauseDuration) * 1000, ); return () => clearInterval(intervalId); }, [textArray, duration, pauseDuration]); return (

{/* The phrases still cycle under reduced motion; stopping them would hide every phrase after the first, which is content loss rather than calm. What goes is the gravity: no per-character drop and no stagger, leaving the crossfade on the wrapper above to carry the swap. */} {prefersReducedMotion ? currentText : (currentText ?? "").split("").map((char, index) => ( {char} ))}

); }; export default GravityTextSwap; ``` ## Credits Written by [Michael](https://github.com/lappemic). --- # Number Ticker The NumberTicker component counts a number up when it scrolls into view, with locale-aware formatting. - **Category:** Text - **Docs:** https://uibeats.com/docs/text/number-ticker - **Registry:** https://uibeats.com/r/number-ticker.json - **License:** MIT - **npm dependencies:** `motion` ## Installation ```bash npx shadcn@latest add https://uibeats.com/r/number-ticker.json ``` Or install the dependencies and copy the source below: ```bash npm install motion ``` ## When to use For statistics that are the point of a section: users, uptime, revenue, downloads. The count implies growth, so it flatters a number meant to impress and is wasted on an ordinary one. Give it room to be read. A ticker inside a dense table is just a distraction. ## Props | Prop | Type | Default | Description | | --- | --- | --- | --- | | `value` | `number` | `-` | The value to count to (required) | | `from` | `number` | `0` | Where the count starts | | `decimals` | `number` | `0` | Decimal places to display | | `prefix` | `string` | `''` | Text placed before the number, e.g. a currency symbol | | `suffix` | `string` | `''` | Text placed after the number, e.g. a percent sign | | `once` | `boolean` | `true` | Count only the first time it scrolls into view | | `locale` | `string` | `'en-US'` | BCP 47 locale used for grouping separators | | `className` | `string` | `''` | Additional CSS classes for styling | ## Example usage ```tsx "use client"; import { NumberTicker } from "@/components/demo/text/number-ticker"; const NumberTickerUsage = () => { return (

Downloads

Uptime

); }; export default NumberTickerUsage; ``` ## Source Save as `components/ui/number-ticker.tsx`. ```tsx "use client"; import { useInView, useMotionValueEvent, useSpring, useReducedMotion, } from "motion/react"; import { useEffect, useRef } from "react"; interface NumberTickerProps { /** The value to count to. */ value: number; /** Where the count starts. */ from?: number; decimals?: number; prefix?: string; suffix?: string; /** Count only the first time it scrolls into view. */ once?: boolean; /** BCP 47 locale for grouping separators. */ locale?: string; className?: string; } /** * A number that counts up when it scrolls into view. * * The animated digits are written straight to the DOM node rather than held * in state: a spring emits a value every frame, and re-rendering React sixty * times a second to print a number is wasted work. */ export function NumberTicker({ value, from = 0, decimals = 0, prefix = "", suffix = "", once = true, locale = "en-US", className = "", }: NumberTickerProps) { const ref = useRef(null); const isInView = useInView(ref, { once, margin: "0px 0px -20% 0px" }); const prefersReducedMotion = useReducedMotion(); const spring = useSpring(from, { damping: 40, stiffness: 90, restDelta: decimals > 0 ? 0.001 : 0.5, }); const format = (input: number) => `${prefix}${new Intl.NumberFormat(locale, { minimumFractionDigits: decimals, maximumFractionDigits: decimals, }).format(input)}${suffix}`; useEffect(() => { if (!isInView) return; if (prefersReducedMotion) { spring.jump(value); return; } spring.set(value); }, [isInView, prefersReducedMotion, spring, value]); useMotionValueEvent(spring, "change", (latest) => { const node = ref.current; if (!node) return; // firstChild is the visible span; see the markup below. const visible = node.firstChild as HTMLElement | null; if (visible) visible.textContent = format(latest); }); return ( {/* Only the settled value is announced. Without this, a screen reader would read out every intermediate number as the spring runs. */} {format(value)} ); } export default NumberTicker; ``` ## Credits Written by [Claude Code](https://claude.com/claude-code). --- # Scroll Reveal The ScrollReveal component lights up text word by word as the reader scrolls past it, tied to scroll position rather than a timer. - **Category:** Text - **Docs:** https://uibeats.com/docs/text/scroll-reveal - **Registry:** https://uibeats.com/r/scroll-reveal.json - **License:** MIT - **npm dependencies:** `motion` ## Installation ```bash npx shadcn@latest add https://uibeats.com/r/scroll-reveal.json ``` Or install the dependencies and copy the source below: ```bash npm install motion ``` ## When to use Best on a single statement you want read slowly: a mission line, a manifesto, a section opener. The reveal is bound to the scrollbar, so the reader sets the pace and can scroll back. Keep it to one or two sentences. A full paragraph turns reading into work. ## Props | Prop | Type | Default | Description | | --- | --- | --- | --- | | `children` | `string` | `-` | The text to reveal, as a plain string (required) | | `restingOpacity` | `number` | `0.15` | Opacity of a word before it is reached | | `spread` | `number` | `0.5` | How much of the viewport the reveal is spread across, 0-1 | | `className` | `string` | `''` | Additional CSS classes for styling | ## Example usage ```tsx "use client"; import { ScrollReveal } from "@/components/demo/text/scroll-reveal"; const ScrollRevealUsage = () => { return ( Scroll and every word arrives in turn, tied to the scrollbar rather than to a timer. ); }; export default ScrollRevealUsage; ``` ## Source Save as `components/ui/scroll-reveal.tsx`. ```tsx "use client"; import { motion, useScroll, useTransform, useReducedMotion, type MotionValue, } from "motion/react"; import { useRef } from "react"; interface ScrollRevealProps { children: string; /** Opacity of a word before it is reached. */ restingOpacity?: number; /** How much of the viewport the reveal is spread across, 0-1. */ spread?: number; className?: string; } /** * Text that lights up word by word as the reader scrolls past it. * * Each word maps its own slice of the container's scroll progress, so the * reveal tracks the scrollbar exactly: scroll back up and it un-reveals. * A time-based stagger would drift out of sync with the reader. */ export function ScrollReveal({ children, restingOpacity = 0.15, spread = 0.5, className = "", }: ScrollRevealProps) { const ref = useRef(null); const prefersReducedMotion = useReducedMotion(); const { scrollYProgress } = useScroll({ target: ref, offset: ["start 0.9", `end ${spread}`], }); const words = children.split(" "); if (prefersReducedMotion) { return

{children}

; } return (

{words.map((word, index) => { const start = index / words.length; const end = start + 1 / words.length; return ( {word} ); })}

); } interface WordProps { children: string; progress: MotionValue; range: [number, number]; restingOpacity: number; } function Word({ children, progress, range, restingOpacity }: WordProps) { const opacity = useTransform(progress, range, [restingOpacity, 1]); // A touch of blur on the way in makes the arrival read as focus rather than // as a flat fade. const filter = useTransform(progress, range, [ "blur(4px)", "blur(0px)", ] as const); return ( {children} ); } export default ScrollReveal; ``` ## Credits Written by [Claude Code](https://claude.com/claude-code). --- # Split Flap The SplitFlap component turns text into a mechanical departure board, each column riffling through the alphabet until it reaches its letter, a beat behind the column to its left. - **Category:** Text - **Docs:** https://uibeats.com/docs/text/split-flap - **Registry:** https://uibeats.com/r/split-flap.json - **License:** MIT - **npm dependencies:** `motion` ## Installation ```bash npx shadcn@latest add https://uibeats.com/r/split-flap.json ``` Or install the dependencies and copy the source below: ```bash npm install motion ``` ## When to use For a short headline or status line that changes on a timer, where watching it arrive is part of the appeal. Wrong for anything needed immediately. ## Props | Prop | Type | Default | Description | | --- | --- | --- | --- | | `text` | `string` | `-` | The word or phrase to land on. Change it and it re-flaps | | `charset` | `string` | `" A–Z 0–9 .,:'!?-"` | Characters the flaps cycle through, in order | | `interval` | `number` | `55` | Milliseconds each flap is held before turning to the next character | | `stagger` | `number` | `70` | Milliseconds each column waits behind the one to its left | | `className` | `string` | `''` | Additional CSS classes. Set the font size here; the flaps scale with it | ## Example usage ```tsx "use client"; import { useEffect, useState } from "react"; import { SplitFlap } from "@/components/demo/text/split-flap"; const board = ["DEPARTURES", "NOW BOARDING", "ON TIME", "UI BEATS"]; const SplitFlapUsage = () => { const [index, setIndex] = useState(0); useEffect(() => { const timer = setInterval( () => setIndex((current) => (current + 1) % board.length), 3200, ); return () => clearInterval(timer); }, []); return (

Every column flips until it finds its letter.

); }; export default SplitFlapUsage; ``` ## Source Save as `components/ui/split-flap.tsx`. ```tsx "use client"; import { motion, useReducedMotion } from "motion/react"; import { useEffect, useMemo, useRef, useState } from "react"; import { cn } from "@/lib/utils"; const DEFAULT_CHARSET = " ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789.,:'!?-"; /** One column of the board: what it shows, what it just turned over from. */ interface Flap { char: string; previous: string; /** Flips completed by this column. Doubles as the animation's key. */ flip: number; } interface SplitFlapProps { /** The word or phrase to land on. Change it and the board re-flaps. */ text: string; /** Characters the flaps cycle through, in order. */ charset?: string; /** Milliseconds each flap is held before turning to the next character. */ interval?: number; /** Milliseconds each column waits behind the one to its left. */ stagger?: number; className?: string; } /** * A mechanical split-flap board: every column riffles through the alphabet * until it reaches its letter, left to right. * * Columns advance one character per tick toward their target rather than * showing random glyphs, so the board always lands, and the ripple comes from * each column starting a beat after its neighbour, exactly as a real board's * motors do. * * Each cell renders exactly two flaps, the outgoing card and the incoming one, * keyed on the column's flip count. An `AnimatePresence` here would be the * obvious choice and the wrong one: at one flip every 55ms the exits cannot * retire faster than they arrive, and a spinning column ends up holding twenty * invisible cards it has already turned over. * * The flaps are decorative markup; the text itself is exposed once, to screen * readers, so a board mid-flip is never read out as gibberish. */ export function SplitFlap({ text, charset = DEFAULT_CHARSET, interval = 55, stagger = 70, className = "", }: SplitFlapProps) { const prefersReducedMotion = useReducedMotion(); const blank = charset[0] ?? " "; // Spread rather than `split("")`, so a character outside the basic plane // stays one flap instead of being torn into surrogate halves. const target = useMemo(() => [...text.toUpperCase()], [text]); const [cells, setCells] = useState(() => target.map(() => ({ char: blank, previous: blank, flip: 0 })), ); // The authoritative board state, so the ticking loop never has to read // through a closure over stale state. const board = useRef(cells); useEffect(() => { if (prefersReducedMotion) { board.current = target.map((char) => ({ char, previous: char, flip: 0, })); setCells(board.current); return; } // Carry over whatever is on the board, so a change of text flips from the // old word rather than resetting to blanks first. board.current = target.map( (_, column) => board.current[column] ?? { char: blank, previous: blank, flip: 0 }, ); setCells(board.current); let tick = 0; const timer = setInterval(() => { tick += 1; let settled = true; const next = [...board.current]; for (let column = 0; column < target.length; column++) { const startsAt = Math.round((column * stagger) / interval); const current = next[column]; const wanted = target[column] ?? blank; if (!current) continue; if (tick <= startsAt) { settled = false; continue; } if (current.char === wanted) continue; settled = false; const index = charset.indexOf(current.char); // A character the board cannot reach by cycling (punctuation outside // the charset) is set directly, so a column can never spin forever. const advanced = charset.includes(wanted) && index !== -1 ? (charset[(index + 1) % charset.length] ?? wanted) : wanted; next[column] = { char: advanced, previous: current.char, flip: current.flip + 1, }; } board.current = next; setCells(next); if (settled) clearInterval(timer); }, interval); return () => clearInterval(timer); }, [target, charset, interval, stagger, prefersReducedMotion, blank]); // Half a beat, so the incoming card has landed before the next one starts. const flipDuration = Math.min(interval / 1000, 0.12); // A blank flap still has to hold its cell open, so the space is // non-breaking rather than collapsible whitespace. const glyph = (char: string) => (char === " " ? "\u00A0" : char); return ( {text} {cells.map((cell, column) => ( {/* The card being turned over. Remounted on each flip by its key, so it replays without any presence bookkeeping. */} {cell.flip > 0 ? ( {glyph(cell.previous)} ) : null} {/* The card falling into place. */} 0 ? { rotateX: -75, opacity: 0 } : { opacity: 1 } } animate={{ rotateX: 0, opacity: 1 }} transition={{ duration: flipDuration, ease: "easeOut" }} // Hinged on the middle seam, which is what makes the character // read as a card turning over rather than a letter fading. style={{ transformOrigin: "center center" }} className="absolute inset-0 flex items-center justify-center leading-none" > {glyph(cell.char)} {/* The seam. A split-flap board is two half-cards; without the line across the middle this is just a letter in a box. */} ))} ); } export default SplitFlap; ``` ## Credits Written by [Claude Code](https://claude.com/claude-code). --- # Text Scramble The TextScramble component decodes text one character at a time, cycling through random glyphs before each letter settles into place. - **Category:** Text - **Docs:** https://uibeats.com/docs/text/text-scramble - **Registry:** https://uibeats.com/r/text-scramble.json - **License:** MIT - **npm dependencies:** `motion` ## Installation ```bash npx shadcn@latest add https://uibeats.com/r/text-scramble.json ``` Or install the dependencies and copy the source below: ```bash npm install motion ``` ## When to use A decode effect that suits technical and playful brands. It is decorative, so the settled text is what assistive technology announces. Keep the string short enough to finish before a reader looks away. ## Props | Prop | Type | Default | Description | | --- | --- | --- | --- | | `text` | `string` | `-` | The final text to decode to (required) | | `characters` | `string` | `'!<>-_\\/[]{}—=+*^?#'` | Pool of glyphs cycled through before a letter settles | | `speed` | `number` | `40` | Milliseconds between scramble frames | | `scrambleCount` | `number` | `6` | Frames each character scrambles before locking in | | `scrambleOnHover` | `boolean` | `true` | Re-run the effect when the pointer enters the text | | `className` | `string` | `''` | Additional CSS classes for styling | ## Example usage ```tsx "use client"; import { TextScramble } from "@/components/demo/text/text-scramble"; const TextScrambleUsage = () => { return ( ); }; export default TextScrambleUsage; ``` ## Source Save as `components/ui/text-scramble.tsx`. ```tsx "use client"; import { useCallback, useEffect, useRef, useState } from "react"; import { useReducedMotion } from "motion/react"; interface TextScrambleProps { text: string; /** Characters cycled through before a letter settles. */ characters?: string; /** Milliseconds between scramble frames. */ speed?: number; /** Frames each character scrambles before locking in. */ scrambleCount?: number; /** Re-run the effect whenever the pointer enters the text. */ scrambleOnHover?: boolean; className?: string; } const DEFAULT_CHARS = "!<>-_\\/[]{}—=+*^?#________"; /** * Decodes text one character at a time, cycling through random glyphs before * each letter settles. */ export function TextScramble({ text, characters = DEFAULT_CHARS, speed = 40, scrambleCount = 6, scrambleOnHover = true, className = "", }: TextScrambleProps) { const prefersReducedMotion = useReducedMotion(); const [display, setDisplay] = useState(text); const [renderedText, setRenderedText] = useState(text); const frameRef = useRef | null>(null); // React's "adjust state when a prop changes" pattern: resetting during render // rather than in an effect avoids a wasted commit with stale text on screen. if (text !== renderedText) { setRenderedText(text); setDisplay(text); } const stop = useCallback(() => { if (frameRef.current) { clearInterval(frameRef.current); frameRef.current = null; } }, []); /** * Starts the scramble interval. Deliberately performs no synchronous state * update, so it is safe to call from an effect body: the timer is the * external system the effect subscribes to. */ const run = useCallback(() => { if (prefersReducedMotion) return; stop(); let frame = 0; frameRef.current = setInterval(() => { const revealed = Math.floor(frame / scrambleCount); if (revealed >= text.length) { setDisplay(text); stop(); return; } const next = text .split("") .map((char, index) => { if (index < revealed || char === " ") return char; return ( characters[Math.floor(Math.random() * characters.length)] ?? char ); }) .join(""); setDisplay(next); frame += 1; }, speed); }, [characters, prefersReducedMotion, scrambleCount, speed, stop, text]); // `display` starts as the final text, so the server-rendered markup and the // reduced-motion path both show real, readable content. useEffect(() => { run(); return stop; }, [run, stop]); return ( {/* The settled text is what assistive tech announces; the scrambling frames are decorative noise. */} {text} ); } export default TextScramble; ``` ## Credits Written by [Claude Code](https://claude.com/claude-code). --- # Text Shine The TextShine component sweeps a coloured highlight across your text on a loop, drawing the eye without demanding a click. - **Category:** Text - **Docs:** https://uibeats.com/docs/text/text-shine - **Registry:** https://uibeats.com/r/text-shine.json - **License:** MIT - **npm dependencies:** `motion` ## Installation ```bash npx shadcn@latest add https://uibeats.com/r/text-shine.json ``` Or install the dependencies and copy the source below: ```bash npm install motion ``` ## When to use A one-line highlight for a headline, badge or price. Because it loops, use it once per view. Two shining elements compete and neither one wins. ## Props | Prop | Type | Default | Description | | --- | --- | --- | --- | | `text` | `string` | `-` | Text to be displayed (required) | | `shineColor` | `string` | `'#FFD700'` | Colour of the highlight that sweeps across the text | | `baseColor` | `string` | `'var(--foreground)'` | Colour of the text itself. Defaults to the theme foreground so it stays legible in both themes | | `duration` | `number` | `5` | Seconds for one sweep | | `className` | `string` | `''` | Additional CSS classes for styling | ## Example usage ```tsx "use client"; import { TextShine } from "@/components/demo/text/text-shine"; const TextShineUsage = () => { return ; }; export default TextShineUsage; ``` ## Source Save as `components/ui/text-shine.tsx`. ```tsx "use client"; import { motion, useAnimationControls, useReducedMotion } from "motion/react"; import { useCallback, useEffect, useRef } from "react"; interface TextShineProps { text: string; /** Colour of the highlight that sweeps across the text. */ shineColor?: string; /** Colour of the text itself. Any CSS colour, including a custom property. */ baseColor?: string; /** Seconds for one sweep. */ duration?: number; className?: string; } /** * Text with a highlight that sweeps across it. * * `baseColor` defaults to the theme's foreground rather than a hardcoded * `#222`, which was all but invisible against a dark background. Because the * text is painted with `background-clip: text`, the base colour has to be a * real colour value; `currentColor` resolves to `transparent` here. */ export function TextShine({ text, shineColor = "#FFD700", baseColor = "var(--foreground)", duration = 5, className = "", }: TextShineProps) { const controls = useAnimationControls(); const textRef = useRef(null); const prefersReducedMotion = useReducedMotion(); const updateAnimation = useCallback(() => { const element = textRef.current; if (!element || prefersReducedMotion) return; const textWidth = element.offsetWidth; controls.start({ backgroundPosition: [`${textWidth * -0.5}px`, `${textWidth * 1.25}px`], transition: { duration, ease: "linear", repeat: Infinity }, }); }, [controls, duration, prefersReducedMotion]); useEffect(() => { updateAnimation(); window.addEventListener("resize", updateAnimation); return () => window.removeEventListener("resize", updateAnimation); }, [updateAnimation]); return ( {text} ); } export default TextShine; ``` ## Credits Written by [Divyaswor](https://github.com/divyaswormakai). --- # Text Writer The TextWriter component creates a typing animation effect for text, where characters appear one by one to mimic real-time typing. - **Category:** Text - **Docs:** https://uibeats.com/docs/text/text-writer - **Registry:** https://uibeats.com/r/text-writer.json - **License:** MIT - **npm dependencies:** `motion` ## Installation ```bash npx shadcn@latest add https://uibeats.com/r/text-writer.json ``` Or install the dependencies and copy the source below: ```bash npm install motion ``` ## When to use For interfaces that should feel composed live: terminal output, AI responses, onboarding. Enable loop only where the text is decorative; re-typing content someone is trying to read is frustrating. ## Props | Prop | Type | Default | Description | | --- | --- | --- | --- | | `text` | `string` | `-` | The text to be animated (required) | | `delay` | `number` | `0.05` | Time delay between each character (in seconds) | | `className` | `string` | `''` | Additional CSS classes for styling | | `animationConfig` | `AnimationProps` | `{}` | Custom Framer Motion animation configuration | | `cursorColor` | `string` | `'currentColor'` | Color of the typing cursor | | `cursorWidth` | `string` | `'2px'` | Width of the typing cursor | | `cursorStyle` | `string` | `'solid'` | CSS border-style of the cursor | | `onComplete` | `() => void` | `() => {}` | Callback function executed when typing is complete | | `eraseOnComplete` | `boolean` | `false` | Whether to erase the text after completion | | `eraseDelay` | `number` | `2000` | Delay before erasing starts (in milliseconds) | | `loop` | `boolean` | `false` | Whether to loop the writing and erasing effect | ## Example usage ```tsx import React from "react"; import TextWriter from "@/components/demo/text/text-writer"; const TextWriterUsage = () => { return ( ); }; export default TextWriterUsage; ``` ## Source Save as `components/ui/text-writer.tsx`. ```tsx "use client"; import React, { useEffect, useRef, useState } from "react"; import { Easing, motion, useReducedMotion } from "motion/react"; interface TextWriterProps { text: string; delay?: number; className?: string; cursorColor?: string; cursorWidth?: string; cursorStyle?: string; eraseOnComplete?: boolean; eraseDelay?: number; loop?: boolean; } const TextWriter: React.FC = ({ text, delay = 0.05, className = "", // Was `#000`: a black caret on a dark background, i.e. invisible in dark // mode. `currentColor` matches whatever the text beside it is using. cursorColor = "currentColor", cursorWidth = "2px", cursorStyle = "solid", eraseOnComplete = false, eraseDelay = 2000, loop = false, }) => { const [displayText, setDisplayText] = useState(""); const [isWriting, setIsWriting] = useState(true); const textRef = useRef(null); const prefersReducedMotion = useReducedMotion(); const stepEasing: Easing = (t) => Math.floor(t * 2) / 2; /* * Reduced motion gets the whole sentence at once. * * This is the one component here where the animation withholds content * rather than decorating it: mid-effect, the DOM genuinely contains half a * word. Typing it out character by character (and, with `loop`, deleting it * again forever) is unreadable for anyone who asked the browser to stop * moving things, so they get the finished text and no cursor. * * Derived during render rather than pushed into state from the effect: the * typing state is simply not consulted, so there is nothing to synchronise * and no cascading render to trigger. */ const shownText = prefersReducedMotion ? text : displayText; const showCursor = isWriting && !prefersReducedMotion; useEffect(() => { let timeoutId: NodeJS.Timeout; let currentIndex = 0; if (prefersReducedMotion) return; const writeText = () => { if (currentIndex <= text.length) { setDisplayText(text.slice(0, currentIndex)); currentIndex++; timeoutId = setTimeout(writeText, delay * 1000); } else { setIsWriting(false); if (eraseOnComplete || loop) { timeoutId = setTimeout(eraseText, eraseDelay); } } }; const eraseText = () => { setIsWriting(true); if (currentIndex > 0) { currentIndex--; setDisplayText(text.slice(0, currentIndex)); timeoutId = setTimeout(eraseText, delay * 1000); } else { if (loop) { currentIndex = 0; timeoutId = setTimeout(writeText, delay * 1000); } else { setIsWriting(false); } } }; writeText(); return () => clearTimeout(timeoutId); }, [text, delay, eraseOnComplete, eraseDelay, loop, prefersReducedMotion]); return ( {shownText} {showCursor && ( )} ); }; export default TextWriter; ```

{heading}

{title}

{heading}

Northern lights

Move the cursor

Night shift

Drift

Ship it

{frontContent.title}

{backContent.title}

{currentContent.title}

Tilt Card

{title}

Pro plan

On motion

{item.title}

Supercharge your