@ehfuse/react-vfx 1.0.0 → 1.1.0

package/README.md

@@ -12,6 +12,33 @@ MUI 없이 React에서 사용할 수 있는 시각 효과 라이브러리입니
 <VfxText title="Hello" effect="typing" isActive={true} />
 ```
 
+### VfxTyping (1.1.0)
+
+문장 안에 끼워 쓰는 타이핑. 한 번 치고 멈추고(반복은 `loop`), 안 나온 글자 자리를 미리 잡아 아래 내용이 들썩이지 않습니다.
+
+```tsx
+import { VfxTyping, typingDuration } from "@ehfuse/react-vfx";
+
+const opts = { speed: 45, maxDuration: 1400 };
+<p aria-label={`${line1} ${line2}`}>
+    <VfxTyping text={line1} delay={300} caret="wait" ariaHidden {...opts} />
+    <VfxTyping text={line2} delay={300 + typingDuration(line1, opts) + 250} ariaHidden {...opts} />
+</p>
+```
+
+| prop | 기본 | 설명 |
+| --- | --- | --- |
+| `delay` | 0 | 시작 전 기다림(ms) |
+| `speed` | 45 | 한 글자 간격(ms) |
+| `maxDuration` | - | 한 줄을 이 시간(ms) 안에 끝내게(긴 글은 더 빨리) |
+| `loop` | false | `true` 면 2초 쉬고 다시, 숫자면 그만큼 쉬고 |
+| `caret` | `"typing"` | `"typing"` 치는 동안 · `"wait"` 시작 전부터 · `"always"` · `"none"` |
+| `reserveSpace` | true | 안 나온 글자를 투명하게 미리 그린다 |
+| `as` | `"span"` | `"span"` · `"div"` |
+| `respectReducedMotion` | true | 움직임 줄이기면 처음부터 다 보인다 |
+
+커서 · 남은 글자 모양은 `.vfx-typing-caret` · `.vfx-typing-rest` 로 바꿉니다(패키지 스타일은 `:where()` 라 쓰는 쪽 CSS 가 이깁니다).
+
 ### VfxDiv
 
 컨테이너에 테두리 효과를 적용합니다.

package/dist/VfxTyping.d.ts

@@ -0,0 +1,34 @@
+/**
+ * VfxTyping.tsx
+ * IMPORTANT NOTICE (중요 공지):
+ * This code is the intellectual property of 김영진 (Kim Young Jin).
+ * All rights reserved. Unauthorized copying, modification, distribution,
+ * or use of this code is strictly prohibited without prior written
+ * permission from the copyright holder.
+ * 이 코드는 김영진의 지적재산권입니다.
+ * 모든 권리가 보호됩니다. 저작권자의 사전 서면 허가 없이
+ * 무단 복사, 수정, 배포 또는 사용을 엄격히 금지합니다.
+ * For licensing inquiries, please contact (라이선스 문의):
+ * Email: ehfuse@gmail.com
+ */
+import React from "react";
+import type { VfxTypingProps } from "./types";
+/**
+ * 글을 다 치는 데 걸리는 시간(ms, 지연 제외) — 다음 줄의 delay 를 정할 때 쓴다(같은 speed · maxDuration 을 준다).
+ * 글자 수는 화면에 보이는 글자 기준(이모지 · 결합 문자도 한 글자).
+ */
+export declare const typingDuration: (text: string, options?: {
+    speed?: number;
+    maxDuration?: number;
+}) => number;
+/**
+ * 타이핑 효과(1.1.0) — 문장 안에 끼워 쓰는 한 줄 타이핑.
+ *
+ * - delay 뒤 한 글자씩. loop 를 주지 않으면 한 번 치고 멈춘다(VfxText effect="typing" 은 늘 반복한다).
+ * - reserveSpace(기본 켬): 아직 안 나온 글자를 투명하게 미리 그려 자리를 잡는다 — 치는 동안 줄 높이 · 아래 내용이 들썩이지 않는다.
+ * - caret: "typing"(치는 동안만, 기본) · "wait"(시작 전부터 치는 동안) · "always"(다 친 뒤에도) · "none".
+ * - 기기의 움직임 줄이기가 켜져 있으면 처음부터 다 보인다(respectReducedMotion, 기본 켬).
+ * - 글이 바뀌면 처음부터 다시 친다.
+ */
+export declare const VfxTyping: React.FC<VfxTypingProps>;
+//# sourceMappingURL=VfxTyping.d.ts.map

package/dist/VfxTyping.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"VfxTyping.d.ts","sourceRoot":"","sources":["../src/VfxTyping.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;GAYG;AAEH,OAAO,KAA8B,MAAM,OAAO,CAAC;AACnD,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC;AA8B9C;;;GAGG;AACH,eAAO,MAAM,cAAc,GAAI,MAAM,MAAM,EAAE,UAAS;IAAE,KAAK,CAAC,EAAE,MAAM,CAAC;IAAC,WAAW,CAAC,EAAE,MAAM,CAAA;CAAO,KAAG,MAGrG,CAAC;AAKF;;;;;;;;GAQG;AACH,eAAO,MAAM,SAAS,EAAE,KAAK,CAAC,EAAE,CAAC,cAAc,CAqE9C,CAAC"}

package/dist/index.d.ts

@@ -1,9 +1,10 @@
 export { VfxText, addTextEffectStyles } from "./VfxText";
+export { VfxTyping, typingDuration } from "./VfxTyping";
 export { VfxDiv, addBorderEffectStyles } from "./VfxDiv";
 export { VfxParticle } from "./VfxParticle";
 export { default as VfxSlide } from "./VfxSlide";
 export { default as VfxSlideItem } from "./VfxSlideItem";
 export { useTextEffect } from "./hooks/useTextEffect";
-export type { TextEffectType, BorderEffectType, VfxTextProps, VfxDivProps, ParticleEffectType, ParticleOptions, VfxParticleProps, SlideEffectType, DriftEffectType, VfxSlideItemProps, VfxSlideProps, } from "./types";
+export type { TextEffectType, BorderEffectType, VfxTextProps, VfxTypingProps, VfxTypingCaret, VfxDivProps, ParticleEffectType, ParticleOptions, VfxParticleProps, SlideEffectType, DriftEffectType, VfxSlideItemProps, VfxSlideProps, } from "./types";
 export { slideEffectRegistry, driftEffectRegistry } from "./effects/slides";
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,mBAAmB,EAAE,MAAM,WAAW,CAAC;AACzD,OAAO,EAAE,MAAM,EAAE,qBAAqB,EAAE,MAAM,UAAU,CAAC;AACzD,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC5C,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,YAAY,CAAC;AACjD,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,gBAAgB,CAAC;AACzD,OAAO,EAAE,aAAa,EAAE,MAAM,uBAAuB,CAAC;AACtD,YAAY,EACR,cAAc,EACd,gBAAgB,EAChB,YAAY,EACZ,WAAW,EACX,kBAAkB,EAClB,eAAe,EACf,gBAAgB,EAChB,eAAe,EACf,eAAe,EACf,iBAAiB,EACjB,aAAa,GAChB,MAAM,SAAS,CAAC;AACjB,OAAO,EAAE,mBAAmB,EAAE,mBAAmB,EAAE,MAAM,kBAAkB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,mBAAmB,EAAE,MAAM,WAAW,CAAC;AACzD,OAAO,EAAE,SAAS,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AACxD,OAAO,EAAE,MAAM,EAAE,qBAAqB,EAAE,MAAM,UAAU,CAAC;AACzD,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC5C,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,YAAY,CAAC;AACjD,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,gBAAgB,CAAC;AACzD,OAAO,EAAE,aAAa,EAAE,MAAM,uBAAuB,CAAC;AACtD,YAAY,EACR,cAAc,EACd,gBAAgB,EAChB,YAAY,EACZ,cAAc,EACd,cAAc,EACd,WAAW,EACX,kBAAkB,EAClB,eAAe,EACf,gBAAgB,EAChB,eAAe,EACf,eAAe,EACf,iBAAiB,EACjB,aAAa,GAChB,MAAM,SAAS,CAAC;AACjB,OAAO,EAAE,mBAAmB,EAAE,mBAAmB,EAAE,MAAM,kBAAkB,CAAC"}