Delta Components

Docs

Font Transform

An interactive text animation component that transforms individual characters into random Google Fonts on hover, creating a playful and dynamic typography effect.

18 views

0 downloads

Based onMicrosoft Design

Demo

Code

Open in

Hover over the text to see the effect in action. It is only visible on desktop.

Delta Components

Desktop Only

This component only works on desktop devices with a mouse cursor. The hover effect is automatically disabled on mobile and touch devices.

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

1"use client"
2
3import { FontTransform } from "@/registry/animations/font-transform"
4
5export function Component() {
6  return (
7    <div className="space-y-6 text-center">
8      <FontTransform
9        className="text-4xl font-bold text-primary"
10        hoverDuration={3000}
11      >
12        Hover over each character
13      </FontTransform>
14
15      <p className="text-muted-foreground">
16        Desktop only - hover effect requires mouse interaction
17      </p>
18    </div>
19  )
20}

API Reference

Props

Prop	Type	Default	Description
`children`	`string`	-	The text content to make interactive (required)
`className`	`string`	`""`	Additional CSS classes for styling
`hoverDuration`	`number`	`2000`	Duration in milliseconds before reverting to original font

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