{"_id":"@daniel231963/my-little-ui","_rev":"2-4cd3ccb257345eac37fd7e405fb89b6b","name":"@daniel231963/my-little-ui","dist-tags":{"latest":"0.0.2"},"versions":{"0.0.1":{"name":"@daniel231963/my-little-ui","version":"0.0.1","keywords":["react","ui","animation","hover","effect","css","component"],"author":{"name":"Seokryu Park"},"_id":"@daniel231963/my-little-ui@0.0.1","maintainers":[{"name":"daniel231963","email":"daniel231963@naver.com"}],"homepage":"https://github.com/pomibob/my-little-ui#readme","bugs":{"url":"https://github.com/pomibob/my-little-ui/issues"},"dist":{"shasum":"f257200d68cdfa8a99954398b017ab9273541527","tarball":"https://registry.npmjs.org/@daniel231963/my-little-ui/-/my-little-ui-0.0.1.tgz","fileCount":6,"integrity":"sha512-fpO1qIjd0ItzGkD8QMI8LnOg/LqYAzgCkoL6V1WitZaqHf4qs2tAcQxraTsAxPwABPUIOWxe6W+81t0qBzlT0g==","signatures":[{"sig":"MEYCIQDHGmxl6ivIXPgB7qG6depl8dTUJFyKFx5f49auY/YCLAIhAMLl4DrpbJTzMYlg2QTI75D1yu5MwCx+QCcLFQMdOL6d","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":5828},"main":"dist/index.js","types":"dist/index.d.ts","module":"dist/index.js","scripts":{"build":"tsc && cp src/index.css dist/index.css","prepublishOnly":"npm run build"},"_npmUser":{"name":"daniel231963","email":"daniel231963@naver.com"},"repository":{"url":"git+https://github.com/pomibob/my-little-ui.git","type":"git"},"_npmVersion":"10.9.2","description":"My Little UI library for react","directories":{},"_nodeVersion":"22.17.1","_hasShrinkwrap":false,"devDependencies":{"typescript":"^5.2.0","@types/react":"^18.3.27","@types/react-dom":"^18.3.7"},"peerDependencies":{"react":">=16.8.0","react-dom":">=16.8.0"},"_npmOperationalInternal":{"tmp":"tmp/my-little-ui_0.0.1_1767279089273_0.8077125440465522","host":"s3://npm-registry-packages-npm-production"}},"0.0.2":{"name":"@daniel231963/my-little-ui","version":"0.0.2","description":"My Little UI library for react","main":"dist/index.js","module":"dist/index.js","types":"dist/index.d.ts","scripts":{"build":"tsc && cp src/index.css dist/index.css","prepublishOnly":"npm run build","dev":"vite","test":"vite"},"keywords":["react","ui","animation","hover","effect","css","component"],"peerDependencies":{"react":">=16.8.0","react-dom":">=16.8.0"},"devDependencies":{"@types/react":"^18.3.27","@types/react-dom":"^18.3.7","typescript":"^5.2.0","vite":"^5.0.0","@vitejs/plugin-react":"^4.2.0"},"repository":{"type":"git","url":"git+https://github.com/pomibob/my-little-ui.git"},"author":{"name":"Seokryu Park"},"_id":"@daniel231963/my-little-ui@0.0.2","bugs":{"url":"https://github.com/pomibob/my-little-ui/issues"},"homepage":"https://github.com/pomibob/my-little-ui#readme","_nodeVersion":"22.17.1","_npmVersion":"10.9.2","dist":{"integrity":"sha512-WKvIMKMmZnN1BnXLKQbEodKTFKgbeIGzG9JScVIg+aIef+W5HAoesvcWtCQX89lj6zsqHE9TCLTxrO9nYfnEPQ==","shasum":"89fec05aceedcacf1b3e97b22c01439211e2c6ac","tarball":"https://registry.npmjs.org/@daniel231963/my-little-ui/-/my-little-ui-0.0.2.tgz","fileCount":6,"unpackedSize":5952,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIQC2pTkqgtLEc6Bkqm7gHBL9/tNfBANA1FKI+RhrliTPUQIge6+cM2DtWvEyDJr8IGFu9LGOhVVQZ1eEVWJvldzH7ME="}]},"_npmUser":{"name":"daniel231963","email":"daniel231963@naver.com"},"directories":{},"maintainers":[{"name":"daniel231963","email":"daniel231963@naver.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/my-little-ui_0.0.2_1767281380051_0.2148684336877027"},"_hasShrinkwrap":false}},"time":{"created":"2026-01-01T14:51:29.148Z","modified":"2026-01-01T15:29:40.435Z","0.0.1":"2026-01-01T14:51:29.425Z","0.0.2":"2026-01-01T15:29:40.213Z"},"bugs":{"url":"https://github.com/pomibob/my-little-ui/issues"},"author":{"name":"Seokryu Park"},"homepage":"https://github.com/pomibob/my-little-ui#readme","keywords":["react","ui","animation","hover","effect","css","component"],"repository":{"type":"git","url":"git+https://github.com/pomibob/my-little-ui.git"},"description":"My Little UI library for react","maintainers":[{"name":"daniel231963","email":"daniel231963@naver.com"}],"readme":"# 🎬 Lando Norris Effect\n\n마우스 hover 시 글자가 부드럽게 위로 올라갔다가 내려오는 애니메이션 효과를 제공하는 라이브러리입니다.\n\n## ✨ 특징\n\n- 🎯 간단한 사용법\n- ⚡ 가벼운 번들 크기\n- 🎨 CSS 기반 애니메이션 (높은 성능)\n- 📱 반응형 지원\n- 🔧 커스터마이징 가능\n- 🌏 다국어 지원 (Intl.Segmenter 사용)\n\n## 📦 설치\n\n```bash\nnpm install @daniel231963/lando-norris-effect\n```\n\n## 🚀 빠른 시작\n\n### React 프로젝트에서 사용\n\n```tsx\nimport { NorrisText } from '@daniel231963/lando-norris-effect';\nimport '@daniel231963/lando-norris-effect/dist/index.css';\n\nfunction App() {\n  return (\n    <NorrisText>\n      버튼입니다\n    </NorrisText>\n  );\n}\n```\n\n## 💻 사용 예시\n\n### 기본 사용\n\n```tsx\nimport { NorrisText } from '@daniel231963/lando-norris-effect';\nimport '@daniel231963/lando-norris-effect/dist/index.css';\n\nfunction MyComponent() {\n  return (\n    <NorrisText>\n      INSTAGRAM\n    </NorrisText>\n  );\n}\n```\n\n### 커스텀 태그와 클래스 사용\n\n```tsx\n<NorrisText as=\"a\" href=\"https://example.com\" className=\"my-custom-class\">\n  클릭하세요\n</NorrisText>\n```\n\n마우스를 올리면 각 글자가 개별적으로 위로 올라갑니다.\n\n## 🎨 커스터마이징\n\nCSS를 오버라이드하여 애니메이션을 커스터마이징할 수 있습니다:\n\n```css\n.norris > span {\n  transition-duration: 0.5s; /* 기본값: 0.3s */\n  transition-timing-function: ease-in; /* 기본값: ease-in-out */\n}\n\n.norris:hover > span {\n  transform: translateY(-50px); /* 기본값: -30px */\n}\n```\n\n## 📋 API\n\n### `<NorrisText />`\n\nTypeScript로 작성된 React 컴포넌트입니다.\n\n| Props      | 타입   | 기본값  | 설명                                    |\n| ---------- | ------ | ------- | --------------------------------------- |\n| `children` | ReactNode | -       | 애니메이션을 적용할 텍스트 (필수)        |\n| `as`       | ComponentType \\| keyof JSX.IntrinsicElements | `\"div\"` | 렌더링할 HTML 태그 (div, span, a 등)    |\n| `className`| string | `\"\"`    | 추가 CSS 클래스                         |\n| `...props` | HTMLAttributes | -       | `as` prop으로 지정한 태그의 모든 props  |\n\n**TypeScript 타입:**\n```tsx\nimport { NorrisText, NorrisTextProps } from '@daniel231963/lando-norris-effect';\n\nconst props: NorrisTextProps = {\n  children: '텍스트',\n  as: 'a',\n  href: '/link',\n  className: 'my-class'\n};\n```\n\n**예시:**\n```tsx\n<NorrisText as=\"a\" href=\"/link\" className=\"my-class\">\n  텍스트\n</NorrisText>\n```\n\n## 🔧 기술 스택\n\n- **TypeScript**: 완전한 타입 지원\n- **React**: React Hooks (useEffect, useRef) 사용\n- **CSS**: `sibling-index()` 함수를 사용한 순차적 애니메이션\n- **JavaScript**: `Intl.Segmenter`를 사용한 다국어 문자 분리\n\n## 🌐 브라우저 지원\n\n- Chrome (최신)\n- Firefox (최신)\n- Safari (최신)\n- Edge (최신)\n\n**참고**: `sibling-index()` 함수는 최신 브라우저에서만 지원됩니다. 구형 브라우저 지원이 필요한 경우 폴백을 제공하세요.\n\n## 📝 라이선스\n\nMIT\n\n## 🤝 기여\n\n이슈나 풀 리퀘스트는 언제든 환영합니다!\n\n## 📧 문의\n\n- GitHub: [@yourusername](https://github.com/yourusername)\n- Email: your.email@example.com\n\n---\n\nMade with ❤️\n","readmeFilename":"README.md"}