Text Effects

Morphing Word

단어가 흐림과 투명도 변화로 서로 녹아들듯 전환되는 텍스트 컴포넌트입니다.

Preview

text motion

Design

morph between words

Installation

bash
Copied
1pnpm dlx shadcn@latest add https://ryong-blog.vercel.app/r/morphing-text.json

Code

typescript
Copied
1import { MorphingText } from "@/components/morphing-text"23export default function Example() {4  return <MorphingText texts={["Design", "Code", "Ship"]} />5}

Props

texts

Type
string[]
Default
-
Description
Texts to morph between.

className

Type
string
Default
-
Description
Additional classes merged onto the component.

Reference

Reference Morphing Word