wissive 0.1.0 → 0.1.1
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 +194 -193
- package/package.json +10 -2
package/README.md
CHANGED
|
@@ -1,193 +1,194 @@
|
|
|
1
|
-
# Wissive
|
|
2
|
-
|
|
3
|
-
**Micro-librería de JavaScript de emojis
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
14 personajes
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
###
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
<Wissive name="mochi" size=
|
|
148
|
-
```
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
-
|
|
192
|
-
-
|
|
193
|
-
-
|
|
1
|
+
# Wissive
|
|
2
|
+
|
|
3
|
+
**Micro-librería de JavaScript/TypeScript de emojis vivos reactivos con física de resorte real — añade micro vida a tu web.**
|
|
4
|
+
|
|
5
|
+
[](https://www.npmjs.com/package/wissive)
|
|
6
|
+
[](https://bundlephobia.com/package/wissive)
|
|
7
|
+
[](https://opensource.org/licenses/MIT)
|
|
8
|
+
|
|
9
|
+
**Sitio web y Documentación en vivo:** [https://wissive-docs.vercel.app/](https://wissive-docs.vercel.app/)
|
|
10
|
+
**Paquete en NPM:** [https://www.npmjs.com/package/wissive](https://www.npmjs.com/package/wissive)
|
|
11
|
+
**Repositorio en GitHub:** [https://github.com/EJCP3/wissive](https://github.com/EJCP3/wissive)
|
|
12
|
+
|
|
13
|
+
---
|
|
14
|
+
|
|
15
|
+
## Instalación rápida
|
|
16
|
+
|
|
17
|
+
### Vía Gestor de Paquetes
|
|
18
|
+
```bash
|
|
19
|
+
# pnpm
|
|
20
|
+
pnpm add wissive
|
|
21
|
+
|
|
22
|
+
# npm
|
|
23
|
+
npm install wissive
|
|
24
|
+
|
|
25
|
+
# yarn
|
|
26
|
+
yarn add wissive
|
|
27
|
+
```
|
|
28
|
+
|
|
29
|
+
```javascript
|
|
30
|
+
import { createEmoji } from 'wissive';
|
|
31
|
+
|
|
32
|
+
const emoji = createEmoji('mochi', {
|
|
33
|
+
target: document.querySelector('#slot'),
|
|
34
|
+
size: 120,
|
|
35
|
+
});
|
|
36
|
+
```
|
|
37
|
+
|
|
38
|
+
### Vía CDN (sin instalación)
|
|
39
|
+
```html
|
|
40
|
+
<script src="https://cdn.jsdelivr.net/npm/wissive/dist/wissive.umd.js"></script>
|
|
41
|
+
<div id="slot"></div>
|
|
42
|
+
|
|
43
|
+
<script>
|
|
44
|
+
Wissive.create('mochi', {
|
|
45
|
+
target: document.querySelector('#slot'),
|
|
46
|
+
size: 120,
|
|
47
|
+
});
|
|
48
|
+
</script>
|
|
49
|
+
```
|
|
50
|
+
|
|
51
|
+
---
|
|
52
|
+
|
|
53
|
+
## ¿Qué es Wissive?
|
|
54
|
+
|
|
55
|
+
Wissive es una librería de JavaScript/TypeScript vanilla (**sin frameworks ni dependencias de runtime obligatorias**) que renderiza personajes vectoriales reactivos en tiempo real.
|
|
56
|
+
|
|
57
|
+
No es una imagen estática ni un GIF: es un **motor de expresión** que dibuja el rostro por código (SVG) y lo interpola con **física de resorte amortiguada (*spring physics*)**, logrando un movimiento orgánico que reacciona de verdad al cursor, al teclado, al arrastre (*drag & drop*) y al tacto.
|
|
58
|
+
|
|
59
|
+
---
|
|
60
|
+
|
|
61
|
+
## Características Principales
|
|
62
|
+
|
|
63
|
+
- **Catálogo de 14 personajes vivos**: Mochi, Zumi, Suri, Nima, Cota, Dozy, Lumo, Fidge, Brix, Wilt, Knot, Snug, Pip y Void.
|
|
64
|
+
- **Crea tu propio emoji personalizado**: Mezcla más de 20 siluetas vectoriales, rasgos faciales, colores, sonidos y partículas con `createCustomEmoji()`.
|
|
65
|
+
- **Física de resorte real**: Movimiento elástico y fluido sin transiciones CSS lineales rígidas.
|
|
66
|
+
- **Seguimiento del cursor (*Gaze Tracking*)**: Los ojos siguen la posición del ratón en tiempo real.
|
|
67
|
+
- **Arrastre con inercia (*Drag & Drop*)**: Arrastra los emojis por la pantalla con física y rebote.
|
|
68
|
+
- **Secuencias de animación**: Encadena estados con `.playSequence()` en modos `once`, `loop` o `ping-pong`.
|
|
69
|
+
- **Sonido sintetizado con Web Audio**: Integración opcional con [Cuelume](https://cuelume-site.pages.dev/).
|
|
70
|
+
- **Emisor de partículas**: Ráfagas de destellos, estrellas y corazones con `.triggerParticles()`.
|
|
71
|
+
- **Temas de color dinámicos**: Cambia la paleta en caliente (`auto`, `neon`, `pastel`, `gold`).
|
|
72
|
+
- **Accesibilidad total**: `role="img"`, `aria-label` dinámico, soporte de teclado y respeto estricto a `prefers-reduced-motion`.
|
|
73
|
+
- **Multi-Framework**: Wrappers oficiales y tipados para **React**, **Vue** y **Astro**.
|
|
74
|
+
|
|
75
|
+
---
|
|
76
|
+
|
|
77
|
+
## Crea tu Propio Emoji
|
|
78
|
+
|
|
79
|
+
Puedes diseñar emojis completamente personalizados mezclando siluetas, ojos, bocas, colores y animaciones:
|
|
80
|
+
|
|
81
|
+
```javascript
|
|
82
|
+
import { createCustomEmoji, createEmoji } from 'wissive';
|
|
83
|
+
|
|
84
|
+
// 1. Construir y registrar el emoji personalizado
|
|
85
|
+
createCustomEmoji('mi-personaje', {
|
|
86
|
+
baseColor: '#FFD23F',
|
|
87
|
+
silhouette: 'circle', // 'circle', 'heart', 'starburst-puff', 'capsule', 'pear-blob', etc.
|
|
88
|
+
eyesFrom: 'mochi',
|
|
89
|
+
mouthFrom: 'suri',
|
|
90
|
+
motionFrom: 'zumi',
|
|
91
|
+
particlesFrom: 'mochi',
|
|
92
|
+
soundFrom: 'mochi',
|
|
93
|
+
stateBank: ['happy', 'excited', 'celebrate', 'playful'],
|
|
94
|
+
});
|
|
95
|
+
|
|
96
|
+
// 2. Instanciarlo en tu contenedor
|
|
97
|
+
const miEmoji = createEmoji('mi-personaje', {
|
|
98
|
+
target: document.querySelector('#mi-slot'),
|
|
99
|
+
size: 100,
|
|
100
|
+
gazeTracking: true,
|
|
101
|
+
draggable: true,
|
|
102
|
+
});
|
|
103
|
+
```
|
|
104
|
+
|
|
105
|
+
---
|
|
106
|
+
|
|
107
|
+
## Integración con Frameworks
|
|
108
|
+
|
|
109
|
+
Wissive incluye soporte nativo y componentes para los principales frameworks:
|
|
110
|
+
|
|
111
|
+
### React
|
|
112
|
+
```tsx
|
|
113
|
+
import { Wissive } from 'wissive/react';
|
|
114
|
+
|
|
115
|
+
export function MiComponente() {
|
|
116
|
+
return (
|
|
117
|
+
<Wissive
|
|
118
|
+
name="mochi"
|
|
119
|
+
size={120}
|
|
120
|
+
options={{
|
|
121
|
+
sound: true,
|
|
122
|
+
gazeTracking: true,
|
|
123
|
+
draggable: true,
|
|
124
|
+
}}
|
|
125
|
+
/>
|
|
126
|
+
);
|
|
127
|
+
}
|
|
128
|
+
```
|
|
129
|
+
|
|
130
|
+
### Vue
|
|
131
|
+
```vue
|
|
132
|
+
<script setup>
|
|
133
|
+
import { Wissive } from 'wissive/vue';
|
|
134
|
+
</script>
|
|
135
|
+
|
|
136
|
+
<template>
|
|
137
|
+
<Wissive name="zumi" size="lg" :options="{ sound: true, draggable: true }" />
|
|
138
|
+
</template>
|
|
139
|
+
```
|
|
140
|
+
|
|
141
|
+
### Astro
|
|
142
|
+
```astro
|
|
143
|
+
---
|
|
144
|
+
import Wissive from 'wissive/astro';
|
|
145
|
+
---
|
|
146
|
+
|
|
147
|
+
<Wissive name="mochi" size={120} sound={true} />
|
|
148
|
+
```
|
|
149
|
+
|
|
150
|
+
---
|
|
151
|
+
|
|
152
|
+
## API Reference
|
|
153
|
+
|
|
154
|
+
### `createEmoji(name, options)`
|
|
155
|
+
|
|
156
|
+
#### Opciones principales (`WissiveOptions`):
|
|
157
|
+
| Opción | Tipo | Default | Descripción |
|
|
158
|
+
|---|---|---|---|
|
|
159
|
+
| `target` | `HTMLElement` | *(requerido)* | Elemento contenedor donde se monta el emoji. |
|
|
160
|
+
| `size` | `WissiveSize` | `'base'` (120px) | Tamaño en px o preset (`'xs'`, `'sm'`, `'base'`, `'lg'`, `'xl'`, `'2xl'`). |
|
|
161
|
+
| `interactive` | `boolean` | `true` | Habilita eventos de ratón, proximidad y hover. |
|
|
162
|
+
| `draggable` | `boolean` | `true` | Permite arrastrar el emoji con inercia y física. |
|
|
163
|
+
| `gazeTracking` | `boolean` | `false` | Los ojos siguen el cursor activamente. |
|
|
164
|
+
| `sound` | `boolean` | `true` | Reproduce efectos de sonido si Cuelume está presente. |
|
|
165
|
+
| `autonomousStates` | `boolean` | `true` | Deambula de forma autónoma entre emociones al estar en reposo. |
|
|
166
|
+
| `theme` | `ThemeOption` | `'auto'` | Tema de color (`'auto'`, `'neon'`, `'pastel'`, `'gold'`). |
|
|
167
|
+
| `reducedMotion` | `'auto' \| boolean` | `'auto'` | Respeta accesibilidad de movimiento reducido del sistema. |
|
|
168
|
+
|
|
169
|
+
#### Métodos de la Instancia (`WissiveInstance`):
|
|
170
|
+
```javascript
|
|
171
|
+
const emoji = createEmoji('mochi', { target });
|
|
172
|
+
|
|
173
|
+
emoji.setEmotion('excited'); // Cambia la emoción activa
|
|
174
|
+
emoji.bounce(); // Provoca un salto elástico
|
|
175
|
+
emoji.spin(1); // Giro de 360°
|
|
176
|
+
emoji.setGaze({ x: 0.5, y: -0.2 }); // Ajusta la dirección de la mirada
|
|
177
|
+
emoji.setGazeTracking(true); // Activa/desactiva seguimiento de cursor
|
|
178
|
+
emoji.setTheme('neon'); // Cambia el tema de color en vivo
|
|
179
|
+
emoji.triggerParticles(8); // Emite una ráfaga de partículas
|
|
180
|
+
emoji.playSequence([ // Reproduce una secuencia de estados
|
|
181
|
+
{ state: 'thinking', duration: 800 },
|
|
182
|
+
{ state: 'happy', duration: 1000 },
|
|
183
|
+
], { mode: 'loop' });
|
|
184
|
+
emoji.destroy(); // Limpieza determinística de memoria y listeners
|
|
185
|
+
```
|
|
186
|
+
|
|
187
|
+
---
|
|
188
|
+
|
|
189
|
+
## Enlaces y Recursos
|
|
190
|
+
|
|
191
|
+
- **Documentación Interactiva:** [https://wissive-docs.vercel.app/](https://wissive-docs.vercel.app/)
|
|
192
|
+
- **Código Fuente en GitHub:** [https://github.com/EJCP3/wissive](https://github.com/EJCP3/wissive)
|
|
193
|
+
- **Reportar problemas:** [https://github.com/EJCP3/wissive/issues](https://github.com/EJCP3/wissive/issues)
|
|
194
|
+
- **Licencia:** MIT © 2026
|
package/package.json
CHANGED
|
@@ -1,7 +1,15 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "wissive",
|
|
3
|
-
"version": "0.1.
|
|
4
|
-
"description": "
|
|
3
|
+
"version": "0.1.1",
|
|
4
|
+
"description": "Librería de emojis interactivos con expresiones vivas",
|
|
5
|
+
"homepage": "https://wissive-docs.vercel.app/",
|
|
6
|
+
"repository": {
|
|
7
|
+
"type": "git",
|
|
8
|
+
"url": "https://github.com/EJCP3/wissive.git"
|
|
9
|
+
},
|
|
10
|
+
"bugs": {
|
|
11
|
+
"url": "https://github.com/EJCP3/wissive/issues"
|
|
12
|
+
},
|
|
5
13
|
"type": "module",
|
|
6
14
|
"main": "./dist/wissive.cjs",
|
|
7
15
|
"module": "./dist/wissive.js",
|