SVG Text Hover - Typography Component | Zenora UI

Loadıng

Collapse sidebar

/

Search

Luma Login Card

Falling Image Trail Ink Reveal Cursor List Hover Cards Magnetic Cards

Blob Transition Dual Stairs Transition Mask Page Transition Maven Transition Page Transition Swap Transition

ASCII Image Reveal Hover Name Gallery Image Reveal Lumina 3D Gallery Prism Vision Gallery Spiral Gallery

Counter Loader Hero

Arc Gallery Infinite Drag Grid Savour Scroll Scroll Tunnel

SVG Text Hover Text Animation Text Scramble

Components MCP Docs

SVG Text Hover·Typography

npx zenora-ui-registry@latest add svg-text-hover

SVG Text Hover

Typography

128 views•13 uses

Get this component

Copies the component into your project, installs what it needs, and pulls down its images. Nothing to download by hand.

npx zenora-ui-registry@latest add svg-text-hover

Writes to components/zenora-ui/ by default; override with --dir. The file is yours to edit; there is no package to keep in sync.

Or let an AI agent pull it in for you. Set up the MCP server

An interactive, physics-based SVG text animation that scales individual character paths on hover.

KEY FEATURES

·Precision SVG hit-boxing for perfect mouse interactions on complex vector shapes
·GSAP timeline scrubbing for smooth scale interpolation
·Modular letter array format allowing custom vectors for any font/logo

Props

3 properties

fillColorcolor#5B23FF

Color of the SVG letter paths.

hoverScaleYnumber0.3

Vertical scale multiplier applied to the letter when hovered.

durationnumber0.35

Speed of the scale transition.

Build The Interaction Layer Your Website Is Missing.

Start with Free Core today. Upgrade to Pro for Complete Access.

Browse the Effects Upgrade to Pro

React 19 & Next.js·CLI & MCP·Kinetic Interactions·Zero Configuration

Platform

Zenora UI

Documentation
Pricing
Components

Categories

All Effects
WebGL
Text
Backgrounds
Buttons
Carousels

Scroll
Components
Navigation
Cursor
Transitions
Loaders

Documents

Introduction
Installation
CLI
MCP
LLMs

Legal

Legal Center
Terms & License
Privacy Policy
Pro Plan Terms

Socials

Twitter / X
Instagram
Portfolio

Contact Us

krishkli536@gmail.com

New effects, in your inbox.

Every new drop, plus the occasional behind-the-scenes build. No spam. Unsubscribe anytime.

© 2026 Zenora UI. MIT Licensed. · Built for developers · Small motion. Big signal.

Built & Designed By Krishh.

Interactive Vector EngineVersion 1.0

Hover over the SVG characters to trigger isolated, physics-based scale deformations driven by hidden geometric hitboxes.