Typography Components

An interactive text component featuring physics-based character animations like rubber band, hinge, and squash effects, built with Motion for React and Tailwind CSS.

A high-impact typography component that masks text with a background GIF using CSS background-clip, featuring a loading state with pulse animation and responsive sizing.

An animated text loop component that cycles through rotating strings with a typewriter-style cursor, gradient text effects, and smooth Framer Motion transitions.

A scroll-triggered text component that applies dynamic color gradient transitions to text as the user scrolls, built with Tailwind CSS, Framer Motion, and Lenis for smooth performance.

A fluid text morphing animation that uses SVG filters and blur effects to create smooth, seamless transitions between a sequence of words.

A text component featuring a smooth, horizontally animated linear gradient background that clips to the text, creating a dynamic shimmering effect using Tailwind CSS utilities.

A text animation component that uses Framer Motion to stagger the entrance of individual letters or words with customizable slide-in and opacity transitions.

A text component that applies a per-character shimmering color animation using Framer Motion, featuring configurable duration, pause states, and accessibility support for screen readers.

A spring-driven animated number component that performs a smooth count-up transition triggered when the element enters the viewport, featuring customizable formatting and reduced motion support.

A text animation component that performs a letter-by-letter slot roll effect, where old characters drop away as new ones cascade into place from left to right using Framer Motion.

A text animation component that creates a continuous shimmering gradient sweep effect across text using CSS keyframes, ideal for loading states or visual emphasis.

A text animation component that reveals words or characters using a spring-based slide-up effect combined with a blur transition, built with Framer Motion and Tailwind CSS.

A specialized Markdown renderer component that supports GitHub Flavored Markdown, featuring syntax-highlighted code blocks with a copy-to-clipboard action and custom styling for headings and text elements.

A text component that uses Framer Motion to smoothly animate character transitions, blurring and scaling letters as the text content updates.

A customizable Markdown renderer that parses text into styled HTML elements including headings, lists, blockquotes, and tables using react-markdown and remark-gfm.

A text component that applies a dynamic motion blur effect using layered CSS text-shadows, supporting customizable blur intensity, angle, and bidirectional shadow rendering.

A clean, responsive page header component featuring a dynamic title, optional description, and a flexible slot for right-aligned action buttons or content.

A responsive description list component that renders key-value pairs from a JSON object with support for both side-by-side and stacked layouts, featuring hover effects and clean typography.

A dynamic typography component that applies an animated image mask to text using CSS background-clip, featuring automatic image cycling and configurable directional background panning animations.

A text highlighting component that uses Framer Motion to animate a smooth, colored marker effect over specific words or phrases within a block of text.