🎬 Lando Norris Effect

마우스 hover 시 글자가 부드럽게 위로 올라갔다가 내려오는 애니메이션 효과를 제공하는 라이브러리입니다.

✨ 특징

• 🎯 간단한 사용법
• ⚡ 가벼운 번들 크기
• 🎨 CSS 기반 애니메이션 (높은 성능)
• 📱 반응형 지원
• 🔧 커스터마이징 가능
• 🌏 다국어 지원 (Intl.Segmenter 사용)

📦 설치

npm install @daniel231963/lando-norris-effect

🚀 빠른 시작

React 프로젝트에서 사용

import { NorrisText } from '@daniel231963/lando-norris-effect';
import '@daniel231963/lando-norris-effect/dist/index.css';

function App() {
  return (
    <NorrisText>
      버튼입니다
    </NorrisText>
  );
}

💻 사용 예시

기본 사용

import { NorrisText } from '@daniel231963/lando-norris-effect';
import '@daniel231963/lando-norris-effect/dist/index.css';

function MyComponent() {
  return (
    <NorrisText>
      INSTAGRAM
    </NorrisText>
  );
}

커스텀 태그와 클래스 사용

<NorrisText as="a" href="https://example.com" className="my-custom-class">
  클릭하세요
</NorrisText>

마우스를 올리면 각 글자가 개별적으로 위로 올라갑니다.

🎨 커스터마이징

CSS를 오버라이드하여 애니메이션을 커스터마이징할 수 있습니다:

.norris > span {
  transition-duration: 0.5s; /* 기본값: 0.3s */
  transition-timing-function: ease-in; /* 기본값: ease-in-out */
}

.norris:hover > span {
  transform: translateY(-50px); /* 기본값: -30px */
}

📋 API

<NorrisText />

TypeScript로 작성된 React 컴포넌트입니다.

| Props | 타입 | 기본값 | 설명 | | ---------- | ------ | ------- | --------------------------------------- | | children | ReactNode | - | 애니메이션을 적용할 텍스트 (필수) | | as | ComponentType | keyof JSX.IntrinsicElements | "div" | 렌더링할 HTML 태그 (div, span, a 등) | | className| string | "" | 추가 CSS 클래스 | | ...props | HTMLAttributes | - | as prop으로 지정한 태그의 모든 props |

TypeScript 타입:

import { NorrisText, NorrisTextProps } from '@daniel231963/lando-norris-effect';

const props: NorrisTextProps = {
  children: '텍스트',
  as: 'a',
  href: '/link',
  className: 'my-class'
};

예시:

<NorrisText as="a" href="/link" className="my-class">
  텍스트
</NorrisText>

🔧 기술 스택

• TypeScript: 완전한 타입 지원
• React: React Hooks (useEffect, useRef) 사용
• CSS: sibling-index() 함수를 사용한 순차적 애니메이션
• JavaScript: Intl.Segmenter를 사용한 다국어 문자 분리

🌐 브라우저 지원

• Chrome (최신)
• Firefox (최신)
• Safari (최신)
• Edge (최신)

참고: sibling-index() 함수는 최신 브라우저에서만 지원됩니다. 구형 브라우저 지원이 필요한 경우 폴백을 제공하세요.

📝 라이선스

MIT

🤝 기여

이슈나 풀 리퀘스트는 언제든 환영합니다!

📧 문의

• GitHub: @yourusername
• Email: [email protected]

Made with ❤️