Delta Components

Overview

The Font Transform component creates an engaging interactive typography experience where each character transforms into different Google Fonts on hover, perfect for creative headlines, portfolio showcases, and playful user interfaces. It features smooth animations with Framer Motion, customizable hover duration, and responsive design that works across different screen sizes. Ideal for adding personality and interactivity to text elements while maintaining readability and accessibility.

Installation

pnpm dlx shadcn@latest add https://deltacomponents.dev/r/font-transform.json

Usage

"use client"
 
import { FontTransform } from "@/registry/animations/font-transform"
 
export function Component() {
  return (
    <div className="space-y-6 text-center">
      <FontTransform
        className="text-4xl font-bold text-primary"
        hoverDuration={3000}
      >
        Hover over each character
      </FontTransform>
 
      <p className="text-muted-foreground">
        Desktop only - hover effect requires mouse interaction
      </p>
    </div>
  )
}

API Reference

Props

The component also accepts all standard HTML div attributes and forwards them to the underlying element.

Font Collection

The component includes a curated selection of Google Fonts organized into categories:

• Professional: Inter, Roboto, Poppins, Montserrat, Playfair Display, Merriweather
• Monospace: JetBrains Mono, Source Code Pro, IBM Plex Mono
• Creative: Orbitron, Righteous, Fredoka, Bungee, Shrikhand
• Decorative: Creepster, Fascinate, Griffy, Nosifer, Eater, Vampiro One

Examples

Interactive Typography

Hover over individual characters to see them transform into different fonts with smooth animations.