Text Morph Web Component

A reusable web component that creates smooth letter-by-letter text morphing animations using SVG paths and GSAP.

🚀 Live Demo

View Live Demo →

Try it out at https://yashrajbharti.github.io/text-morph/

📦 NPM Package

View on NPM →

Install: npm install @yashrajbharti/text-morph

✨ Features

• Custom Web Component (<text-morph>)
• Letter-by-letter morphing animation
• Automatic text length normalization (pads with spaces)
• Configurable via HTML attributes
• Loop support with smooth transitions
• Staggered animation effect
• Dark mode support with theme toggle
• System theme preference detection
• CSS logical properties for internationalization
• RTL support ready
• Semantic HTML with ARIA attributes for accessibility
• Uses Roboto font from Google Fonts

📦 Installation

Option 1: npm (Recommended)

npm install @yashrajbharti/text-morph

Then include the dependencies and component:

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/opentype.js/1.3.4/opentype.min.js"></script>
<script src="node_modules/@yashrajbharti/text-morph/text-morph.js"></script>

Or import in your JavaScript:

import '@yashrajbharti/text-morph';
// Make sure GSAP and opentype.js are available globally

Option 2: CDN

<!-- Include dependencies -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/opentype.js/1.3.4/opentype.min.js"></script>
<script src="https://yashrajbharti.github.io/text-morph/text-morph.js"></script>

Option 3: Download

Download text-morph.js and include it in your project along with the required dependencies.

🎯 Quick Start

<!-- Include required libraries -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/opentype.js/1.3.4/opentype.min.js"></script>
<script src="text-morph.js"></script>

<!-- Use the component -->
<text-morph 
    start-text="HELLO" 
    end-text="WORLD" 
    font-size="120" 
    duration="1.5" 
    loop
    color="#000">
</text-morph>

📖 API Reference

Attributes

| Attribute | Type | Default | Description | |-----------|------|---------|-------------| | start-text | string | "HELLO" | Initial text to display | | end-text | string | "WORLD" | Text to morph into | | font-size | number | 120 | Font size in pixels | | duration | number | 1.5 | Animation duration in seconds | | loop | boolean | false | Whether to loop the animation | | color | string | "#000" | Text color (any CSS color) |

JavaScript API

// Create programmatically
const morph = document.createElement('text-morph');
morph.setAttribute('start-text', 'HELLO');
morph.setAttribute('end-text', 'WORLD');
morph.setAttribute('font-size', '120');
morph.setAttribute('duration', '1.5');
morph.setAttribute('loop', '');
morph.setAttribute('color', '#000');
document.body.appendChild(morph);

// Update dynamically
morph.setAttribute('start-text', 'GOODBYE');
morph.setAttribute('end-text', 'FRIEND');

🛠️ How It Works

1. Font Loading - Loads Roboto font using opentype.js
2. Path Conversion - Each letter is converted to an SVG path
3. Text Normalization - Texts are normalized to the same length (shorter text padded with spaces)
4. Independent Morphing - Each letter morphs independently to its corresponding position
5. GSAP Animation - Smooth SVG path data animation with staggered timing
6. Shadow DOM - Style encapsulation for isolation

📁 Project Structure

text-morph/
├── text-morph.js      # Web component implementation
├── index.html         # Demo page with interactive controls
├── style.css          # shadcn-inspired styling with dark theme
└── README.md          # Documentation

🎨 Demo Features

The live demo includes:

• Interactive text inputs to change start and end text
• Real-time animation updates (debounced)
• Full documentation and code examples
• Dark mode toggle with localStorage persistence
• Responsive design for mobile and desktop
• WCAG accessibility compliant

[!NOTE] Requires support for Web Components (Custom Elements) and ES6+

🤝 Contributing

Contributions are welcome! Feel free to:

1. Fork the repository
2. Create a feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

📄 License

This project is open source and available under the MIT License.

🙏 Acknowledgments

Built with:

• GSAP - Professional-grade animation library
• opentype.js - Font parsing library
• Roboto - Google Fonts

Connect

Created by @yashrajbharti

⭐ Star this repo if you find it useful!