raphaelsalaja

raphaelsalaja / calligraph

Public

Fluid text transitions powered by Motion.

calligraph.raphaelsalaja.com motion text-transformation
78
3
100% credibility
Found Feb 17, 2026 at 24 stars 3x -- GitGems finds repos before they trend. Get early access to the next one.
Sign Up Free
AI Analysis
TypeScript
AI Summary

Calligraph is a lightweight React component for creating fluid, character-by-character text transition animations.

How It Works

1
🔍 Discover Calligraph

You find a fun tool for making text change smoothly, like letters sliding into place.

2
📦 Add to your project

You easily bring the tool into your website or app with a quick download.

3
✏️ Wrap your text

You place the tool around the words that will change, like a magic frame.

4
✨ Watch the magic

You update the words and see shared letters glide perfectly while new ones fade in beautifully.

5
🎚️ Fine-tune the feel

You adjust the speed or bounciness to make the motion just right for your style.

🎉 Delightful animations live

Your text now flows smoothly everywhere, making your site feel alive and engaging.

Sign up to see the full architecture

4 more

Sign Up Free

Star Growth

See how this repo grew from 24 to 78 stars Sign Up Free
Repurpose This Repo

Repurpose is a Pro feature

Generate ready-to-use prompts for X threads, LinkedIn posts, blog posts, YouTube scripts, and more -- with full repo context baked in.

Unlock Repurpose
AI-Generated Review

What is calligraph?

Calligraph is a TypeScript React component that delivers smooth, character-level text transitions powered by Motion. Drop it around any string, and when the text updates—like swapping "Hello" for "World"—shared letters slide fluidly to new spots while new ones fade in from offset positions and old ones fade out, mimicking a fluid text generator or calligraphy font shift. It handles everything via children prop changes, with built-in drift effects scaled to edit size for natural motion.

Why is it gaining traction?

Unlike rigid text animations or manual keyframe hacks, Calligraph offers a dead-simple API with layout-aware springs and customizable transitions, like tweaking stiffness for snappier bounces. The demo site showcases rotating words in hero sections with zero setup, hooking devs who want fluid text semplice or tailwind-friendly polish without boilerplate. Motion integration ensures buttery 60fps performance across browsers.

Who should use this?

Frontend devs crafting dynamic UIs, such as landing pages with cycling headlines, search-as-you-type inputs, or calligrapher-style title effects. It's ideal for React apps needing engaging micro-interactions, like e-commerce tag clouds or dashboard metrics that update live, without diving into complex SVG morphing.

Verdict

Grab it for prototypes or polish—19 stars and 1.0% credibility score signal early days, but solid docs, Next.js demo, and MIT license make it low-risk to test. Mature enough for non-critical spots, skip for production until more adoption.

Sign up to read the full AI review Sign Up Free

Similar repos coming soon.