Typography Components

Reusable text components & styles

Highlighter

Used to highlight texts.

This is Highlighter

Magnet Effect

Text act like it is attracted toward cursor.

This is a Magnet.

Elastic Label

Technical details or metadata.

Hover Here!!

Alpha Feature

This interface logic is currently being stress-tested in production.

Text Bounce

Characters bounced when you hover on them.

Hover Here !!

Liquid Flow

Texts flows like liquid on hover.

Hover Here for liquid flow !!

Prerequisites

Ensure you have the following dependencies and utility functions installed before using the components.

Install Dependencies

npm install framer-motion clsx tailwind-merge lucide-react

Setup lib/utils.ts

Required for cn()

import { type ClassValue, clsx } from "clsx";
import { twMerge } from "tailwind-merge";

export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs));
}

Note: We use tailwind-merge to handle overlapping Tailwind classes. This is critical for making your custom components extensible via className props.