Henkei | へんけい

Henkei is a React animation component for transforming words through animation. It smoothly morphs each letter into the corresponding letter of the next word

📦 Installation

   pnpm add henkei

🐣 Usage

import {Henkei} from 'henkei'

export default function App(){
  return (
    <div>
      <Henkei
        words={["Hello","World"]}
        interval={1000}
        duration={500}
        fontUrl="https://unpkg.com/@fontsource/[email protected]/files/chewy-latin-400-normal.woff"
        className='text-7xl font-chewy mb-2 tracking-wide text-left text-[#3D3522]'
      />
    </div>
  )
}

If you want the word to transform into a word that has an extreme form like words in Japanese, Chinese, Korean, etc. You have to find or download a font that supports this and put it in the fontUrl attribute. I recommend you to just download it to minimize the font not loading, you can download the font from google font or from other sources. After you download it, you can put the file in the public folder or any folder you want and then in the fontUrl attribute you fill it with the root relative path (or absolute path starting from /) to the .woff or .ttf file. For example, let's assume you store it in the public folder:

// public folder
public/
└── rubik.ttf  # the .ttf or .woff file you downloaded

Then, use it as follows:

import {Henkei} from 'henkei'

export default function App() {
  return (
    <div>
      <Henkei
        words={["Hello", "World"]}
        interval={1000}
        duration={500}
        {/* set to the relative path to the file in the public/ folder */}
        fontUrl="/rubik.ttf"
        className='text-7xl font-chewy mb-2 tracking-wide text-left text-[#3D3522]'
      />
    </div>
  )
}

🛠️ API Reference

| Prop | Type | Default Value | Description | | :--- | :--- | :--- | :--- | | words | string[] | (Required) | Array of strings containing the words to transition between. | | interval| number | 3000 | Time in milliseconds between each word transition cycle. | | duration| number | 1000 | The duration in milliseconds of the morphing animation itself. | | className| string | undefined | Standard React class name applied to the outer wrapper element. | | fontUrl | string | "https://unpkg.com/@fontsource/[email protected]/files/inter-latin-400-normal.woff" | URL to a valid .ttf or .woff font file containing the characters you want to render. |

🚀 Tech Stack

• React - UI
• Framer Motion - Animation
• Opentype.js - Font path extraction
• Flubber - Smooth SVG polygon morphing
• Polygon Clipping - Boolean operations (Union & Difference) for SVG paths

📜 License

MIT