Micro-interactions

Corner Letters

Four glyphs pinned to the container corners that blur-and-scale in on mount and dissolve out on exit.

Cook BookEnter / Exit Blur Scale in Stagger

Install

Props

What It Demonstrates

Enter / Exit: The animation an element plays when it's added to or removed from the screen.
Blur: A blur filter used to soften an element or mask tiny imperfections.
Scale in: Element grows from smaller to full size as it appears, often paired with a fade.
Stagger: Animate several items one after another with a small delay between each, creating a cascade.

Related Components

Appears In

Prop	Type	Default	Description
visible	boolean	true	Mounts and unmounts the glyphs — toggle to replay.
stiffness	number	120	Spring stiffness of the entrance.
blur	number	8	Blur the glyphs travel from and to.
scaleFrom	number	1.5	Starting scale of each glyph.
offset	number	4	Inset from the corners.
size	number	32	Glyph font size.
color	string (hex)	"#a855f7"	Glyph color.

components/registry/corner-letters/corner-letters.tsx

"use client";

import { AnimatePresence, motion } from "motion/react";

export interface CornerLettersProps {
	letters: string;
	visible?: boolean;
	stiffness?: number;
	blur?: number;
	scaleFrom?: number;
	offset?: number;
	size?: number;
	color?: string;
	reducedMotion?: boolean;
}

const CORNERS = [
	{ id: "tl", style: { top: 0, left: 0 } },
	{ id: "tr", style: { top: 0, right: 0 } },
	{ id: "bl", style: { bottom: 0, left: 0 } },
	{ id: "br", style: { bottom: 0, right: 0 } },
] as const;

export default function CornerLetters({
	letters,
	visible = true,
	stiffness = 120,
	blur = 8,
	scaleFrom = 1.5,
	offset = 4,
	size = 32,
	color = "#a855f7",
	reducedMotion = false,
}: CornerLettersProps) {
	const glyphs = Array.from(letters).slice(0, 4);

	const hidden = reducedMotion
		? { opacity: 0 }
		: { opacity: 0, filter: `blur(${blur}px)`, scale: scaleFrom };
	const shown = reducedMotion
		? { opacity: 1 }
		: { opacity: 1, filter: "blur(0px)", scale: 1 };

	return (
		<div className="pointer-events-none absolute inset-0 select-none">
			<AnimatePresence>
				{visible &&
					glyphs.map((glyph, i) => (
						<motion.span
							key={CORNERS[i].id}
							initial={hidden}
							animate={{
								...shown,
								transition: reducedMotion
									? { duration: 0 }
									: {
											type: "spring",
											stiffness,
											delay: 0.1 + i * 0.06,
										},
							}}
							exit={{
								...hidden,
								transition: reducedMotion
									? { duration: 0 }
									: { duration: 0.35, delay: i * 0.04 },
							}}
							className="absolute font-light leading-none"
							style={{
								...CORNERS[i].style,
								margin: offset,
								fontSize: size,
								color,
							}}
						>
							{glyph}
						</motion.span>
					))}
			</AnimatePresence>
		</div>
	);
}