masoneffect 2.0.1 → 2.0.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +15 -2
- package/dist/core/index.d.ts +2 -0
- package/dist/core/index.d.ts.map +1 -1
- package/dist/core/typing/index.d.ts +52 -0
- package/dist/core/typing/index.d.ts.map +1 -0
- package/dist/count/core/index.d.ts +2 -0
- package/dist/count/core/index.d.ts.map +1 -1
- package/dist/count/core/typing/index.d.ts +52 -0
- package/dist/count/core/typing/index.d.ts.map +1 -0
- package/dist/count/index.d.ts +2 -0
- package/dist/count/index.d.ts.map +1 -1
- package/dist/count/react/index.d.ts +2 -0
- package/dist/count/react/index.d.ts.map +1 -1
- package/dist/count/react/typing/Typing.d.ts +18 -0
- package/dist/count/react/typing/Typing.d.ts.map +1 -0
- package/dist/count/react/typing/index.d.ts +4 -0
- package/dist/count/react/typing/index.d.ts.map +1 -0
- package/dist/count/svelte/index.d.ts +1 -0
- package/dist/count/svelte/index.d.ts.map +1 -1
- package/dist/count/svelte/typing/index.d.ts +3 -0
- package/dist/count/svelte/typing/index.d.ts.map +1 -0
- package/dist/count/vue/index.d.ts +1 -0
- package/dist/count/vue/index.d.ts.map +1 -1
- package/dist/count/vue/typing/index.d.ts +4 -0
- package/dist/count/vue/typing/index.d.ts.map +1 -0
- package/dist/index.cjs +1 -1
- package/dist/index.d.ts +2 -0
- package/dist/index.d.ts.map +1 -1
- package/dist/index.mjs +1 -1
- package/dist/react/core/index.d.ts +2 -0
- package/dist/react/core/typing/index.d.ts +51 -0
- package/dist/react/count/core/index.d.ts +2 -0
- package/dist/react/count/core/index.d.ts.map +1 -1
- package/dist/react/count/core/typing/index.d.ts +52 -0
- package/dist/react/count/core/typing/index.d.ts.map +1 -0
- package/dist/react/count/index.d.ts +2 -0
- package/dist/react/count/index.d.ts.map +1 -1
- package/dist/react/count/react/index.d.ts +2 -0
- package/dist/react/count/react/index.d.ts.map +1 -1
- package/dist/react/count/react/typing/Typing.d.ts +18 -0
- package/dist/react/count/react/typing/Typing.d.ts.map +1 -0
- package/dist/react/count/react/typing/index.d.ts +4 -0
- package/dist/react/count/react/typing/index.d.ts.map +1 -0
- package/dist/react/count/svelte/index.d.ts +1 -0
- package/dist/react/count/svelte/index.d.ts.map +1 -1
- package/dist/react/count/svelte/typing/index.d.ts +3 -0
- package/dist/react/count/svelte/typing/index.d.ts.map +1 -0
- package/dist/react/count/vue/index.d.ts +1 -0
- package/dist/react/count/vue/index.d.ts.map +1 -1
- package/dist/react/count/vue/typing/index.d.ts +4 -0
- package/dist/react/count/vue/typing/index.d.ts.map +1 -0
- package/dist/react/index.cjs +2 -0
- package/dist/react/index.d.ts.map +1 -1
- package/dist/react/index.mjs +1 -0
- package/dist/react/react/index.d.ts +2 -0
- package/dist/react/react/typing/Typing.d.ts +17 -0
- package/dist/react/react/typing/index.d.ts +3 -0
- package/dist/react/svelte/index.d.ts +1 -0
- package/dist/react/svelte/typing/index.d.ts +2 -0
- package/dist/react/textToParticle/core/index.d.ts +2 -0
- package/dist/react/textToParticle/core/index.d.ts.map +1 -1
- package/dist/react/textToParticle/core/typing/index.d.ts +52 -0
- package/dist/react/textToParticle/core/typing/index.d.ts.map +1 -0
- package/dist/react/textToParticle/index.d.ts +2 -0
- package/dist/react/textToParticle/index.d.ts.map +1 -1
- package/dist/react/textToParticle/react/index.d.ts +2 -0
- package/dist/react/textToParticle/react/index.d.ts.map +1 -1
- package/dist/react/textToParticle/react/typing/Typing.d.ts +18 -0
- package/dist/react/textToParticle/react/typing/Typing.d.ts.map +1 -0
- package/dist/react/textToParticle/react/typing/index.d.ts +4 -0
- package/dist/react/textToParticle/react/typing/index.d.ts.map +1 -0
- package/dist/react/textToParticle/svelte/index.d.ts +1 -0
- package/dist/react/textToParticle/svelte/index.d.ts.map +1 -1
- package/dist/react/textToParticle/svelte/typing/index.d.ts +3 -0
- package/dist/react/textToParticle/svelte/typing/index.d.ts.map +1 -0
- package/dist/react/textToParticle/vue/index.d.ts +1 -0
- package/dist/react/textToParticle/vue/index.d.ts.map +1 -1
- package/dist/react/textToParticle/vue/typing/index.d.ts +4 -0
- package/dist/react/textToParticle/vue/typing/index.d.ts.map +1 -0
- package/dist/react/typing/Typing.d.ts +18 -0
- package/dist/react/typing/Typing.d.ts.map +1 -0
- package/dist/react/typing/core/count/index.d.ts +52 -0
- package/dist/react/typing/core/count/index.d.ts.map +1 -0
- package/dist/react/typing/core/index.d.ts +20 -0
- package/dist/react/typing/core/index.d.ts.map +1 -0
- package/dist/react/typing/core/textToParticle/index.d.ts +103 -0
- package/dist/react/typing/core/textToParticle/index.d.ts.map +1 -0
- package/dist/react/typing/core/typing/index.d.ts +52 -0
- package/dist/react/typing/core/typing/index.d.ts.map +1 -0
- package/dist/react/typing/index.cjs +1 -0
- package/dist/react/typing/index.d.ts +18 -0
- package/dist/react/typing/index.d.ts.map +1 -0
- package/dist/react/typing/index.mjs +1 -0
- package/dist/react/typing/index.umd.d.ts +7 -0
- package/dist/react/typing/index.umd.d.ts.map +1 -0
- package/dist/react/typing/react/MasonEffect.d.ts +32 -0
- package/dist/react/typing/react/MasonEffect.d.ts.map +1 -0
- package/dist/react/typing/react/count/Count.d.ts +19 -0
- package/dist/react/typing/react/count/Count.d.ts.map +1 -0
- package/dist/react/typing/react/count/index.d.ts +5 -0
- package/dist/react/typing/react/count/index.d.ts.map +1 -0
- package/dist/react/typing/react/index.d.ts +14 -0
- package/dist/react/typing/react/index.d.ts.map +1 -0
- package/dist/react/typing/react/textToParticle/TextToParticle.d.ts +15 -0
- package/dist/react/typing/react/textToParticle/TextToParticle.d.ts.map +1 -0
- package/dist/react/typing/react/textToParticle/index.d.ts +4 -0
- package/dist/react/typing/react/textToParticle/index.d.ts.map +1 -0
- package/dist/react/typing/react/typing/Typing.d.ts +18 -0
- package/dist/react/typing/react/typing/Typing.d.ts.map +1 -0
- package/dist/react/typing/react/typing/index.d.ts +4 -0
- package/dist/react/typing/react/typing/index.d.ts.map +1 -0
- package/dist/react/typing/svelte/count/index.d.ts +2 -0
- package/dist/react/typing/svelte/count/index.d.ts.map +1 -0
- package/dist/react/typing/svelte/index.d.ts +9 -0
- package/dist/react/typing/svelte/index.d.ts.map +1 -0
- package/dist/react/typing/svelte/textToParticle/index.d.ts +2 -0
- package/dist/react/typing/svelte/textToParticle/index.d.ts.map +1 -0
- package/dist/react/typing/svelte/typing/index.d.ts +3 -0
- package/dist/react/typing/svelte/typing/index.d.ts.map +1 -0
- package/dist/react/typing/vue/count/index.d.ts +2 -0
- package/dist/react/typing/vue/count/index.d.ts.map +1 -0
- package/dist/react/typing/vue/index.d.ts +9 -0
- package/dist/react/typing/vue/index.d.ts.map +1 -0
- package/dist/react/typing/vue/textToParticle/index.d.ts +2 -0
- package/dist/react/typing/vue/textToParticle/index.d.ts.map +1 -0
- package/dist/react/typing/vue/typing/index.d.ts +4 -0
- package/dist/react/typing/vue/typing/index.d.ts.map +1 -0
- package/dist/react/vue/index.d.ts +1 -0
- package/dist/react/vue/typing/index.d.ts +3 -0
- package/dist/svelte/count/index.d.ts +52 -0
- package/dist/svelte/index.cjs +1 -1
- package/dist/svelte/index.d.ts +52 -0
- package/dist/svelte/index.mjs +415 -48
- package/dist/svelte/textToParticle/index.d.ts +52 -0
- package/dist/svelte/typing/index.cjs +1 -0
- package/dist/svelte/typing/index.d.ts +215 -0
- package/dist/svelte/typing/index.mjs +634 -0
- package/dist/textToParticle/core/index.d.ts +2 -0
- package/dist/textToParticle/core/index.d.ts.map +1 -1
- package/dist/textToParticle/core/typing/index.d.ts +52 -0
- package/dist/textToParticle/core/typing/index.d.ts.map +1 -0
- package/dist/textToParticle/index.d.ts +2 -0
- package/dist/textToParticle/index.d.ts.map +1 -1
- package/dist/textToParticle/react/index.d.ts +2 -0
- package/dist/textToParticle/react/index.d.ts.map +1 -1
- package/dist/textToParticle/react/typing/Typing.d.ts +18 -0
- package/dist/textToParticle/react/typing/Typing.d.ts.map +1 -0
- package/dist/textToParticle/react/typing/index.d.ts +4 -0
- package/dist/textToParticle/react/typing/index.d.ts.map +1 -0
- package/dist/textToParticle/svelte/index.d.ts +1 -0
- package/dist/textToParticle/svelte/index.d.ts.map +1 -1
- package/dist/textToParticle/svelte/typing/index.d.ts +3 -0
- package/dist/textToParticle/svelte/typing/index.d.ts.map +1 -0
- package/dist/textToParticle/vue/index.d.ts +1 -0
- package/dist/textToParticle/vue/index.d.ts.map +1 -1
- package/dist/textToParticle/vue/typing/index.d.ts +4 -0
- package/dist/textToParticle/vue/typing/index.d.ts.map +1 -0
- package/dist/typing/core/count/index.d.ts +52 -0
- package/dist/typing/core/count/index.d.ts.map +1 -0
- package/dist/typing/core/index.d.ts +20 -0
- package/dist/typing/core/index.d.ts.map +1 -0
- package/dist/typing/core/textToParticle/index.d.ts +103 -0
- package/dist/typing/core/textToParticle/index.d.ts.map +1 -0
- package/dist/typing/core/typing/index.d.ts +52 -0
- package/dist/typing/core/typing/index.d.ts.map +1 -0
- package/dist/typing/index.cjs +1 -0
- package/dist/typing/index.d.ts +18 -0
- package/dist/typing/index.d.ts.map +1 -0
- package/dist/typing/index.mjs +1 -0
- package/dist/typing/index.umd.d.ts +7 -0
- package/dist/typing/index.umd.d.ts.map +1 -0
- package/dist/typing/react/MasonEffect.d.ts +32 -0
- package/dist/typing/react/MasonEffect.d.ts.map +1 -0
- package/dist/typing/react/count/Count.d.ts +19 -0
- package/dist/typing/react/count/Count.d.ts.map +1 -0
- package/dist/typing/react/count/index.d.ts +5 -0
- package/dist/typing/react/count/index.d.ts.map +1 -0
- package/dist/typing/react/index.d.ts +14 -0
- package/dist/typing/react/index.d.ts.map +1 -0
- package/dist/typing/react/textToParticle/TextToParticle.d.ts +15 -0
- package/dist/typing/react/textToParticle/TextToParticle.d.ts.map +1 -0
- package/dist/typing/react/textToParticle/index.d.ts +4 -0
- package/dist/typing/react/textToParticle/index.d.ts.map +1 -0
- package/dist/typing/react/typing/Typing.d.ts +18 -0
- package/dist/typing/react/typing/Typing.d.ts.map +1 -0
- package/dist/typing/react/typing/index.d.ts +4 -0
- package/dist/typing/react/typing/index.d.ts.map +1 -0
- package/dist/typing/svelte/count/index.d.ts +2 -0
- package/dist/typing/svelte/count/index.d.ts.map +1 -0
- package/dist/typing/svelte/index.d.ts +9 -0
- package/dist/typing/svelte/index.d.ts.map +1 -0
- package/dist/typing/svelte/textToParticle/index.d.ts +2 -0
- package/dist/typing/svelte/textToParticle/index.d.ts.map +1 -0
- package/dist/typing/svelte/typing/index.d.ts +3 -0
- package/dist/typing/svelte/typing/index.d.ts.map +1 -0
- package/dist/typing/vue/count/index.d.ts +2 -0
- package/dist/typing/vue/count/index.d.ts.map +1 -0
- package/dist/typing/vue/index.d.ts +9 -0
- package/dist/typing/vue/index.d.ts.map +1 -0
- package/dist/typing/vue/textToParticle/index.d.ts +2 -0
- package/dist/typing/vue/textToParticle/index.d.ts.map +1 -0
- package/dist/typing/vue/typing/index.d.ts +4 -0
- package/dist/typing/vue/typing/index.d.ts.map +1 -0
- package/dist/vue/count/index.d.ts +52 -0
- package/dist/vue/index.cjs +1 -1
- package/dist/vue/index.d.ts +52 -0
- package/dist/vue/index.mjs +312 -7
- package/dist/vue/textToParticle/index.d.ts +52 -0
- package/dist/vue/typing/index.cjs +1 -0
- package/dist/vue/typing/index.d.ts +215 -0
- package/dist/vue/typing/index.mjs +308 -0
- package/package.json +25 -2
package/README.md
CHANGED
|
@@ -1,9 +1,11 @@
|
|
|
1
1
|
# MasonEffect 
|
|
2
2
|
|
|
3
|
-
**Release version 2.0.
|
|
3
|
+
**Release version 2.0.3**
|
|
4
4
|
|
|
5
5
|
A collection of animation effects library. Supports React, Vue, Svelte, and vanilla JavaScript with **Tree-shaking** support.
|
|
6
6
|
|
|
7
|
+
> 🤖 **For AI Agents**: If you are an AI agent (Cursor, GitHub Copilot, ChatGPT, etc.) setting up this package, please read **[llms.txt](./llms.txt)** first for automatic environment detection and configuration.
|
|
8
|
+
|
|
7
9
|
## ✨ Features
|
|
8
10
|
|
|
9
11
|
- 🎯 **Tree-shaking Support**: Import only the effects you need
|
|
@@ -18,6 +20,17 @@ A collection of animation effects library. Supports React, Vue, Svelte, and vani
|
|
|
18
20
|
npm install masoneffect
|
|
19
21
|
```
|
|
20
22
|
|
|
23
|
+
### 🤖 AI Agent Guide
|
|
24
|
+
|
|
25
|
+
**⚠️ IMPORTANT FOR AI AGENTS**: Before using this package, read **[llms.txt](./llms.txt)** (primary AI guide) for:
|
|
26
|
+
- Automatic environment detection (framework, TypeScript, build tool)
|
|
27
|
+
- Framework-specific setup guides
|
|
28
|
+
- Effect recommendation logic based on user requests
|
|
29
|
+
- Complete code templates for all frameworks
|
|
30
|
+
- Tree-shaking optimization rules
|
|
31
|
+
|
|
32
|
+
This guide is optimized for AI agents to automatically configure MasonEffect correctly in any project.
|
|
33
|
+
|
|
21
34
|
## 🎯 Available Effects
|
|
22
35
|
|
|
23
36
|
### 1. TextToParticle
|
|
@@ -415,7 +428,7 @@ npm run serve
|
|
|
415
428
|
## 📦 CDN Usage (UMD)
|
|
416
429
|
|
|
417
430
|
```html
|
|
418
|
-
<script src="https://cdn.jsdelivr.net/npm/masoneffect@2.0.
|
|
431
|
+
<script src="https://cdn.jsdelivr.net/npm/masoneffect@2.0.3/dist/index.umd.min.js"></script>
|
|
419
432
|
<script>
|
|
420
433
|
// TextToParticle (MasonEffect alias for backward compatibility)
|
|
421
434
|
const container = document.getElementById('my-container');
|
package/dist/core/index.d.ts
CHANGED
|
@@ -12,6 +12,8 @@ export type { TextToParticleOptions, Particle } from './textToParticle/index.js'
|
|
|
12
12
|
export { Count, default as CountDefault } from './count/index.js';
|
|
13
13
|
export type { CountOptions } from './count/index.js';
|
|
14
14
|
export { easingFunctions } from './count/index.js';
|
|
15
|
+
export { Typing, default as TypingDefault } from './typing/index.js';
|
|
16
|
+
export type { TypingOptions } from './typing/index.js';
|
|
15
17
|
export { TextToParticle as MasonEffect } from './textToParticle/index.js';
|
|
16
18
|
export type { TextToParticleOptions as MasonEffectOptions } from './textToParticle/index.js';
|
|
17
19
|
export { default } from './textToParticle/index.js';
|
package/dist/core/index.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/core/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAGH,OAAO,EAAE,cAAc,EAAE,OAAO,IAAI,qBAAqB,EAAE,MAAM,2BAA2B,CAAC;AAC7F,YAAY,EAAE,qBAAqB,EAAE,QAAQ,EAAE,MAAM,2BAA2B,CAAC;AAGjF,OAAO,EAAE,KAAK,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAClE,YAAY,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AACrD,OAAO,EAAE,eAAe,EAAE,MAAM,kBAAkB,CAAC;AAGnD,OAAO,EAAE,cAAc,IAAI,WAAW,EAAE,MAAM,2BAA2B,CAAC;AAC1E,YAAY,EAAE,qBAAqB,IAAI,kBAAkB,EAAE,MAAM,2BAA2B,CAAC;AAG7F,OAAO,EAAE,OAAO,EAAE,MAAM,2BAA2B,CAAC"}
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/core/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAGH,OAAO,EAAE,cAAc,EAAE,OAAO,IAAI,qBAAqB,EAAE,MAAM,2BAA2B,CAAC;AAC7F,YAAY,EAAE,qBAAqB,EAAE,QAAQ,EAAE,MAAM,2BAA2B,CAAC;AAGjF,OAAO,EAAE,KAAK,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAClE,YAAY,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AACrD,OAAO,EAAE,eAAe,EAAE,MAAM,kBAAkB,CAAC;AAGnD,OAAO,EAAE,MAAM,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,mBAAmB,CAAC;AACrE,YAAY,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAGvD,OAAO,EAAE,cAAc,IAAI,WAAW,EAAE,MAAM,2BAA2B,CAAC;AAC1E,YAAY,EAAE,qBAAqB,IAAI,kBAAkB,EAAE,MAAM,2BAA2B,CAAC;AAG7F,OAAO,EAAE,OAAO,EAAE,MAAM,2BAA2B,CAAC"}
|
|
@@ -0,0 +1,52 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Typing - 타이핑 애니메이션 효과
|
|
3
|
+
* 바닐라 JS 코어 클래스
|
|
4
|
+
*
|
|
5
|
+
* 사용법:
|
|
6
|
+
* import { Typing } from 'masoneffect/typing';
|
|
7
|
+
*/
|
|
8
|
+
export interface TypingOptions {
|
|
9
|
+
text: string;
|
|
10
|
+
speed?: number;
|
|
11
|
+
delay?: number;
|
|
12
|
+
enabled?: boolean;
|
|
13
|
+
threshold?: number;
|
|
14
|
+
rootMargin?: string;
|
|
15
|
+
triggerOnce?: boolean;
|
|
16
|
+
showCursor?: boolean;
|
|
17
|
+
cursorChar?: string;
|
|
18
|
+
onUpdate?: (text: string) => void;
|
|
19
|
+
onComplete?: () => void;
|
|
20
|
+
}
|
|
21
|
+
export declare class Typing {
|
|
22
|
+
container: HTMLElement;
|
|
23
|
+
config: Required<Omit<TypingOptions, 'onUpdate' | 'onComplete'>> & {
|
|
24
|
+
onUpdate: TypingOptions['onUpdate'];
|
|
25
|
+
onComplete: TypingOptions['onComplete'];
|
|
26
|
+
};
|
|
27
|
+
textUnits: string[];
|
|
28
|
+
currentIndex: number;
|
|
29
|
+
displayedText: string;
|
|
30
|
+
timeoutId: ReturnType<typeof setTimeout> | null;
|
|
31
|
+
intersectionObserver: IntersectionObserver | null;
|
|
32
|
+
isRunning: boolean;
|
|
33
|
+
hasTriggered: boolean;
|
|
34
|
+
originalText: string;
|
|
35
|
+
constructor(container: HTMLElement | string, options: TypingOptions);
|
|
36
|
+
init(): void;
|
|
37
|
+
setupIntersectionObserver(): void;
|
|
38
|
+
private originalChars;
|
|
39
|
+
private charUnitMap;
|
|
40
|
+
private initializeTextStructure;
|
|
41
|
+
private getCharIndexFromUnitIndex;
|
|
42
|
+
private buildTextFromUnits;
|
|
43
|
+
start(): void;
|
|
44
|
+
typeNext(): void;
|
|
45
|
+
stop(): void;
|
|
46
|
+
reset(): void;
|
|
47
|
+
updateDisplay(text: string): void;
|
|
48
|
+
setText(newText: string): void;
|
|
49
|
+
destroy(): void;
|
|
50
|
+
}
|
|
51
|
+
export default Typing;
|
|
52
|
+
//# sourceMappingURL=index.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/core/typing/index.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH,MAAM,WAAW,aAAa;IAC5B,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;CACzB;AA0DD,qBAAa,MAAM;IACjB,SAAS,EAAE,WAAW,CAAC;IACvB,MAAM,EAAE,QAAQ,CAAC,IAAI,CAAC,aAAa,EAAE,UAAU,GAAG,YAAY,CAAC,CAAC,GAAG;QACjE,QAAQ,EAAE,aAAa,CAAC,UAAU,CAAC,CAAC;QACpC,UAAU,EAAE,aAAa,CAAC,YAAY,CAAC,CAAC;KACzC,CAAC;IACF,SAAS,EAAE,MAAM,EAAE,CAAC;IACpB,YAAY,EAAE,MAAM,CAAC;IACrB,aAAa,EAAE,MAAM,CAAC;IACtB,SAAS,EAAE,UAAU,CAAC,OAAO,UAAU,CAAC,GAAG,IAAI,CAAC;IAChD,oBAAoB,EAAE,oBAAoB,GAAG,IAAI,CAAC;IAClD,SAAS,EAAE,OAAO,CAAC;IACnB,YAAY,EAAE,OAAO,CAAC;IACtB,YAAY,EAAE,MAAM,CAAC;gBAET,SAAS,EAAE,WAAW,GAAG,MAAM,EAAE,OAAO,EAAE,aAAa;IAgDnE,IAAI,IAAI,IAAI;IAQZ,yBAAyB,IAAI,IAAI;IAqCjC,OAAO,CAAC,aAAa,CAAgB;IACrC,OAAO,CAAC,WAAW,CAAgB;IAEnC,OAAO,CAAC,uBAAuB;IAuB/B,OAAO,CAAC,yBAAyB;IAqCjC,OAAO,CAAC,kBAAkB;IAO1B,KAAK,IAAI,IAAI;IASb,QAAQ,IAAI,IAAI;IAwChB,IAAI,IAAI,IAAI;IAQZ,KAAK,IAAI,IAAI;IAQb,aAAa,CAAC,IAAI,EAAE,MAAM,GAAG,IAAI;IAKjC,OAAO,CAAC,OAAO,EAAE,MAAM,GAAG,IAAI;IAY9B,OAAO,IAAI,IAAI;CAOhB;AAGD,eAAe,MAAM,CAAC"}
|
|
@@ -12,6 +12,8 @@ export type { TextToParticleOptions, Particle } from './textToParticle/index.js'
|
|
|
12
12
|
export { Count, default as CountDefault } from './count/index.js';
|
|
13
13
|
export type { CountOptions } from './count/index.js';
|
|
14
14
|
export { easingFunctions } from './count/index.js';
|
|
15
|
+
export { Typing, default as TypingDefault } from './typing/index.js';
|
|
16
|
+
export type { TypingOptions } from './typing/index.js';
|
|
15
17
|
export { TextToParticle as MasonEffect } from './textToParticle/index.js';
|
|
16
18
|
export type { TextToParticleOptions as MasonEffectOptions } from './textToParticle/index.js';
|
|
17
19
|
export { default } from './textToParticle/index.js';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/core/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAGH,OAAO,EAAE,cAAc,EAAE,OAAO,IAAI,qBAAqB,EAAE,MAAM,2BAA2B,CAAC;AAC7F,YAAY,EAAE,qBAAqB,EAAE,QAAQ,EAAE,MAAM,2BAA2B,CAAC;AAGjF,OAAO,EAAE,KAAK,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAClE,YAAY,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AACrD,OAAO,EAAE,eAAe,EAAE,MAAM,kBAAkB,CAAC;AAGnD,OAAO,EAAE,cAAc,IAAI,WAAW,EAAE,MAAM,2BAA2B,CAAC;AAC1E,YAAY,EAAE,qBAAqB,IAAI,kBAAkB,EAAE,MAAM,2BAA2B,CAAC;AAG7F,OAAO,EAAE,OAAO,EAAE,MAAM,2BAA2B,CAAC"}
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/core/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAGH,OAAO,EAAE,cAAc,EAAE,OAAO,IAAI,qBAAqB,EAAE,MAAM,2BAA2B,CAAC;AAC7F,YAAY,EAAE,qBAAqB,EAAE,QAAQ,EAAE,MAAM,2BAA2B,CAAC;AAGjF,OAAO,EAAE,KAAK,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAClE,YAAY,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AACrD,OAAO,EAAE,eAAe,EAAE,MAAM,kBAAkB,CAAC;AAGnD,OAAO,EAAE,MAAM,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,mBAAmB,CAAC;AACrE,YAAY,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAGvD,OAAO,EAAE,cAAc,IAAI,WAAW,EAAE,MAAM,2BAA2B,CAAC;AAC1E,YAAY,EAAE,qBAAqB,IAAI,kBAAkB,EAAE,MAAM,2BAA2B,CAAC;AAG7F,OAAO,EAAE,OAAO,EAAE,MAAM,2BAA2B,CAAC"}
|
|
@@ -0,0 +1,52 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Typing - 타이핑 애니메이션 효과
|
|
3
|
+
* 바닐라 JS 코어 클래스
|
|
4
|
+
*
|
|
5
|
+
* 사용법:
|
|
6
|
+
* import { Typing } from 'masoneffect/typing';
|
|
7
|
+
*/
|
|
8
|
+
export interface TypingOptions {
|
|
9
|
+
text: string;
|
|
10
|
+
speed?: number;
|
|
11
|
+
delay?: number;
|
|
12
|
+
enabled?: boolean;
|
|
13
|
+
threshold?: number;
|
|
14
|
+
rootMargin?: string;
|
|
15
|
+
triggerOnce?: boolean;
|
|
16
|
+
showCursor?: boolean;
|
|
17
|
+
cursorChar?: string;
|
|
18
|
+
onUpdate?: (text: string) => void;
|
|
19
|
+
onComplete?: () => void;
|
|
20
|
+
}
|
|
21
|
+
export declare class Typing {
|
|
22
|
+
container: HTMLElement;
|
|
23
|
+
config: Required<Omit<TypingOptions, 'onUpdate' | 'onComplete'>> & {
|
|
24
|
+
onUpdate: TypingOptions['onUpdate'];
|
|
25
|
+
onComplete: TypingOptions['onComplete'];
|
|
26
|
+
};
|
|
27
|
+
textUnits: string[];
|
|
28
|
+
currentIndex: number;
|
|
29
|
+
displayedText: string;
|
|
30
|
+
timeoutId: ReturnType<typeof setTimeout> | null;
|
|
31
|
+
intersectionObserver: IntersectionObserver | null;
|
|
32
|
+
isRunning: boolean;
|
|
33
|
+
hasTriggered: boolean;
|
|
34
|
+
originalText: string;
|
|
35
|
+
constructor(container: HTMLElement | string, options: TypingOptions);
|
|
36
|
+
init(): void;
|
|
37
|
+
setupIntersectionObserver(): void;
|
|
38
|
+
private originalChars;
|
|
39
|
+
private charUnitMap;
|
|
40
|
+
private initializeTextStructure;
|
|
41
|
+
private getCharIndexFromUnitIndex;
|
|
42
|
+
private buildTextFromUnits;
|
|
43
|
+
start(): void;
|
|
44
|
+
typeNext(): void;
|
|
45
|
+
stop(): void;
|
|
46
|
+
reset(): void;
|
|
47
|
+
updateDisplay(text: string): void;
|
|
48
|
+
setText(newText: string): void;
|
|
49
|
+
destroy(): void;
|
|
50
|
+
}
|
|
51
|
+
export default Typing;
|
|
52
|
+
//# sourceMappingURL=index.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/core/typing/index.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH,MAAM,WAAW,aAAa;IAC5B,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;CACzB;AA0DD,qBAAa,MAAM;IACjB,SAAS,EAAE,WAAW,CAAC;IACvB,MAAM,EAAE,QAAQ,CAAC,IAAI,CAAC,aAAa,EAAE,UAAU,GAAG,YAAY,CAAC,CAAC,GAAG;QACjE,QAAQ,EAAE,aAAa,CAAC,UAAU,CAAC,CAAC;QACpC,UAAU,EAAE,aAAa,CAAC,YAAY,CAAC,CAAC;KACzC,CAAC;IACF,SAAS,EAAE,MAAM,EAAE,CAAC;IACpB,YAAY,EAAE,MAAM,CAAC;IACrB,aAAa,EAAE,MAAM,CAAC;IACtB,SAAS,EAAE,UAAU,CAAC,OAAO,UAAU,CAAC,GAAG,IAAI,CAAC;IAChD,oBAAoB,EAAE,oBAAoB,GAAG,IAAI,CAAC;IAClD,SAAS,EAAE,OAAO,CAAC;IACnB,YAAY,EAAE,OAAO,CAAC;IACtB,YAAY,EAAE,MAAM,CAAC;gBAET,SAAS,EAAE,WAAW,GAAG,MAAM,EAAE,OAAO,EAAE,aAAa;IAgDnE,IAAI,IAAI,IAAI;IAQZ,yBAAyB,IAAI,IAAI;IAqCjC,OAAO,CAAC,aAAa,CAAgB;IACrC,OAAO,CAAC,WAAW,CAAgB;IAEnC,OAAO,CAAC,uBAAuB;IAuB/B,OAAO,CAAC,yBAAyB;IAqCjC,OAAO,CAAC,kBAAkB;IAO1B,KAAK,IAAI,IAAI;IASb,QAAQ,IAAI,IAAI;IAwChB,IAAI,IAAI,IAAI;IAQZ,KAAK,IAAI,IAAI;IAQb,aAAa,CAAC,IAAI,EAAE,MAAM,GAAG,IAAI;IAKjC,OAAO,CAAC,OAAO,EAAE,MAAM,GAAG,IAAI;IAY9B,OAAO,IAAI,IAAI;CAOhB;AAGD,eAAe,MAAM,CAAC"}
|
package/dist/count/index.d.ts
CHANGED
|
@@ -12,5 +12,7 @@ export type { TextToParticleOptions, MasonEffectOptions, Particle } from './core
|
|
|
12
12
|
export { Count } from './core/index.js';
|
|
13
13
|
export type { CountOptions } from './core/index.js';
|
|
14
14
|
export { easingFunctions } from './core/index.js';
|
|
15
|
+
export { Typing } from './core/index.js';
|
|
16
|
+
export type { TypingOptions } from './core/index.js';
|
|
15
17
|
export { default } from './core/index.js';
|
|
16
18
|
//# sourceMappingURL=index.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAGH,OAAO,EAAE,cAAc,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAC9D,YAAY,EAAE,qBAAqB,EAAE,kBAAkB,EAAE,QAAQ,EAAE,MAAM,iBAAiB,CAAC;AAG3F,OAAO,EAAE,KAAK,EAAE,MAAM,iBAAiB,CAAC;AACxC,YAAY,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AACpD,OAAO,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;AAGlD,OAAO,EAAE,OAAO,EAAE,MAAM,iBAAiB,CAAC"}
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAGH,OAAO,EAAE,cAAc,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAC9D,YAAY,EAAE,qBAAqB,EAAE,kBAAkB,EAAE,QAAQ,EAAE,MAAM,iBAAiB,CAAC;AAG3F,OAAO,EAAE,KAAK,EAAE,MAAM,iBAAiB,CAAC;AACxC,YAAY,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AACpD,OAAO,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;AAGlD,OAAO,EAAE,MAAM,EAAE,MAAM,iBAAiB,CAAC;AACzC,YAAY,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAGrD,OAAO,EAAE,OAAO,EAAE,MAAM,iBAAiB,CAAC"}
|
|
@@ -6,6 +6,8 @@ export type { TextToParticleRef, TextToParticleOptions } from './textToParticle/
|
|
|
6
6
|
export { default as Count } from './count/index.js';
|
|
7
7
|
export type { CountRef, CountOptions } from './count/index.js';
|
|
8
8
|
export { easingFunctions } from './count/index.js';
|
|
9
|
+
export { default as Typing } from './typing/index.js';
|
|
10
|
+
export type { TypingRef, TypingOptions } from './typing/index.js';
|
|
9
11
|
export { default as MasonEffect } from './textToParticle/index.js';
|
|
10
12
|
export type { TextToParticleRef as MasonEffectRef, TextToParticleOptions as MasonEffectOptions } from './textToParticle/index.js';
|
|
11
13
|
export { default } from './textToParticle/index.js';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/react/index.ts"],"names":[],"mappings":"AAAA;;GAEG;AAGH,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,2BAA2B,CAAC;AACtE,YAAY,EAAE,iBAAiB,EAAE,qBAAqB,EAAE,MAAM,2BAA2B,CAAC;AAG1F,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,kBAAkB,CAAC;AACpD,YAAY,EAAE,QAAQ,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAC/D,OAAO,EAAE,eAAe,EAAE,MAAM,kBAAkB,CAAC;AAGnD,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,2BAA2B,CAAC;AACnE,YAAY,EAAE,iBAAiB,IAAI,cAAc,EAAE,qBAAqB,IAAI,kBAAkB,EAAE,MAAM,2BAA2B,CAAC;AAGlI,OAAO,EAAE,OAAO,EAAE,MAAM,2BAA2B,CAAC"}
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/react/index.ts"],"names":[],"mappings":"AAAA;;GAEG;AAGH,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,2BAA2B,CAAC;AACtE,YAAY,EAAE,iBAAiB,EAAE,qBAAqB,EAAE,MAAM,2BAA2B,CAAC;AAG1F,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,kBAAkB,CAAC;AACpD,YAAY,EAAE,QAAQ,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAC/D,OAAO,EAAE,eAAe,EAAE,MAAM,kBAAkB,CAAC;AAGnD,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,mBAAmB,CAAC;AACtD,YAAY,EAAE,SAAS,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAGlE,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,2BAA2B,CAAC;AACnE,YAAY,EAAE,iBAAiB,IAAI,cAAc,EAAE,qBAAqB,IAAI,kBAAkB,EAAE,MAAM,2BAA2B,CAAC;AAGlI,OAAO,EAAE,OAAO,EAAE,MAAM,2BAA2B,CAAC"}
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import type { TypingOptions } from '../../core/typing/index.js';
|
|
3
|
+
export interface TypingRef {
|
|
4
|
+
start: () => void;
|
|
5
|
+
stop: () => void;
|
|
6
|
+
reset: () => void;
|
|
7
|
+
setText: (text: string) => void;
|
|
8
|
+
destroy: () => void;
|
|
9
|
+
}
|
|
10
|
+
interface TypingProps extends Omit<TypingOptions, 'onUpdate' | 'onComplete'> {
|
|
11
|
+
className?: string;
|
|
12
|
+
style?: React.CSSProperties;
|
|
13
|
+
onUpdate?: (text: string) => void;
|
|
14
|
+
onComplete?: () => void;
|
|
15
|
+
}
|
|
16
|
+
declare const TypingComponent: React.ForwardRefExoticComponent<TypingProps & React.RefAttributes<TypingRef>>;
|
|
17
|
+
export default TypingComponent;
|
|
18
|
+
//# sourceMappingURL=Typing.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Typing.d.ts","sourceRoot":"","sources":["../../../../src/react/typing/Typing.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA4B,MAAM,OAAO,CAAC;AAEjD,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,4BAA4B,CAAC;AAEhE,MAAM,WAAW,SAAS;IACxB,KAAK,EAAE,MAAM,IAAI,CAAC;IAClB,IAAI,EAAE,MAAM,IAAI,CAAC;IACjB,KAAK,EAAE,MAAM,IAAI,CAAC;IAClB,OAAO,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IAChC,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB;AAED,UAAU,WAAY,SAAQ,IAAI,CAAC,aAAa,EAAE,UAAU,GAAG,YAAY,CAAC;IAC1E,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;CACzB;AAED,QAAA,MAAM,eAAe,+EAsIpB,CAAC;AAIF,eAAe,eAAe,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/react/typing/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC;AACtC,YAAY,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AAC7C,YAAY,EAAE,aAAa,EAAE,MAAM,4BAA4B,CAAC"}
|
|
@@ -3,6 +3,7 @@
|
|
|
3
3
|
*/
|
|
4
4
|
export { default as TextToParticle } from './textToParticle/index.js';
|
|
5
5
|
export { default as Count } from './count/index.js';
|
|
6
|
+
export { default as Typing } from './typing/index.js';
|
|
6
7
|
export { default as MasonEffect } from './textToParticle/index.js';
|
|
7
8
|
export { default } from './textToParticle/index.js';
|
|
8
9
|
//# sourceMappingURL=index.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/svelte/index.ts"],"names":[],"mappings":"AAAA;;GAEG;AAGH,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,2BAA2B,CAAC;AAGtE,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAGpD,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,2BAA2B,CAAC;AAGnE,OAAO,EAAE,OAAO,EAAE,MAAM,2BAA2B,CAAC"}
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/svelte/index.ts"],"names":[],"mappings":"AAAA;;GAEG;AAGH,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,2BAA2B,CAAC;AAGtE,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAGpD,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,mBAAmB,CAAC;AAGtD,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,2BAA2B,CAAC;AAGnE,OAAO,EAAE,OAAO,EAAE,MAAM,2BAA2B,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/svelte/typing/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,iBAAiB,CAAC;AAC1C,YAAY,EAAE,aAAa,EAAE,MAAM,4BAA4B,CAAC"}
|
|
@@ -3,6 +3,7 @@
|
|
|
3
3
|
*/
|
|
4
4
|
export { default as TextToParticle } from './textToParticle/index.js';
|
|
5
5
|
export { default as Count } from './count/index.js';
|
|
6
|
+
export { default as Typing } from './typing/index.js';
|
|
6
7
|
export { default as MasonEffect } from './textToParticle/index.js';
|
|
7
8
|
export { default } from './textToParticle/index.js';
|
|
8
9
|
//# sourceMappingURL=index.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/vue/index.ts"],"names":[],"mappings":"AAAA;;GAEG;AAGH,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,2BAA2B,CAAC;AAGtE,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAGpD,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,2BAA2B,CAAC;AAGnE,OAAO,EAAE,OAAO,EAAE,MAAM,2BAA2B,CAAC"}
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/vue/index.ts"],"names":[],"mappings":"AAAA;;GAEG;AAGH,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,2BAA2B,CAAC;AAGtE,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAGpD,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,mBAAmB,CAAC;AAGtD,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,2BAA2B,CAAC;AAGnE,OAAO,EAAE,OAAO,EAAE,MAAM,2BAA2B,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/vue/typing/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC;AACvC,YAAY,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAC9C,YAAY,EAAE,aAAa,EAAE,MAAM,4BAA4B,CAAC"}
|
package/dist/index.cjs
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
function t(t,i){let s=null;return function(...h){null!==s&&clearTimeout(s),s=setTimeout(()=>{s=null,t.apply(this,h)},i)}}Object.defineProperty(exports,"t",{value:!0});class i{constructor(i,s={}){if(this.container="string"==typeof i?document.querySelector(i):i,!this.container)throw new Error("Container element not found");this.config={text:s.text||"mason effect",densityStep:s.densityStep??2,maxParticles:s.maxParticles??3200,pointSize:s.pointSize??.5,ease:s.ease??.05,repelRadius:s.repelRadius??150,repelStrength:s.repelStrength??1,particleColor:s.particleColor||"#fff",fontFamily:s.fontFamily||"Inter, system-ui, Arial",fontSize:s.fontSize||null,width:s.width||null,height:s.height||null,devicePixelRatio:s.devicePixelRatio??null,onReady:s.onReady||null,onUpdate:s.onUpdate||null},this.canvas=document.createElement("canvas");const h=this.canvas.getContext("2d",{willReadFrequently:!0});if(!h)throw new Error("Canvas context not available");this.ctx=h,this.container.appendChild(this.canvas),this.canvas.style.display="block",this.offCanvas=document.createElement("canvas");const e=this.offCanvas.getContext("2d",{willReadFrequently:!0});if(!e)throw new Error("Offscreen canvas context not available");this.offCtx=e,this.W=0,this.H=0,this.DPR=this.config.devicePixelRatio||Math.min(window.devicePixelRatio||1,1.8),this.particles=[],this.mouse={x:0,y:0,down:!1},this.animationId=null,this.isRunning=!1,this.isVisible=!1,this.intersectionObserver=null,this.debounceDelay=s.debounceDelay??150;const n=this.handleResize.bind(this);this.handleResize=t(n,this.debounceDelay),this.handleMouseMove=this.handleMouseMove.bind(this),this.handleMouseLeave=this.handleMouseLeave.bind(this),this.handleMouseDown=this.handleMouseDown.bind(this),this.handleMouseUp=this.handleMouseUp.bind(this),this.i=t(this.h.bind(this),this.debounceDelay),this.o=t(this.l.bind(this),this.debounceDelay),this.init()}init(){this.resize(),this.setupEventListeners(),this.setupIntersectionObserver(),this.config.onReady&&this.config.onReady(this)}setupIntersectionObserver(){if("undefined"==typeof window||void 0===window.IntersectionObserver)return this.isVisible=!0,void this.start();this.intersectionObserver||(this.intersectionObserver=new IntersectionObserver(t=>{for(const i of t)i.target===this.container&&(i.isIntersecting?(this.isVisible=!0,this.start()):(this.isVisible=!1,this.stop()))},{threshold:.1}),this.intersectionObserver.observe(this.container))}resize(){const t=this.config.width||this.container.clientWidth||window.innerWidth,i=this.config.height||this.container.clientHeight||.7*window.innerHeight;if(t<=0||i<=0)return;this.W=Math.floor(t*this.DPR),this.H=Math.floor(i*this.DPR);const s=4096;if(this.W>s||this.H>s){const t=Math.min(s/this.W,s/this.H);this.W=Math.floor(this.W*t),this.H=Math.floor(this.H*t),this.DPR=this.DPR*t}this.canvas.width=this.W,this.canvas.height=this.H,this.canvas.style.width=t+"px",this.canvas.style.height=i+"px",this.W>0&&this.H>0&&(this.buildTargets(),this.particles.length||this.initParticles())}measureTextFit(t,i,s,h){this.offCtx.font=`400 ${t}px ${this.config.fontFamily}`;const e=i.split("\n"),n=t,o=.1*t,r=.05*t;let a=0;for(const t of e){if(0===t.length)continue;const i=this.offCtx.measureText(t).width+r*(t.length>0?t.length-1:0);a=Math.max(a,i)}const l=e.length>0?n*e.length+o*(e.length-1):n;return{width:a,height:l,fits:a<=s&&l<=h}}findOptimalFontSize(t,i,s,h){if(this.measureTextFit(h,t,i,s).fits)return h;if(h<=12)return 12;let e=12,n=h,o=12;for(;e<=n;){const h=Math.floor((e+n)/2);this.measureTextFit(h,t,i,s).fits?(o=h,e=h+1):n=h-1}return o}buildTargets(){if(this.W<=0||this.H<=0)return;const t=this.config.text;this.offCanvas.width=this.W,this.offCanvas.height=this.H,this.offCtx.clearRect(0,0,this.offCanvas.width,this.offCanvas.height);const i=Math.min(this.W,this.H),s=this.config.fontSize||Math.max(80,Math.floor(.18*i)),h=this.W-80,e=this.H-80,n=this.findOptimalFontSize(t,h,e,s);this.offCtx.fillStyle="#ffffff",this.offCtx.textAlign="center",this.offCtx.textBaseline="middle",this.offCtx.font=`400 ${n}px ${this.config.fontFamily}`;const o=t.split("\n"),r=n,a=.1*n,l=.05*n,u=o.length>0?r*o.length+a*(o.length-1):r;let c=this.H/2-u/2+r/2;for(const t of o){if(0===t.length){c+=r+a;continue}const i=t.split(""),s=this.offCtx.measureText(t).width+l*(i.length>0?i.length-1:0);let h=this.W/2-s/2;for(const t of i)this.offCtx.fillText(t,h+this.offCtx.measureText(t).width/2,c),h+=this.offCtx.measureText(t).width+l;c+=r+a}const f=Math.max(2,this.config.densityStep),d=this.offCtx.getImageData(0,0,this.W,this.H).data,p=[];for(let t=0;t<this.H;t+=f)for(let i=0;i<this.W;i+=f){const s=4*(t*this.W+i);d[s]+d[s+1]+d[s+2]>600&&p.push({x:i,y:t})}for(;p.length>this.config.maxParticles;)p.splice(Math.floor(Math.random()*p.length),1);if(this.particles.length<p.length){const t=p.length-this.particles.length;for(let i=0;i<t;i++)this.particles.push(this.makeParticle())}else this.particles.length>p.length&&(this.particles.length=p.length);for(let t=0;t<this.particles.length;t++){const i=this.particles[t],s=p[t];i.tx=s.x,i.ty=s.y}}makeParticle(){const t=Math.random()*this.W,i=Math.random()*this.H;return{x:t,y:i,vx:0,vy:0,tx:t,ty:i,initialX:t,initialY:i,j:Math.random()*Math.PI*2}}initParticles(){for(const t of this.particles){const i=Math.random()*this.W,s=Math.random()*this.H;t.x=i,t.y=s,t.vx=t.vy=0,t.initialX=i,t.initialY=s}}scatter(){for(const t of this.particles)void 0!==t.initialX&&void 0!==t.initialY?(t.tx=t.initialX,t.ty=t.initialY):(t.initialX=t.x,t.initialY=t.y,t.tx=t.initialX,t.ty=t.initialY)}morph(t){this.i(t)}h(t){if(0!==this.W&&0!==this.H||this.resize(),"string"==typeof t)this.config.text=t,this.buildTargets();else if(t&&"object"==typeof t){const i=void 0!==t.text;this.config={...this.config,...t},i&&this.buildTargets()}else this.buildTargets()}update(){this.ctx.clearRect(0,0,this.W,this.H);for(const t of this.particles){let i=(t.tx-t.x)*this.config.ease,s=(t.ty-t.y)*this.config.ease;if(this.mouse.x||this.mouse.y){const h=t.x-this.mouse.x,e=t.y-this.mouse.y,n=h*h+e*e,o=this.config.repelRadius*this.DPR;if(n<o*o){const t=Math.sqrt(n)+1e-4,r=(this.mouse.down?-1:1)*this.config.repelStrength*(1-t/o);i+=h/t*r*6,s+=e/t*r*6}}t.j+=2,i+=.05*Math.cos(t.j),s+=.05*Math.sin(1.3*t.j),t.vx=(t.vx+i)*Math.random(),t.vy=(t.vy+s)*Math.random(),t.x+=t.vx,t.y+=t.vy}this.ctx.fillStyle=this.config.particleColor;const t=this.config.pointSize*this.DPR;for(const i of this.particles)this.ctx.beginPath(),this.ctx.arc(i.x,i.y,t,0,2*Math.PI),this.ctx.fill();this.config.onUpdate&&this.config.onUpdate(this)}animate(){this.isRunning&&(this.update(),this.animationId=requestAnimationFrame(()=>this.animate()))}start(){this.isRunning||(this.isRunning=!0,this.animate())}stop(){this.isRunning=!1,this.animationId&&(cancelAnimationFrame(this.animationId),this.animationId=null)}setupEventListeners(){window.addEventListener("resize",this.handleResize),this.canvas.addEventListener("mousemove",this.handleMouseMove),this.canvas.addEventListener("mouseleave",this.handleMouseLeave),this.canvas.addEventListener("mousedown",this.handleMouseDown),window.addEventListener("mouseup",this.handleMouseUp)}removeEventListeners(){window.removeEventListener("resize",this.handleResize),this.canvas.removeEventListener("mousemove",this.handleMouseMove),this.canvas.removeEventListener("mouseleave",this.handleMouseLeave),this.canvas.removeEventListener("mousedown",this.handleMouseDown),window.removeEventListener("mouseup",this.handleMouseUp)}handleResize(){this.resize()}handleMouseMove(t){const i=this.canvas.getBoundingClientRect();this.mouse.x=(t.clientX-i.left)*this.DPR,this.mouse.y=(t.clientY-i.top)*this.DPR}handleMouseLeave(){this.mouse.x=this.mouse.y=0}handleMouseDown(){this.mouse.down=!0}handleMouseUp(){this.mouse.down=!1}updateConfig(t){this.o(t)}l(t){this.config={...this.config,...t},t.text&&this.buildTargets()}destroy(){this.stop(),this.removeEventListeners(),this.intersectionObserver&&(this.intersectionObserver.disconnect(),this.intersectionObserver=null),this.canvas&&this.canvas.parentNode&&this.canvas.parentNode.removeChild(this.canvas)}}const s={linear:t=>t,easeInQuad:t=>t*t,easeOutQuad:t=>t*(2-t),easeInOutQuad:t=>t<.5?2*t*t:(4-2*t)*t-1,easeOutCubic:t=>--t*t*t+1};exports.Count=class{constructor(t,i){if(this.container="string"==typeof t?document.querySelector(t):t,!this.container)throw new Error("Container element not found");this.config={targetValue:i.targetValue,duration:i.duration??2e3,startValue:i.startValue??0,enabled:i.enabled??!0,easing:i.easing??s.linear,threshold:i.threshold??.2,rootMargin:i.rootMargin??"0px 0px -100px 0px",triggerOnce:i.triggerOnce??!1,onUpdate:i.onUpdate||null,onComplete:i.onComplete||null},this.currentValue=this.config.startValue,this.startTime=null,this.animationFrameId=null,this.intersectionObserver=null,this.isRunning=!1,this.hasTriggered=!1,this.init()}init(){this.updateDisplay(this.config.startValue),this.setupIntersectionObserver()}setupIntersectionObserver(){"undefined"!=typeof window&&void 0!==window.IntersectionObserver?(this.intersectionObserver=new IntersectionObserver(t=>{for(const i of t)if(i.target===this.container)if(i.isIntersecting)!this.hasTriggered&&this.config.enabled&&(this.hasTriggered=!0,this.start()),this.config.triggerOnce&&this.intersectionObserver?.unobserve(this.container);else if(!this.config.triggerOnce){const t=i.boundingClientRect,s=window.innerHeight,h=window.innerWidth;(t.bottom<=0||t.top>=s||t.right<=0||t.left>=h)&&this.isRunning&&this.reset()}},{threshold:this.config.threshold,rootMargin:this.config.rootMargin}),this.intersectionObserver.observe(this.container)):this.config.enabled&&this.start()}start(){if(this.isRunning)return;if(!this.config.enabled)return;this.isRunning=!0,this.startTime=null,this.currentValue=this.config.startValue,this.updateDisplay(this.currentValue);const t=i=>{null===this.startTime&&(this.startTime=i);const s=i-this.startTime,h=Math.min(s/this.config.duration,1),e=this.config.easing(h);this.currentValue=Math.floor(this.config.startValue+(this.config.targetValue-this.config.startValue)*e),this.updateDisplay(this.currentValue),this.config.onUpdate&&this.config.onUpdate(this.currentValue),h<1?this.animationFrameId=requestAnimationFrame(t):(this.currentValue=this.config.targetValue,this.updateDisplay(this.currentValue),this.isRunning=!1,this.config.onComplete&&this.config.onComplete())};this.animationFrameId=requestAnimationFrame(t)}stop(){this.isRunning=!1,null!==this.animationFrameId&&(cancelAnimationFrame(this.animationFrameId),this.animationFrameId=null)}reset(){this.stop(),this.currentValue=this.config.startValue,this.updateDisplay(this.currentValue),this.hasTriggered=!1,this.startTime=null}updateDisplay(t){this.container.textContent=this.formatNumber(t)}formatNumber(t){return Math.floor(t).toLocaleString()}updateConfig(t){const i=this.isRunning;this.stop(),this.config={...this.config,...t,onUpdate:void 0!==t.onUpdate?t.onUpdate:this.config.onUpdate,onComplete:void 0!==t.onComplete?t.onComplete:this.config.onComplete},void 0!==t.targetValue?(this.reset(),i&&this.config.enabled&&this.start()):i&&this.config.enabled&&this.start()}getValue(){return this.currentValue}destroy(){this.stop(),this.intersectionObserver&&(this.intersectionObserver.disconnect(),this.intersectionObserver=null)}},exports.MasonEffect=i,exports.TextToParticle=i,exports.default=i,exports.easingFunctions=s;
|
|
1
|
+
function t(t,s){let i=null;return function(...h){null!==i&&clearTimeout(i),i=setTimeout(()=>{i=null,t.apply(this,h)},s)}}Object.defineProperty(exports,"t",{value:!0});class s{constructor(s,i={}){if(this.container="string"==typeof s?document.querySelector(s):s,!this.container)throw new Error("Container element not found");this.config={text:i.text||"mason effect",densityStep:i.densityStep??2,maxParticles:i.maxParticles??3200,pointSize:i.pointSize??.5,ease:i.ease??.05,repelRadius:i.repelRadius??150,repelStrength:i.repelStrength??1,particleColor:i.particleColor||"#fff",fontFamily:i.fontFamily||"Inter, system-ui, Arial",fontSize:i.fontSize||null,width:i.width||null,height:i.height||null,devicePixelRatio:i.devicePixelRatio??null,onReady:i.onReady||null,onUpdate:i.onUpdate||null},this.canvas=document.createElement("canvas");const h=this.canvas.getContext("2d",{willReadFrequently:!0});if(!h)throw new Error("Canvas context not available");this.ctx=h,this.container.appendChild(this.canvas),this.canvas.style.display="block",this.offCanvas=document.createElement("canvas");const e=this.offCanvas.getContext("2d",{willReadFrequently:!0});if(!e)throw new Error("Offscreen canvas context not available");this.offCtx=e,this.W=0,this.H=0,this.DPR=this.config.devicePixelRatio||Math.min(window.devicePixelRatio||1,1.8),this.particles=[],this.mouse={x:0,y:0,down:!1},this.animationId=null,this.isRunning=!1,this.isVisible=!1,this.intersectionObserver=null,this.debounceDelay=i.debounceDelay??150;const n=this.handleResize.bind(this);this.handleResize=t(n,this.debounceDelay),this.handleMouseMove=this.handleMouseMove.bind(this),this.handleMouseLeave=this.handleMouseLeave.bind(this),this.handleMouseDown=this.handleMouseDown.bind(this),this.handleMouseUp=this.handleMouseUp.bind(this),this.i=t(this.h.bind(this),this.debounceDelay),this.o=t(this.l.bind(this),this.debounceDelay),this.init()}init(){this.resize(),this.setupEventListeners(),this.setupIntersectionObserver(),this.config.onReady&&this.config.onReady(this)}setupIntersectionObserver(){if("undefined"==typeof window||void 0===window.IntersectionObserver)return this.isVisible=!0,void this.start();this.intersectionObserver||(this.intersectionObserver=new IntersectionObserver(t=>{for(const s of t)s.target===this.container&&(s.isIntersecting?(this.isVisible=!0,this.start()):(this.isVisible=!1,this.stop()))},{threshold:.1}),this.intersectionObserver.observe(this.container))}resize(){const t=this.config.width||this.container.clientWidth||window.innerWidth,s=this.config.height||this.container.clientHeight||.7*window.innerHeight;if(t<=0||s<=0)return;this.W=Math.floor(t*this.DPR),this.H=Math.floor(s*this.DPR);const i=4096;if(this.W>i||this.H>i){const t=Math.min(i/this.W,i/this.H);this.W=Math.floor(this.W*t),this.H=Math.floor(this.H*t),this.DPR=this.DPR*t}this.canvas.width=this.W,this.canvas.height=this.H,this.canvas.style.width=t+"px",this.canvas.style.height=s+"px",this.W>0&&this.H>0&&(this.buildTargets(),this.particles.length||this.initParticles())}measureTextFit(t,s,i,h){this.offCtx.font=`400 ${t}px ${this.config.fontFamily}`;const e=s.split("\n"),n=t,o=.1*t,r=.05*t;let l=0;for(const t of e){if(0===t.length)continue;const s=this.offCtx.measureText(t).width+r*(t.length>0?t.length-1:0);l=Math.max(l,s)}const a=e.length>0?n*e.length+o*(e.length-1):n;return{width:l,height:a,fits:l<=i&&a<=h}}findOptimalFontSize(t,s,i,h){if(this.measureTextFit(h,t,s,i).fits)return h;if(h<=12)return 12;let e=12,n=h,o=12;for(;e<=n;){const h=Math.floor((e+n)/2);this.measureTextFit(h,t,s,i).fits?(o=h,e=h+1):n=h-1}return o}buildTargets(){if(this.W<=0||this.H<=0)return;const t=this.config.text;this.offCanvas.width=this.W,this.offCanvas.height=this.H,this.offCtx.clearRect(0,0,this.offCanvas.width,this.offCanvas.height);const s=Math.min(this.W,this.H),i=this.config.fontSize||Math.max(80,Math.floor(.18*s)),h=this.W-80,e=this.H-80,n=this.findOptimalFontSize(t,h,e,i);this.offCtx.fillStyle="#ffffff",this.offCtx.textAlign="center",this.offCtx.textBaseline="middle",this.offCtx.font=`400 ${n}px ${this.config.fontFamily}`;const o=t.split("\n"),r=n,l=.1*n,a=.05*n,u=o.length>0?r*o.length+l*(o.length-1):r;let c=this.H/2-u/2+r/2;for(const t of o){if(0===t.length){c+=r+l;continue}const s=t.split(""),i=this.offCtx.measureText(t).width+a*(s.length>0?s.length-1:0);let h=this.W/2-i/2;for(const t of s)this.offCtx.fillText(t,h+this.offCtx.measureText(t).width/2,c),h+=this.offCtx.measureText(t).width+a;c+=r+l}const f=Math.max(2,this.config.densityStep),d=this.offCtx.getImageData(0,0,this.W,this.H).data,p=[];for(let t=0;t<this.H;t+=f)for(let s=0;s<this.W;s+=f){const i=4*(t*this.W+s);d[i]+d[i+1]+d[i+2]>600&&p.push({x:s,y:t})}for(;p.length>this.config.maxParticles;)p.splice(Math.floor(Math.random()*p.length),1);if(this.particles.length<p.length){const t=p.length-this.particles.length;for(let s=0;s<t;s++)this.particles.push(this.makeParticle())}else this.particles.length>p.length&&(this.particles.length=p.length);for(let t=0;t<this.particles.length;t++){const s=this.particles[t],i=p[t];s.tx=i.x,s.ty=i.y}}makeParticle(){const t=Math.random()*this.W,s=Math.random()*this.H;return{x:t,y:s,vx:0,vy:0,tx:t,ty:s,initialX:t,initialY:s,j:Math.random()*Math.PI*2}}initParticles(){for(const t of this.particles){const s=Math.random()*this.W,i=Math.random()*this.H;t.x=s,t.y=i,t.vx=t.vy=0,t.initialX=s,t.initialY=i}}scatter(){for(const t of this.particles)void 0!==t.initialX&&void 0!==t.initialY?(t.tx=t.initialX,t.ty=t.initialY):(t.initialX=t.x,t.initialY=t.y,t.tx=t.initialX,t.ty=t.initialY)}morph(t){this.i(t)}h(t){if(0!==this.W&&0!==this.H||this.resize(),"string"==typeof t)this.config.text=t,this.buildTargets();else if(t&&"object"==typeof t){const s=void 0!==t.text;this.config={...this.config,...t},s&&this.buildTargets()}else this.buildTargets()}update(){this.ctx.clearRect(0,0,this.W,this.H);for(const t of this.particles){let s=(t.tx-t.x)*this.config.ease,i=(t.ty-t.y)*this.config.ease;if(this.mouse.x||this.mouse.y){const h=t.x-this.mouse.x,e=t.y-this.mouse.y,n=h*h+e*e,o=this.config.repelRadius*this.DPR;if(n<o*o){const t=Math.sqrt(n)+1e-4,r=(this.mouse.down?-1:1)*this.config.repelStrength*(1-t/o);s+=h/t*r*6,i+=e/t*r*6}}t.j+=2,s+=.05*Math.cos(t.j),i+=.05*Math.sin(1.3*t.j),t.vx=(t.vx+s)*Math.random(),t.vy=(t.vy+i)*Math.random(),t.x+=t.vx,t.y+=t.vy}this.ctx.fillStyle=this.config.particleColor;const t=this.config.pointSize*this.DPR;for(const s of this.particles)this.ctx.beginPath(),this.ctx.arc(s.x,s.y,t,0,2*Math.PI),this.ctx.fill();this.config.onUpdate&&this.config.onUpdate(this)}animate(){this.isRunning&&(this.update(),this.animationId=requestAnimationFrame(()=>this.animate()))}start(){this.isRunning||(this.isRunning=!0,this.animate())}stop(){this.isRunning=!1,this.animationId&&(cancelAnimationFrame(this.animationId),this.animationId=null)}setupEventListeners(){window.addEventListener("resize",this.handleResize),this.canvas.addEventListener("mousemove",this.handleMouseMove),this.canvas.addEventListener("mouseleave",this.handleMouseLeave),this.canvas.addEventListener("mousedown",this.handleMouseDown),window.addEventListener("mouseup",this.handleMouseUp)}removeEventListeners(){window.removeEventListener("resize",this.handleResize),this.canvas.removeEventListener("mousemove",this.handleMouseMove),this.canvas.removeEventListener("mouseleave",this.handleMouseLeave),this.canvas.removeEventListener("mousedown",this.handleMouseDown),window.removeEventListener("mouseup",this.handleMouseUp)}handleResize(){this.resize()}handleMouseMove(t){const s=this.canvas.getBoundingClientRect();this.mouse.x=(t.clientX-s.left)*this.DPR,this.mouse.y=(t.clientY-s.top)*this.DPR}handleMouseLeave(){this.mouse.x=this.mouse.y=0}handleMouseDown(){this.mouse.down=!0}handleMouseUp(){this.mouse.down=!1}updateConfig(t){this.o(t)}l(t){this.config={...this.config,...t},t.text&&this.buildTargets()}destroy(){this.stop(),this.removeEventListeners(),this.intersectionObserver&&(this.intersectionObserver.disconnect(),this.intersectionObserver=null),this.canvas&&this.canvas.parentNode&&this.canvas.parentNode.removeChild(this.canvas)}}const i={linear:t=>t,easeInQuad:t=>t*t,easeOutQuad:t=>t*(2-t),easeInOutQuad:t=>t<.5?2*t*t:(4-2*t)*t-1,easeOutCubic:t=>--t*t*t+1};function h(t){const s=t.charCodeAt(0);if(s<44032||s>55203)return[t];const i=s-44032,h=Math.floor(i/588),e=Math.floor(i%588/28),n=i%28,o=[];return o.push(["ㄱ","ㄲ","ㄴ","ㄷ","ㄸ","ㄹ","ㅁ","ㅂ","ㅃ","ㅅ","ㅆ","ㅇ","ㅈ","ㅉ","ㅊ","ㅋ","ㅌ","ㅍ","ㅎ"][h]),o.push(["ㅏ","ㅐ","ㅑ","ㅒ","ㅓ","ㅔ","ㅕ","ㅖ","ㅗ","ㅘ","ㅙ","ㅚ","ㅛ","ㅜ","ㅝ","ㅞ","ㅟ","ㅠ","ㅡ","ㅢ","ㅣ"][e]),n>0&&o.push(["","ㄱ","ㄲ","ㄳ","ㄴ","ㄵ","ㄶ","ㄷ","ㄹ","ㄺ","ㄻ","ㄼ","ㄽ","ㄾ","ㄿ","ㅀ","ㅁ","ㅂ","ㅄ","ㅅ","ㅆ","ㅇ","ㅈ","ㅊ","ㅋ","ㅌ","ㅍ","ㅎ"][n]),o}function e(t){const s=[];for(let i=0;i<t.length;i++){const e=t[i],n=e.charCodeAt(0);if(n>=44032&&n<=55203){const t=h(e);s.push(...t)}else s.push(e)}return s}exports.Count=class{constructor(t,s){if(this.container="string"==typeof t?document.querySelector(t):t,!this.container)throw new Error("Container element not found");this.config={targetValue:s.targetValue,duration:s.duration??2e3,startValue:s.startValue??0,enabled:s.enabled??!0,easing:s.easing??i.linear,threshold:s.threshold??.2,rootMargin:s.rootMargin??"0px 0px -100px 0px",triggerOnce:s.triggerOnce??!1,onUpdate:s.onUpdate||null,onComplete:s.onComplete||null},this.currentValue=this.config.startValue,this.startTime=null,this.animationFrameId=null,this.intersectionObserver=null,this.isRunning=!1,this.hasTriggered=!1,this.init()}init(){this.updateDisplay(this.config.startValue),this.setupIntersectionObserver()}setupIntersectionObserver(){"undefined"!=typeof window&&void 0!==window.IntersectionObserver?(this.intersectionObserver=new IntersectionObserver(t=>{for(const s of t)if(s.target===this.container)if(s.isIntersecting)!this.hasTriggered&&this.config.enabled&&(this.hasTriggered=!0,this.start()),this.config.triggerOnce&&this.intersectionObserver?.unobserve(this.container);else if(!this.config.triggerOnce){const t=s.boundingClientRect,i=window.innerHeight,h=window.innerWidth;(t.bottom<=0||t.top>=i||t.right<=0||t.left>=h)&&this.isRunning&&this.reset()}},{threshold:this.config.threshold,rootMargin:this.config.rootMargin}),this.intersectionObserver.observe(this.container)):this.config.enabled&&this.start()}start(){if(this.isRunning)return;if(!this.config.enabled)return;this.isRunning=!0,this.startTime=null,this.currentValue=this.config.startValue,this.updateDisplay(this.currentValue);const t=s=>{null===this.startTime&&(this.startTime=s);const i=s-this.startTime,h=Math.min(i/this.config.duration,1),e=this.config.easing(h);this.currentValue=Math.floor(this.config.startValue+(this.config.targetValue-this.config.startValue)*e),this.updateDisplay(this.currentValue),this.config.onUpdate&&this.config.onUpdate(this.currentValue),h<1?this.animationFrameId=requestAnimationFrame(t):(this.currentValue=this.config.targetValue,this.updateDisplay(this.currentValue),this.isRunning=!1,this.config.onComplete&&this.config.onComplete())};this.animationFrameId=requestAnimationFrame(t)}stop(){this.isRunning=!1,null!==this.animationFrameId&&(cancelAnimationFrame(this.animationFrameId),this.animationFrameId=null)}reset(){this.stop(),this.currentValue=this.config.startValue,this.updateDisplay(this.currentValue),this.hasTriggered=!1,this.startTime=null}updateDisplay(t){this.container.textContent=this.formatNumber(t)}formatNumber(t){return Math.floor(t).toLocaleString()}updateConfig(t){const s=this.isRunning;this.stop(),this.config={...this.config,...t,onUpdate:void 0!==t.onUpdate?t.onUpdate:this.config.onUpdate,onComplete:void 0!==t.onComplete?t.onComplete:this.config.onComplete},void 0!==t.targetValue?(this.reset(),s&&this.config.enabled&&this.start()):s&&this.config.enabled&&this.start()}getValue(){return this.currentValue}destroy(){this.stop(),this.intersectionObserver&&(this.intersectionObserver.disconnect(),this.intersectionObserver=null)}},exports.MasonEffect=s,exports.TextToParticle=s,exports.Typing=class{constructor(t,s){if(this.originalChars=[],this.charUnitMap=[],this.container="string"==typeof t?document.querySelector(t):t,!this.container)throw new Error("Container element not found");this.originalText=s.text,this.config={text:s.text,speed:s.speed??50,delay:s.delay??0,enabled:s.enabled??!0,threshold:s.threshold??.2,rootMargin:s.rootMargin??"0px 0px -100px 0px",triggerOnce:s.triggerOnce??!1,showCursor:s.showCursor??!0,cursorChar:s.cursorChar??"|",onUpdate:s.onUpdate||null,onComplete:s.onComplete||null},this.textUnits=e(this.config.text),this.originalChars=[],this.charUnitMap=[],this.initializeTextStructure(),this.currentIndex=0,this.displayedText="",this.timeoutId=null,this.intersectionObserver=null,this.isRunning=!1,this.hasTriggered=!1,this.init()}init(){this.updateDisplay(""),this.setupIntersectionObserver()}setupIntersectionObserver(){"undefined"!=typeof window&&void 0!==window.IntersectionObserver?(this.intersectionObserver=new IntersectionObserver(t=>{for(const s of t)s.target===this.container&&s.isIntersecting&&!this.hasTriggered&&(this.config.enabled&&setTimeout(()=>this.start(),this.config.delay),this.hasTriggered=!0,this.config.triggerOnce&&this.intersectionObserver?.disconnect())},{threshold:this.config.threshold,rootMargin:this.config.rootMargin}),this.intersectionObserver.observe(this.container)):this.config.enabled&&setTimeout(()=>this.start(),this.config.delay)}initializeTextStructure(){this.originalChars=[],this.charUnitMap=[];for(let t=0;t<this.originalText.length;t++){const s=this.originalText[t],i=s.charCodeAt(0);if(this.originalChars.push(s),i>=44032&&i<=55203){const t=h(s);this.charUnitMap.push(t.length)}else this.charUnitMap.push(1)}}getCharIndexFromUnitIndex(t){if(0===t)return 0;let s=0,i=0;for(let h=0;h<this.charUnitMap.length;h++){const e=this.charUnitMap[h];if(i+=e,!(t>=i)){const n=t-(i-e);if(n>0){const t=this.originalChars[h]&&this.originalChars[h].charCodeAt(0)>=44032&&this.originalChars[h].charCodeAt(0)<=55203;(t&&n>=2||!t&&n>=1)&&(s=h+1)}break}s=h+1}return s}buildTextFromUnits(t){if(0===t.length)return"";const s=this.getCharIndexFromUnitIndex(t.length);return this.originalText.substring(0,s)}start(){this.isRunning||(this.isRunning=!0,this.currentIndex=0,this.displayedText="",this.typeNext())}typeNext(){if(this.currentIndex>=this.textUnits.length)return this.isRunning=!1,this.config.showCursor&&this.updateDisplay(this.originalText),void(this.config.onComplete&&this.config.onComplete());const t=this.textUnits.slice(0,this.currentIndex+1);this.displayedText=this.buildTextFromUnits(t);let s=this.displayedText;this.config.showCursor&&(s+=this.config.cursorChar),this.updateDisplay(s),this.config.onUpdate&&this.config.onUpdate(this.displayedText),this.currentIndex++,this.timeoutId=setTimeout(()=>{this.typeNext()},this.config.speed)}stop(){this.isRunning=!1,this.timeoutId&&(clearTimeout(this.timeoutId),this.timeoutId=null)}reset(){this.stop(),this.currentIndex=0,this.displayedText="",this.hasTriggered=!1,this.updateDisplay("")}updateDisplay(t){this.container.textContent=t}setText(t){this.originalText=t,this.config.text=t,this.textUnits=e(t),this.initializeTextStructure(),this.reset(),this.config.enabled&&setTimeout(()=>this.start(),this.config.delay)}destroy(){this.stop(),this.intersectionObserver&&(this.intersectionObserver.disconnect(),this.intersectionObserver=null)}},exports.default=s,exports.easingFunctions=i;
|
package/dist/index.d.ts
CHANGED
|
@@ -12,5 +12,7 @@ export type { TextToParticleOptions, MasonEffectOptions, Particle } from './core
|
|
|
12
12
|
export { Count } from './core/index.js';
|
|
13
13
|
export type { CountOptions } from './core/index.js';
|
|
14
14
|
export { easingFunctions } from './core/index.js';
|
|
15
|
+
export { Typing } from './core/index.js';
|
|
16
|
+
export type { TypingOptions } from './core/index.js';
|
|
15
17
|
export { default } from './core/index.js';
|
|
16
18
|
//# sourceMappingURL=index.d.ts.map
|
package/dist/index.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAGH,OAAO,EAAE,cAAc,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAC9D,YAAY,EAAE,qBAAqB,EAAE,kBAAkB,EAAE,QAAQ,EAAE,MAAM,iBAAiB,CAAC;AAG3F,OAAO,EAAE,KAAK,EAAE,MAAM,iBAAiB,CAAC;AACxC,YAAY,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AACpD,OAAO,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;AAGlD,OAAO,EAAE,OAAO,EAAE,MAAM,iBAAiB,CAAC"}
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAGH,OAAO,EAAE,cAAc,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAC9D,YAAY,EAAE,qBAAqB,EAAE,kBAAkB,EAAE,QAAQ,EAAE,MAAM,iBAAiB,CAAC;AAG3F,OAAO,EAAE,KAAK,EAAE,MAAM,iBAAiB,CAAC;AACxC,YAAY,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AACpD,OAAO,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;AAGlD,OAAO,EAAE,MAAM,EAAE,MAAM,iBAAiB,CAAC;AACzC,YAAY,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAGrD,OAAO,EAAE,OAAO,EAAE,MAAM,iBAAiB,CAAC"}
|
package/dist/index.mjs
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
function t(t,i){let s=null;return function(...h){null!==s&&clearTimeout(s),s=setTimeout(()=>{s=null,t.apply(this,h)},i)}}class i{constructor(i,s={}){if(this.container="string"==typeof i?document.querySelector(i):i,!this.container)throw new Error("Container element not found");this.config={text:s.text||"mason effect",densityStep:s.densityStep??2,maxParticles:s.maxParticles??3200,pointSize:s.pointSize??.5,ease:s.ease??.05,repelRadius:s.repelRadius??150,repelStrength:s.repelStrength??1,particleColor:s.particleColor||"#fff",fontFamily:s.fontFamily||"Inter, system-ui, Arial",fontSize:s.fontSize||null,width:s.width||null,height:s.height||null,devicePixelRatio:s.devicePixelRatio??null,onReady:s.onReady||null,onUpdate:s.onUpdate||null},this.canvas=document.createElement("canvas");const h=this.canvas.getContext("2d",{willReadFrequently:!0});if(!h)throw new Error("Canvas context not available");this.ctx=h,this.container.appendChild(this.canvas),this.canvas.style.display="block",this.offCanvas=document.createElement("canvas");const e=this.offCanvas.getContext("2d",{willReadFrequently:!0});if(!e)throw new Error("Offscreen canvas context not available");this.offCtx=e,this.W=0,this.H=0,this.DPR=this.config.devicePixelRatio||Math.min(window.devicePixelRatio||1,1.8),this.particles=[],this.mouse={x:0,y:0,down:!1},this.animationId=null,this.isRunning=!1,this.isVisible=!1,this.intersectionObserver=null,this.debounceDelay=s.debounceDelay??150;const n=this.handleResize.bind(this);this.handleResize=t(n,this.debounceDelay),this.handleMouseMove=this.handleMouseMove.bind(this),this.handleMouseLeave=this.handleMouseLeave.bind(this),this.handleMouseDown=this.handleMouseDown.bind(this),this.handleMouseUp=this.handleMouseUp.bind(this),this.t=t(this.i.bind(this),this.debounceDelay),this.h=t(this.o.bind(this),this.debounceDelay),this.init()}init(){this.resize(),this.setupEventListeners(),this.setupIntersectionObserver(),this.config.onReady&&this.config.onReady(this)}setupIntersectionObserver(){if("undefined"==typeof window||void 0===window.IntersectionObserver)return this.isVisible=!0,void this.start();this.intersectionObserver||(this.intersectionObserver=new IntersectionObserver(t=>{for(const i of t)i.target===this.container&&(i.isIntersecting?(this.isVisible=!0,this.start()):(this.isVisible=!1,this.stop()))},{threshold:.1}),this.intersectionObserver.observe(this.container))}resize(){const t=this.config.width||this.container.clientWidth||window.innerWidth,i=this.config.height||this.container.clientHeight||.7*window.innerHeight;if(t<=0||i<=0)return;this.W=Math.floor(t*this.DPR),this.H=Math.floor(i*this.DPR);const s=4096;if(this.W>s||this.H>s){const t=Math.min(s/this.W,s/this.H);this.W=Math.floor(this.W*t),this.H=Math.floor(this.H*t),this.DPR=this.DPR*t}this.canvas.width=this.W,this.canvas.height=this.H,this.canvas.style.width=t+"px",this.canvas.style.height=i+"px",this.W>0&&this.H>0&&(this.buildTargets(),this.particles.length||this.initParticles())}measureTextFit(t,i,s,h){this.offCtx.font=`400 ${t}px ${this.config.fontFamily}`;const e=i.split("\n"),n=t,o=.1*t,r=.05*t;let a=0;for(const t of e){if(0===t.length)continue;const i=this.offCtx.measureText(t).width+r*(t.length>0?t.length-1:0);a=Math.max(a,i)}const l=e.length>0?n*e.length+o*(e.length-1):n;return{width:a,height:l,fits:a<=s&&l<=h}}findOptimalFontSize(t,i,s,h){if(this.measureTextFit(h,t,i,s).fits)return h;if(h<=12)return 12;let e=12,n=h,o=12;for(;e<=n;){const h=Math.floor((e+n)/2);this.measureTextFit(h,t,i,s).fits?(o=h,e=h+1):n=h-1}return o}buildTargets(){if(this.W<=0||this.H<=0)return;const t=this.config.text;this.offCanvas.width=this.W,this.offCanvas.height=this.H,this.offCtx.clearRect(0,0,this.offCanvas.width,this.offCanvas.height);const i=Math.min(this.W,this.H),s=this.config.fontSize||Math.max(80,Math.floor(.18*i)),h=this.W-80,e=this.H-80,n=this.findOptimalFontSize(t,h,e,s);this.offCtx.fillStyle="#ffffff",this.offCtx.textAlign="center",this.offCtx.textBaseline="middle",this.offCtx.font=`400 ${n}px ${this.config.fontFamily}`;const o=t.split("\n"),r=n,a=.1*n,l=.05*n,u=o.length>0?r*o.length+a*(o.length-1):r;let f=this.H/2-u/2+r/2;for(const t of o){if(0===t.length){f+=r+a;continue}const i=t.split(""),s=this.offCtx.measureText(t).width+l*(i.length>0?i.length-1:0);let h=this.W/2-s/2;for(const t of i)this.offCtx.fillText(t,h+this.offCtx.measureText(t).width/2,f),h+=this.offCtx.measureText(t).width+l;f+=r+a}const c=Math.max(2,this.config.densityStep),d=this.offCtx.getImageData(0,0,this.W,this.H).data,m=[];for(let t=0;t<this.H;t+=c)for(let i=0;i<this.W;i+=c){const s=4*(t*this.W+i);d[s]+d[s+1]+d[s+2]>600&&m.push({x:i,y:t})}for(;m.length>this.config.maxParticles;)m.splice(Math.floor(Math.random()*m.length),1);if(this.particles.length<m.length){const t=m.length-this.particles.length;for(let i=0;i<t;i++)this.particles.push(this.makeParticle())}else this.particles.length>m.length&&(this.particles.length=m.length);for(let t=0;t<this.particles.length;t++){const i=this.particles[t],s=m[t];i.tx=s.x,i.ty=s.y}}makeParticle(){const t=Math.random()*this.W,i=Math.random()*this.H;return{x:t,y:i,vx:0,vy:0,tx:t,ty:i,initialX:t,initialY:i,j:Math.random()*Math.PI*2}}initParticles(){for(const t of this.particles){const i=Math.random()*this.W,s=Math.random()*this.H;t.x=i,t.y=s,t.vx=t.vy=0,t.initialX=i,t.initialY=s}}scatter(){for(const t of this.particles)void 0!==t.initialX&&void 0!==t.initialY?(t.tx=t.initialX,t.ty=t.initialY):(t.initialX=t.x,t.initialY=t.y,t.tx=t.initialX,t.ty=t.initialY)}morph(t){this.t(t)}i(t){if(0!==this.W&&0!==this.H||this.resize(),"string"==typeof t)this.config.text=t,this.buildTargets();else if(t&&"object"==typeof t){const i=void 0!==t.text;this.config={...this.config,...t},i&&this.buildTargets()}else this.buildTargets()}update(){this.ctx.clearRect(0,0,this.W,this.H);for(const t of this.particles){let i=(t.tx-t.x)*this.config.ease,s=(t.ty-t.y)*this.config.ease;if(this.mouse.x||this.mouse.y){const h=t.x-this.mouse.x,e=t.y-this.mouse.y,n=h*h+e*e,o=this.config.repelRadius*this.DPR;if(n<o*o){const t=Math.sqrt(n)+1e-4,r=(this.mouse.down?-1:1)*this.config.repelStrength*(1-t/o);i+=h/t*r*6,s+=e/t*r*6}}t.j+=2,i+=.05*Math.cos(t.j),s+=.05*Math.sin(1.3*t.j),t.vx=(t.vx+i)*Math.random(),t.vy=(t.vy+s)*Math.random(),t.x+=t.vx,t.y+=t.vy}this.ctx.fillStyle=this.config.particleColor;const t=this.config.pointSize*this.DPR;for(const i of this.particles)this.ctx.beginPath(),this.ctx.arc(i.x,i.y,t,0,2*Math.PI),this.ctx.fill();this.config.onUpdate&&this.config.onUpdate(this)}animate(){this.isRunning&&(this.update(),this.animationId=requestAnimationFrame(()=>this.animate()))}start(){this.isRunning||(this.isRunning=!0,this.animate())}stop(){this.isRunning=!1,this.animationId&&(cancelAnimationFrame(this.animationId),this.animationId=null)}setupEventListeners(){window.addEventListener("resize",this.handleResize),this.canvas.addEventListener("mousemove",this.handleMouseMove),this.canvas.addEventListener("mouseleave",this.handleMouseLeave),this.canvas.addEventListener("mousedown",this.handleMouseDown),window.addEventListener("mouseup",this.handleMouseUp)}removeEventListeners(){window.removeEventListener("resize",this.handleResize),this.canvas.removeEventListener("mousemove",this.handleMouseMove),this.canvas.removeEventListener("mouseleave",this.handleMouseLeave),this.canvas.removeEventListener("mousedown",this.handleMouseDown),window.removeEventListener("mouseup",this.handleMouseUp)}handleResize(){this.resize()}handleMouseMove(t){const i=this.canvas.getBoundingClientRect();this.mouse.x=(t.clientX-i.left)*this.DPR,this.mouse.y=(t.clientY-i.top)*this.DPR}handleMouseLeave(){this.mouse.x=this.mouse.y=0}handleMouseDown(){this.mouse.down=!0}handleMouseUp(){this.mouse.down=!1}updateConfig(t){this.h(t)}o(t){this.config={...this.config,...t},t.text&&this.buildTargets()}destroy(){this.stop(),this.removeEventListeners(),this.intersectionObserver&&(this.intersectionObserver.disconnect(),this.intersectionObserver=null),this.canvas&&this.canvas.parentNode&&this.canvas.parentNode.removeChild(this.canvas)}}const s={linear:t=>t,easeInQuad:t=>t*t,easeOutQuad:t=>t*(2-t),easeInOutQuad:t=>t<.5?2*t*t:(4-2*t)*t-1,easeOutCubic:t=>--t*t*t+1};class h{constructor(t,i){if(this.container="string"==typeof t?document.querySelector(t):t,!this.container)throw new Error("Container element not found");this.config={targetValue:i.targetValue,duration:i.duration??2e3,startValue:i.startValue??0,enabled:i.enabled??!0,easing:i.easing??s.linear,threshold:i.threshold??.2,rootMargin:i.rootMargin??"0px 0px -100px 0px",triggerOnce:i.triggerOnce??!1,onUpdate:i.onUpdate||null,onComplete:i.onComplete||null},this.currentValue=this.config.startValue,this.startTime=null,this.animationFrameId=null,this.intersectionObserver=null,this.isRunning=!1,this.hasTriggered=!1,this.init()}init(){this.updateDisplay(this.config.startValue),this.setupIntersectionObserver()}setupIntersectionObserver(){"undefined"!=typeof window&&void 0!==window.IntersectionObserver?(this.intersectionObserver=new IntersectionObserver(t=>{for(const i of t)if(i.target===this.container)if(i.isIntersecting)!this.hasTriggered&&this.config.enabled&&(this.hasTriggered=!0,this.start()),this.config.triggerOnce&&this.intersectionObserver?.unobserve(this.container);else if(!this.config.triggerOnce){const t=i.boundingClientRect,s=window.innerHeight,h=window.innerWidth;(t.bottom<=0||t.top>=s||t.right<=0||t.left>=h)&&this.isRunning&&this.reset()}},{threshold:this.config.threshold,rootMargin:this.config.rootMargin}),this.intersectionObserver.observe(this.container)):this.config.enabled&&this.start()}start(){if(this.isRunning)return;if(!this.config.enabled)return;this.isRunning=!0,this.startTime=null,this.currentValue=this.config.startValue,this.updateDisplay(this.currentValue);const t=i=>{null===this.startTime&&(this.startTime=i);const s=i-this.startTime,h=Math.min(s/this.config.duration,1),e=this.config.easing(h);this.currentValue=Math.floor(this.config.startValue+(this.config.targetValue-this.config.startValue)*e),this.updateDisplay(this.currentValue),this.config.onUpdate&&this.config.onUpdate(this.currentValue),h<1?this.animationFrameId=requestAnimationFrame(t):(this.currentValue=this.config.targetValue,this.updateDisplay(this.currentValue),this.isRunning=!1,this.config.onComplete&&this.config.onComplete())};this.animationFrameId=requestAnimationFrame(t)}stop(){this.isRunning=!1,null!==this.animationFrameId&&(cancelAnimationFrame(this.animationFrameId),this.animationFrameId=null)}reset(){this.stop(),this.currentValue=this.config.startValue,this.updateDisplay(this.currentValue),this.hasTriggered=!1,this.startTime=null}updateDisplay(t){this.container.textContent=this.formatNumber(t)}formatNumber(t){return Math.floor(t).toLocaleString()}updateConfig(t){const i=this.isRunning;this.stop(),this.config={...this.config,...t,onUpdate:void 0!==t.onUpdate?t.onUpdate:this.config.onUpdate,onComplete:void 0!==t.onComplete?t.onComplete:this.config.onComplete},void 0!==t.targetValue?(this.reset(),i&&this.config.enabled&&this.start()):i&&this.config.enabled&&this.start()}getValue(){return this.currentValue}destroy(){this.stop(),this.intersectionObserver&&(this.intersectionObserver.disconnect(),this.intersectionObserver=null)}}export{h as Count,i as MasonEffect,i as TextToParticle,i as default,s as easingFunctions};
|
|
1
|
+
function t(t,i){let s=null;return function(...h){null!==s&&clearTimeout(s),s=setTimeout(()=>{s=null,t.apply(this,h)},i)}}class i{constructor(i,s={}){if(this.container="string"==typeof i?document.querySelector(i):i,!this.container)throw new Error("Container element not found");this.config={text:s.text||"mason effect",densityStep:s.densityStep??2,maxParticles:s.maxParticles??3200,pointSize:s.pointSize??.5,ease:s.ease??.05,repelRadius:s.repelRadius??150,repelStrength:s.repelStrength??1,particleColor:s.particleColor||"#fff",fontFamily:s.fontFamily||"Inter, system-ui, Arial",fontSize:s.fontSize||null,width:s.width||null,height:s.height||null,devicePixelRatio:s.devicePixelRatio??null,onReady:s.onReady||null,onUpdate:s.onUpdate||null},this.canvas=document.createElement("canvas");const h=this.canvas.getContext("2d",{willReadFrequently:!0});if(!h)throw new Error("Canvas context not available");this.ctx=h,this.container.appendChild(this.canvas),this.canvas.style.display="block",this.offCanvas=document.createElement("canvas");const e=this.offCanvas.getContext("2d",{willReadFrequently:!0});if(!e)throw new Error("Offscreen canvas context not available");this.offCtx=e,this.W=0,this.H=0,this.DPR=this.config.devicePixelRatio||Math.min(window.devicePixelRatio||1,1.8),this.particles=[],this.mouse={x:0,y:0,down:!1},this.animationId=null,this.isRunning=!1,this.isVisible=!1,this.intersectionObserver=null,this.debounceDelay=s.debounceDelay??150;const n=this.handleResize.bind(this);this.handleResize=t(n,this.debounceDelay),this.handleMouseMove=this.handleMouseMove.bind(this),this.handleMouseLeave=this.handleMouseLeave.bind(this),this.handleMouseDown=this.handleMouseDown.bind(this),this.handleMouseUp=this.handleMouseUp.bind(this),this.t=t(this.i.bind(this),this.debounceDelay),this.h=t(this.o.bind(this),this.debounceDelay),this.init()}init(){this.resize(),this.setupEventListeners(),this.setupIntersectionObserver(),this.config.onReady&&this.config.onReady(this)}setupIntersectionObserver(){if("undefined"==typeof window||void 0===window.IntersectionObserver)return this.isVisible=!0,void this.start();this.intersectionObserver||(this.intersectionObserver=new IntersectionObserver(t=>{for(const i of t)i.target===this.container&&(i.isIntersecting?(this.isVisible=!0,this.start()):(this.isVisible=!1,this.stop()))},{threshold:.1}),this.intersectionObserver.observe(this.container))}resize(){const t=this.config.width||this.container.clientWidth||window.innerWidth,i=this.config.height||this.container.clientHeight||.7*window.innerHeight;if(t<=0||i<=0)return;this.W=Math.floor(t*this.DPR),this.H=Math.floor(i*this.DPR);const s=4096;if(this.W>s||this.H>s){const t=Math.min(s/this.W,s/this.H);this.W=Math.floor(this.W*t),this.H=Math.floor(this.H*t),this.DPR=this.DPR*t}this.canvas.width=this.W,this.canvas.height=this.H,this.canvas.style.width=t+"px",this.canvas.style.height=i+"px",this.W>0&&this.H>0&&(this.buildTargets(),this.particles.length||this.initParticles())}measureTextFit(t,i,s,h){this.offCtx.font=`400 ${t}px ${this.config.fontFamily}`;const e=i.split("\n"),n=t,o=.1*t,r=.05*t;let l=0;for(const t of e){if(0===t.length)continue;const i=this.offCtx.measureText(t).width+r*(t.length>0?t.length-1:0);l=Math.max(l,i)}const a=e.length>0?n*e.length+o*(e.length-1):n;return{width:l,height:a,fits:l<=s&&a<=h}}findOptimalFontSize(t,i,s,h){if(this.measureTextFit(h,t,i,s).fits)return h;if(h<=12)return 12;let e=12,n=h,o=12;for(;e<=n;){const h=Math.floor((e+n)/2);this.measureTextFit(h,t,i,s).fits?(o=h,e=h+1):n=h-1}return o}buildTargets(){if(this.W<=0||this.H<=0)return;const t=this.config.text;this.offCanvas.width=this.W,this.offCanvas.height=this.H,this.offCtx.clearRect(0,0,this.offCanvas.width,this.offCanvas.height);const i=Math.min(this.W,this.H),s=this.config.fontSize||Math.max(80,Math.floor(.18*i)),h=this.W-80,e=this.H-80,n=this.findOptimalFontSize(t,h,e,s);this.offCtx.fillStyle="#ffffff",this.offCtx.textAlign="center",this.offCtx.textBaseline="middle",this.offCtx.font=`400 ${n}px ${this.config.fontFamily}`;const o=t.split("\n"),r=n,l=.1*n,a=.05*n,u=o.length>0?r*o.length+l*(o.length-1):r;let c=this.H/2-u/2+r/2;for(const t of o){if(0===t.length){c+=r+l;continue}const i=t.split(""),s=this.offCtx.measureText(t).width+a*(i.length>0?i.length-1:0);let h=this.W/2-s/2;for(const t of i)this.offCtx.fillText(t,h+this.offCtx.measureText(t).width/2,c),h+=this.offCtx.measureText(t).width+a;c+=r+l}const f=Math.max(2,this.config.densityStep),d=this.offCtx.getImageData(0,0,this.W,this.H).data,p=[];for(let t=0;t<this.H;t+=f)for(let i=0;i<this.W;i+=f){const s=4*(t*this.W+i);d[s]+d[s+1]+d[s+2]>600&&p.push({x:i,y:t})}for(;p.length>this.config.maxParticles;)p.splice(Math.floor(Math.random()*p.length),1);if(this.particles.length<p.length){const t=p.length-this.particles.length;for(let i=0;i<t;i++)this.particles.push(this.makeParticle())}else this.particles.length>p.length&&(this.particles.length=p.length);for(let t=0;t<this.particles.length;t++){const i=this.particles[t],s=p[t];i.tx=s.x,i.ty=s.y}}makeParticle(){const t=Math.random()*this.W,i=Math.random()*this.H;return{x:t,y:i,vx:0,vy:0,tx:t,ty:i,initialX:t,initialY:i,j:Math.random()*Math.PI*2}}initParticles(){for(const t of this.particles){const i=Math.random()*this.W,s=Math.random()*this.H;t.x=i,t.y=s,t.vx=t.vy=0,t.initialX=i,t.initialY=s}}scatter(){for(const t of this.particles)void 0!==t.initialX&&void 0!==t.initialY?(t.tx=t.initialX,t.ty=t.initialY):(t.initialX=t.x,t.initialY=t.y,t.tx=t.initialX,t.ty=t.initialY)}morph(t){this.t(t)}i(t){if(0!==this.W&&0!==this.H||this.resize(),"string"==typeof t)this.config.text=t,this.buildTargets();else if(t&&"object"==typeof t){const i=void 0!==t.text;this.config={...this.config,...t},i&&this.buildTargets()}else this.buildTargets()}update(){this.ctx.clearRect(0,0,this.W,this.H);for(const t of this.particles){let i=(t.tx-t.x)*this.config.ease,s=(t.ty-t.y)*this.config.ease;if(this.mouse.x||this.mouse.y){const h=t.x-this.mouse.x,e=t.y-this.mouse.y,n=h*h+e*e,o=this.config.repelRadius*this.DPR;if(n<o*o){const t=Math.sqrt(n)+1e-4,r=(this.mouse.down?-1:1)*this.config.repelStrength*(1-t/o);i+=h/t*r*6,s+=e/t*r*6}}t.j+=2,i+=.05*Math.cos(t.j),s+=.05*Math.sin(1.3*t.j),t.vx=(t.vx+i)*Math.random(),t.vy=(t.vy+s)*Math.random(),t.x+=t.vx,t.y+=t.vy}this.ctx.fillStyle=this.config.particleColor;const t=this.config.pointSize*this.DPR;for(const i of this.particles)this.ctx.beginPath(),this.ctx.arc(i.x,i.y,t,0,2*Math.PI),this.ctx.fill();this.config.onUpdate&&this.config.onUpdate(this)}animate(){this.isRunning&&(this.update(),this.animationId=requestAnimationFrame(()=>this.animate()))}start(){this.isRunning||(this.isRunning=!0,this.animate())}stop(){this.isRunning=!1,this.animationId&&(cancelAnimationFrame(this.animationId),this.animationId=null)}setupEventListeners(){window.addEventListener("resize",this.handleResize),this.canvas.addEventListener("mousemove",this.handleMouseMove),this.canvas.addEventListener("mouseleave",this.handleMouseLeave),this.canvas.addEventListener("mousedown",this.handleMouseDown),window.addEventListener("mouseup",this.handleMouseUp)}removeEventListeners(){window.removeEventListener("resize",this.handleResize),this.canvas.removeEventListener("mousemove",this.handleMouseMove),this.canvas.removeEventListener("mouseleave",this.handleMouseLeave),this.canvas.removeEventListener("mousedown",this.handleMouseDown),window.removeEventListener("mouseup",this.handleMouseUp)}handleResize(){this.resize()}handleMouseMove(t){const i=this.canvas.getBoundingClientRect();this.mouse.x=(t.clientX-i.left)*this.DPR,this.mouse.y=(t.clientY-i.top)*this.DPR}handleMouseLeave(){this.mouse.x=this.mouse.y=0}handleMouseDown(){this.mouse.down=!0}handleMouseUp(){this.mouse.down=!1}updateConfig(t){this.h(t)}o(t){this.config={...this.config,...t},t.text&&this.buildTargets()}destroy(){this.stop(),this.removeEventListeners(),this.intersectionObserver&&(this.intersectionObserver.disconnect(),this.intersectionObserver=null),this.canvas&&this.canvas.parentNode&&this.canvas.parentNode.removeChild(this.canvas)}}const s={linear:t=>t,easeInQuad:t=>t*t,easeOutQuad:t=>t*(2-t),easeInOutQuad:t=>t<.5?2*t*t:(4-2*t)*t-1,easeOutCubic:t=>--t*t*t+1};class h{constructor(t,i){if(this.container="string"==typeof t?document.querySelector(t):t,!this.container)throw new Error("Container element not found");this.config={targetValue:i.targetValue,duration:i.duration??2e3,startValue:i.startValue??0,enabled:i.enabled??!0,easing:i.easing??s.linear,threshold:i.threshold??.2,rootMargin:i.rootMargin??"0px 0px -100px 0px",triggerOnce:i.triggerOnce??!1,onUpdate:i.onUpdate||null,onComplete:i.onComplete||null},this.currentValue=this.config.startValue,this.startTime=null,this.animationFrameId=null,this.intersectionObserver=null,this.isRunning=!1,this.hasTriggered=!1,this.init()}init(){this.updateDisplay(this.config.startValue),this.setupIntersectionObserver()}setupIntersectionObserver(){"undefined"!=typeof window&&void 0!==window.IntersectionObserver?(this.intersectionObserver=new IntersectionObserver(t=>{for(const i of t)if(i.target===this.container)if(i.isIntersecting)!this.hasTriggered&&this.config.enabled&&(this.hasTriggered=!0,this.start()),this.config.triggerOnce&&this.intersectionObserver?.unobserve(this.container);else if(!this.config.triggerOnce){const t=i.boundingClientRect,s=window.innerHeight,h=window.innerWidth;(t.bottom<=0||t.top>=s||t.right<=0||t.left>=h)&&this.isRunning&&this.reset()}},{threshold:this.config.threshold,rootMargin:this.config.rootMargin}),this.intersectionObserver.observe(this.container)):this.config.enabled&&this.start()}start(){if(this.isRunning)return;if(!this.config.enabled)return;this.isRunning=!0,this.startTime=null,this.currentValue=this.config.startValue,this.updateDisplay(this.currentValue);const t=i=>{null===this.startTime&&(this.startTime=i);const s=i-this.startTime,h=Math.min(s/this.config.duration,1),e=this.config.easing(h);this.currentValue=Math.floor(this.config.startValue+(this.config.targetValue-this.config.startValue)*e),this.updateDisplay(this.currentValue),this.config.onUpdate&&this.config.onUpdate(this.currentValue),h<1?this.animationFrameId=requestAnimationFrame(t):(this.currentValue=this.config.targetValue,this.updateDisplay(this.currentValue),this.isRunning=!1,this.config.onComplete&&this.config.onComplete())};this.animationFrameId=requestAnimationFrame(t)}stop(){this.isRunning=!1,null!==this.animationFrameId&&(cancelAnimationFrame(this.animationFrameId),this.animationFrameId=null)}reset(){this.stop(),this.currentValue=this.config.startValue,this.updateDisplay(this.currentValue),this.hasTriggered=!1,this.startTime=null}updateDisplay(t){this.container.textContent=this.formatNumber(t)}formatNumber(t){return Math.floor(t).toLocaleString()}updateConfig(t){const i=this.isRunning;this.stop(),this.config={...this.config,...t,onUpdate:void 0!==t.onUpdate?t.onUpdate:this.config.onUpdate,onComplete:void 0!==t.onComplete?t.onComplete:this.config.onComplete},void 0!==t.targetValue?(this.reset(),i&&this.config.enabled&&this.start()):i&&this.config.enabled&&this.start()}getValue(){return this.currentValue}destroy(){this.stop(),this.intersectionObserver&&(this.intersectionObserver.disconnect(),this.intersectionObserver=null)}}function e(t){const i=t.charCodeAt(0);if(i<44032||i>55203)return[t];const s=i-44032,h=Math.floor(s/588),e=Math.floor(s%588/28),n=s%28,o=[];return o.push(["ㄱ","ㄲ","ㄴ","ㄷ","ㄸ","ㄹ","ㅁ","ㅂ","ㅃ","ㅅ","ㅆ","ㅇ","ㅈ","ㅉ","ㅊ","ㅋ","ㅌ","ㅍ","ㅎ"][h]),o.push(["ㅏ","ㅐ","ㅑ","ㅒ","ㅓ","ㅔ","ㅕ","ㅖ","ㅗ","ㅘ","ㅙ","ㅚ","ㅛ","ㅜ","ㅝ","ㅞ","ㅟ","ㅠ","ㅡ","ㅢ","ㅣ"][e]),n>0&&o.push(["","ㄱ","ㄲ","ㄳ","ㄴ","ㄵ","ㄶ","ㄷ","ㄹ","ㄺ","ㄻ","ㄼ","ㄽ","ㄾ","ㄿ","ㅀ","ㅁ","ㅂ","ㅄ","ㅅ","ㅆ","ㅇ","ㅈ","ㅊ","ㅋ","ㅌ","ㅍ","ㅎ"][n]),o}function n(t){const i=[];for(let s=0;s<t.length;s++){const h=t[s],n=h.charCodeAt(0);if(n>=44032&&n<=55203){const t=e(h);i.push(...t)}else i.push(h)}return i}class o{constructor(t,i){if(this.originalChars=[],this.charUnitMap=[],this.container="string"==typeof t?document.querySelector(t):t,!this.container)throw new Error("Container element not found");this.originalText=i.text,this.config={text:i.text,speed:i.speed??50,delay:i.delay??0,enabled:i.enabled??!0,threshold:i.threshold??.2,rootMargin:i.rootMargin??"0px 0px -100px 0px",triggerOnce:i.triggerOnce??!1,showCursor:i.showCursor??!0,cursorChar:i.cursorChar??"|",onUpdate:i.onUpdate||null,onComplete:i.onComplete||null},this.textUnits=n(this.config.text),this.originalChars=[],this.charUnitMap=[],this.initializeTextStructure(),this.currentIndex=0,this.displayedText="",this.timeoutId=null,this.intersectionObserver=null,this.isRunning=!1,this.hasTriggered=!1,this.init()}init(){this.updateDisplay(""),this.setupIntersectionObserver()}setupIntersectionObserver(){"undefined"!=typeof window&&void 0!==window.IntersectionObserver?(this.intersectionObserver=new IntersectionObserver(t=>{for(const i of t)i.target===this.container&&i.isIntersecting&&!this.hasTriggered&&(this.config.enabled&&setTimeout(()=>this.start(),this.config.delay),this.hasTriggered=!0,this.config.triggerOnce&&this.intersectionObserver?.disconnect())},{threshold:this.config.threshold,rootMargin:this.config.rootMargin}),this.intersectionObserver.observe(this.container)):this.config.enabled&&setTimeout(()=>this.start(),this.config.delay)}initializeTextStructure(){this.originalChars=[],this.charUnitMap=[];for(let t=0;t<this.originalText.length;t++){const i=this.originalText[t],s=i.charCodeAt(0);if(this.originalChars.push(i),s>=44032&&s<=55203){const t=e(i);this.charUnitMap.push(t.length)}else this.charUnitMap.push(1)}}getCharIndexFromUnitIndex(t){if(0===t)return 0;let i=0,s=0;for(let h=0;h<this.charUnitMap.length;h++){const e=this.charUnitMap[h];if(s+=e,!(t>=s)){const n=t-(s-e);if(n>0){const t=this.originalChars[h]&&this.originalChars[h].charCodeAt(0)>=44032&&this.originalChars[h].charCodeAt(0)<=55203;(t&&n>=2||!t&&n>=1)&&(i=h+1)}break}i=h+1}return i}buildTextFromUnits(t){if(0===t.length)return"";const i=this.getCharIndexFromUnitIndex(t.length);return this.originalText.substring(0,i)}start(){this.isRunning||(this.isRunning=!0,this.currentIndex=0,this.displayedText="",this.typeNext())}typeNext(){if(this.currentIndex>=this.textUnits.length)return this.isRunning=!1,this.config.showCursor&&this.updateDisplay(this.originalText),void(this.config.onComplete&&this.config.onComplete());const t=this.textUnits.slice(0,this.currentIndex+1);this.displayedText=this.buildTextFromUnits(t);let i=this.displayedText;this.config.showCursor&&(i+=this.config.cursorChar),this.updateDisplay(i),this.config.onUpdate&&this.config.onUpdate(this.displayedText),this.currentIndex++,this.timeoutId=setTimeout(()=>{this.typeNext()},this.config.speed)}stop(){this.isRunning=!1,this.timeoutId&&(clearTimeout(this.timeoutId),this.timeoutId=null)}reset(){this.stop(),this.currentIndex=0,this.displayedText="",this.hasTriggered=!1,this.updateDisplay("")}updateDisplay(t){this.container.textContent=t}setText(t){this.originalText=t,this.config.text=t,this.textUnits=n(t),this.initializeTextStructure(),this.reset(),this.config.enabled&&setTimeout(()=>this.start(),this.config.delay)}destroy(){this.stop(),this.intersectionObserver&&(this.intersectionObserver.disconnect(),this.intersectionObserver=null)}}export{h as Count,i as MasonEffect,i as TextToParticle,o as Typing,i as default,s as easingFunctions};
|
|
@@ -12,6 +12,8 @@ export type { TextToParticleOptions, Particle } from './textToParticle/index.js'
|
|
|
12
12
|
export { Count, default as CountDefault } from './count/index.js';
|
|
13
13
|
export type { CountOptions } from './count/index.js';
|
|
14
14
|
export { easingFunctions } from './count/index.js';
|
|
15
|
+
export { Typing, default as TypingDefault } from './typing/index.js';
|
|
16
|
+
export type { TypingOptions } from './typing/index.js';
|
|
15
17
|
export { TextToParticle as MasonEffect } from './textToParticle/index.js';
|
|
16
18
|
export type { TextToParticleOptions as MasonEffectOptions } from './textToParticle/index.js';
|
|
17
19
|
export { default } from './textToParticle/index.js';
|
|
@@ -0,0 +1,51 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Typing - 타이핑 애니메이션 효과
|
|
3
|
+
* 바닐라 JS 코어 클래스
|
|
4
|
+
*
|
|
5
|
+
* 사용법:
|
|
6
|
+
* import { Typing } from 'masoneffect/typing';
|
|
7
|
+
*/
|
|
8
|
+
export interface TypingOptions {
|
|
9
|
+
text: string;
|
|
10
|
+
speed?: number;
|
|
11
|
+
delay?: number;
|
|
12
|
+
enabled?: boolean;
|
|
13
|
+
threshold?: number;
|
|
14
|
+
rootMargin?: string;
|
|
15
|
+
triggerOnce?: boolean;
|
|
16
|
+
showCursor?: boolean;
|
|
17
|
+
cursorChar?: string;
|
|
18
|
+
onUpdate?: (text: string) => void;
|
|
19
|
+
onComplete?: () => void;
|
|
20
|
+
}
|
|
21
|
+
export declare class Typing {
|
|
22
|
+
container: HTMLElement;
|
|
23
|
+
config: Required<Omit<TypingOptions, 'onUpdate' | 'onComplete'>> & {
|
|
24
|
+
onUpdate: TypingOptions['onUpdate'];
|
|
25
|
+
onComplete: TypingOptions['onComplete'];
|
|
26
|
+
};
|
|
27
|
+
textUnits: string[];
|
|
28
|
+
currentIndex: number;
|
|
29
|
+
displayedText: string;
|
|
30
|
+
timeoutId: ReturnType<typeof setTimeout> | null;
|
|
31
|
+
intersectionObserver: IntersectionObserver | null;
|
|
32
|
+
isRunning: boolean;
|
|
33
|
+
hasTriggered: boolean;
|
|
34
|
+
originalText: string;
|
|
35
|
+
constructor(container: HTMLElement | string, options: TypingOptions);
|
|
36
|
+
init(): void;
|
|
37
|
+
setupIntersectionObserver(): void;
|
|
38
|
+
private originalChars;
|
|
39
|
+
private charUnitMap;
|
|
40
|
+
private initializeTextStructure;
|
|
41
|
+
private getCharIndexFromUnitIndex;
|
|
42
|
+
private buildTextFromUnits;
|
|
43
|
+
start(): void;
|
|
44
|
+
typeNext(): void;
|
|
45
|
+
stop(): void;
|
|
46
|
+
reset(): void;
|
|
47
|
+
updateDisplay(text: string): void;
|
|
48
|
+
setText(newText: string): void;
|
|
49
|
+
destroy(): void;
|
|
50
|
+
}
|
|
51
|
+
export default Typing;
|
|
@@ -12,6 +12,8 @@ export type { TextToParticleOptions, Particle } from './textToParticle/index.js'
|
|
|
12
12
|
export { Count, default as CountDefault } from './count/index.js';
|
|
13
13
|
export type { CountOptions } from './count/index.js';
|
|
14
14
|
export { easingFunctions } from './count/index.js';
|
|
15
|
+
export { Typing, default as TypingDefault } from './typing/index.js';
|
|
16
|
+
export type { TypingOptions } from './typing/index.js';
|
|
15
17
|
export { TextToParticle as MasonEffect } from './textToParticle/index.js';
|
|
16
18
|
export type { TextToParticleOptions as MasonEffectOptions } from './textToParticle/index.js';
|
|
17
19
|
export { default } from './textToParticle/index.js';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/core/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAGH,OAAO,EAAE,cAAc,EAAE,OAAO,IAAI,qBAAqB,EAAE,MAAM,2BAA2B,CAAC;AAC7F,YAAY,EAAE,qBAAqB,EAAE,QAAQ,EAAE,MAAM,2BAA2B,CAAC;AAGjF,OAAO,EAAE,KAAK,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAClE,YAAY,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AACrD,OAAO,EAAE,eAAe,EAAE,MAAM,kBAAkB,CAAC;AAGnD,OAAO,EAAE,cAAc,IAAI,WAAW,EAAE,MAAM,2BAA2B,CAAC;AAC1E,YAAY,EAAE,qBAAqB,IAAI,kBAAkB,EAAE,MAAM,2BAA2B,CAAC;AAG7F,OAAO,EAAE,OAAO,EAAE,MAAM,2BAA2B,CAAC"}
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/core/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAGH,OAAO,EAAE,cAAc,EAAE,OAAO,IAAI,qBAAqB,EAAE,MAAM,2BAA2B,CAAC;AAC7F,YAAY,EAAE,qBAAqB,EAAE,QAAQ,EAAE,MAAM,2BAA2B,CAAC;AAGjF,OAAO,EAAE,KAAK,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAClE,YAAY,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AACrD,OAAO,EAAE,eAAe,EAAE,MAAM,kBAAkB,CAAC;AAGnD,OAAO,EAAE,MAAM,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,mBAAmB,CAAC;AACrE,YAAY,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAGvD,OAAO,EAAE,cAAc,IAAI,WAAW,EAAE,MAAM,2BAA2B,CAAC;AAC1E,YAAY,EAAE,qBAAqB,IAAI,kBAAkB,EAAE,MAAM,2BAA2B,CAAC;AAG7F,OAAO,EAAE,OAAO,EAAE,MAAM,2BAA2B,CAAC"}
|
|
@@ -0,0 +1,52 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Typing - 타이핑 애니메이션 효과
|
|
3
|
+
* 바닐라 JS 코어 클래스
|
|
4
|
+
*
|
|
5
|
+
* 사용법:
|
|
6
|
+
* import { Typing } from 'masoneffect/typing';
|
|
7
|
+
*/
|
|
8
|
+
export interface TypingOptions {
|
|
9
|
+
text: string;
|
|
10
|
+
speed?: number;
|
|
11
|
+
delay?: number;
|
|
12
|
+
enabled?: boolean;
|
|
13
|
+
threshold?: number;
|
|
14
|
+
rootMargin?: string;
|
|
15
|
+
triggerOnce?: boolean;
|
|
16
|
+
showCursor?: boolean;
|
|
17
|
+
cursorChar?: string;
|
|
18
|
+
onUpdate?: (text: string) => void;
|
|
19
|
+
onComplete?: () => void;
|
|
20
|
+
}
|
|
21
|
+
export declare class Typing {
|
|
22
|
+
container: HTMLElement;
|
|
23
|
+
config: Required<Omit<TypingOptions, 'onUpdate' | 'onComplete'>> & {
|
|
24
|
+
onUpdate: TypingOptions['onUpdate'];
|
|
25
|
+
onComplete: TypingOptions['onComplete'];
|
|
26
|
+
};
|
|
27
|
+
textUnits: string[];
|
|
28
|
+
currentIndex: number;
|
|
29
|
+
displayedText: string;
|
|
30
|
+
timeoutId: ReturnType<typeof setTimeout> | null;
|
|
31
|
+
intersectionObserver: IntersectionObserver | null;
|
|
32
|
+
isRunning: boolean;
|
|
33
|
+
hasTriggered: boolean;
|
|
34
|
+
originalText: string;
|
|
35
|
+
constructor(container: HTMLElement | string, options: TypingOptions);
|
|
36
|
+
init(): void;
|
|
37
|
+
setupIntersectionObserver(): void;
|
|
38
|
+
private originalChars;
|
|
39
|
+
private charUnitMap;
|
|
40
|
+
private initializeTextStructure;
|
|
41
|
+
private getCharIndexFromUnitIndex;
|
|
42
|
+
private buildTextFromUnits;
|
|
43
|
+
start(): void;
|
|
44
|
+
typeNext(): void;
|
|
45
|
+
stop(): void;
|
|
46
|
+
reset(): void;
|
|
47
|
+
updateDisplay(text: string): void;
|
|
48
|
+
setText(newText: string): void;
|
|
49
|
+
destroy(): void;
|
|
50
|
+
}
|
|
51
|
+
export default Typing;
|
|
52
|
+
//# sourceMappingURL=index.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/core/typing/index.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH,MAAM,WAAW,aAAa;IAC5B,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;CACzB;AA0DD,qBAAa,MAAM;IACjB,SAAS,EAAE,WAAW,CAAC;IACvB,MAAM,EAAE,QAAQ,CAAC,IAAI,CAAC,aAAa,EAAE,UAAU,GAAG,YAAY,CAAC,CAAC,GAAG;QACjE,QAAQ,EAAE,aAAa,CAAC,UAAU,CAAC,CAAC;QACpC,UAAU,EAAE,aAAa,CAAC,YAAY,CAAC,CAAC;KACzC,CAAC;IACF,SAAS,EAAE,MAAM,EAAE,CAAC;IACpB,YAAY,EAAE,MAAM,CAAC;IACrB,aAAa,EAAE,MAAM,CAAC;IACtB,SAAS,EAAE,UAAU,CAAC,OAAO,UAAU,CAAC,GAAG,IAAI,CAAC;IAChD,oBAAoB,EAAE,oBAAoB,GAAG,IAAI,CAAC;IAClD,SAAS,EAAE,OAAO,CAAC;IACnB,YAAY,EAAE,OAAO,CAAC;IACtB,YAAY,EAAE,MAAM,CAAC;gBAET,SAAS,EAAE,WAAW,GAAG,MAAM,EAAE,OAAO,EAAE,aAAa;IAgDnE,IAAI,IAAI,IAAI;IAQZ,yBAAyB,IAAI,IAAI;IAqCjC,OAAO,CAAC,aAAa,CAAgB;IACrC,OAAO,CAAC,WAAW,CAAgB;IAEnC,OAAO,CAAC,uBAAuB;IAuB/B,OAAO,CAAC,yBAAyB;IAqCjC,OAAO,CAAC,kBAAkB;IAO1B,KAAK,IAAI,IAAI;IASb,QAAQ,IAAI,IAAI;IAwChB,IAAI,IAAI,IAAI;IAQZ,KAAK,IAAI,IAAI;IAQb,aAAa,CAAC,IAAI,EAAE,MAAM,GAAG,IAAI;IAKjC,OAAO,CAAC,OAAO,EAAE,MAAM,GAAG,IAAI;IAY9B,OAAO,IAAI,IAAI;CAOhB;AAGD,eAAe,MAAM,CAAC"}
|
|
@@ -12,5 +12,7 @@ export type { TextToParticleOptions, MasonEffectOptions, Particle } from './core
|
|
|
12
12
|
export { Count } from './core/index.js';
|
|
13
13
|
export type { CountOptions } from './core/index.js';
|
|
14
14
|
export { easingFunctions } from './core/index.js';
|
|
15
|
+
export { Typing } from './core/index.js';
|
|
16
|
+
export type { TypingOptions } from './core/index.js';
|
|
15
17
|
export { default } from './core/index.js';
|
|
16
18
|
//# sourceMappingURL=index.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAGH,OAAO,EAAE,cAAc,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAC9D,YAAY,EAAE,qBAAqB,EAAE,kBAAkB,EAAE,QAAQ,EAAE,MAAM,iBAAiB,CAAC;AAG3F,OAAO,EAAE,KAAK,EAAE,MAAM,iBAAiB,CAAC;AACxC,YAAY,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AACpD,OAAO,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;AAGlD,OAAO,EAAE,OAAO,EAAE,MAAM,iBAAiB,CAAC"}
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAGH,OAAO,EAAE,cAAc,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAC9D,YAAY,EAAE,qBAAqB,EAAE,kBAAkB,EAAE,QAAQ,EAAE,MAAM,iBAAiB,CAAC;AAG3F,OAAO,EAAE,KAAK,EAAE,MAAM,iBAAiB,CAAC;AACxC,YAAY,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AACpD,OAAO,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;AAGlD,OAAO,EAAE,MAAM,EAAE,MAAM,iBAAiB,CAAC;AACzC,YAAY,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAGrD,OAAO,EAAE,OAAO,EAAE,MAAM,iBAAiB,CAAC"}
|