@jjlmoya/utils-creative 1.2.0

package/src/tool/synesthesia-painter/i18n/fr.ts

@@ -0,0 +1,80 @@
+import type { SynesthesiaPainterLocaleContent } from '../index';
+
+export const content: SynesthesiaPainterLocaleContent = {
+  slug: 'peintre-de-synesthesie',
+  title: 'Peintre de Synesthésie',
+  description: 'Visualisez la couleur des mots selon la synesthésie graphème-couleur. Chaque lettre possède sa propre couleur, transformant le texte en art chromatique.',
+  faqTitle: 'Questions Fréquemment Posées',
+  bibliographyTitle: 'Bibliographie de l\'Esprit',
+  ui: {
+    title: 'Peintre de Synesthésie',
+    description: 'Transformez vos mots en art chromatique.',
+    modeLetters: 'Lettres',
+    modeDots: 'Points',
+    modeAura: 'Aura',
+    placeholder: 'Écrivez ici...',
+    footerText: 'Écrivez pour découvrir votre palette de couleurs personnelle',
+    clearBtn: 'Effacer',
+    faqTitle: 'FAQ',
+    bibliographyTitle: 'Références'
+  },
+  seo: [
+    { type: 'title', text: 'Qu\'est-ce que la Synesthésie Graphème-Couleur ?', level: 2 },
+    { type: 'paragraph', html: 'La <strong>synesthésie</strong> est une condition neurologique dans laquelle la stimulation d\'un sens déclenche automatiquement une réponse dans un autre. La variante la plus étudiée et la plus répandue est la <strong>synesthésie graphème-couleur</strong> : ceux qui en sont atteints perçoivent chaque lettre ou chiffre avec une couleur intrinsèque, constante et vive. Ce n\'est ni de l\'imagination ni une métaphore ; pour un synesthète, la lettre "A" est rouge de la même manière que le feu est chaud. Cet outil applique une <em>palette statistique</em> basée sur les couleurs les plus fréquemment rapportées pour chaque graphème dans les études de population.' },
+    { type: 'title', text: 'Neurosciences : La Théorie de l\'Activation Croisée', level: 3 },
+    { type: 'paragraph', html: 'Le modèle neurologique le plus largement accepté pour la synesthésie graphème-couleur est l\'<strong>activation croisée</strong>. Les zones du cortex temporal impliquées dans la reconnaissance de la forme des lettres (gyrus fusiforme) sont anatomiquement adjacentes aux régions qui traitent la couleur (zone V4). Chez les personnes synesthètes, il existe une connectivité structurelle ou fonctionnelle accrue entre ces régions, de sorte que la reconnaissance d\'une lettre active également les neurones de la couleur. La recherche par neuro-imagerie fonctionnelle (IRMf) a confirmé que les synesthètes montrent une véritable activation de V4 lors de la lecture d\'un texte, même s\'il est monochromatique.' },
+    { type: 'tip', title: 'Les Trois Modes de Visualisation', html: '<strong>Lettres :</strong> Le texte original coloré par graphème. Idéal pour voir la "mélodie chromatique" d\'un texte complet. <strong>Points :</strong> Chaque caractère devient un cercle de sa couleur ; le texte disparaît et seule la musique des couleurs subsiste. <strong>Aura :</strong> Les lettres émettent un halo de leur couleur, comme si le texte rayonnait de sa propre énergie.' },
+    { type: 'title', text: 'Statistiques et Universaux de Couleur', level: 3 },
+    { type: 'paragraph', html: 'Bien que les couleurs synesthésiques soient uniques à chaque individu, des études comme celles de Simner et al. (2006) et Eagleman et al. (2007) ont trouvé des schémas statistiques significatifs. La voyelle <strong>A</strong> a tendance à être rouge pour la majorité ; le <strong>O</strong> est blanc ou noir ; le <strong>S</strong> apparaît dans des tons bleu-vert ou vert ; le <strong>E</strong> apparaît comme vert ou blanc. Fait intéressant, les associations couleur-lettre sont plus cohérentes au sein d\'une culture linguistique qu\'entre différentes cultures, ce qui suggère un rôle de l\'apprentissage précoce de l\'alphabet.' },
+    { type: 'list', items: [
+      '<strong>Prévalence :</strong> Environ 4 % de la population présente une synesthésie graphème-couleur à un certain degré, bien que des études plus récentes portent ce chiffre à 6-8 % en incluant les formes subcliniques.',
+      '<strong>Biais de genre :</strong> La synesthésie est 3 à 6 fois plus fréquente chez les femmes que chez les hommes, bien que les causes de cette différence ne soient pas encore totalement expliquées.',
+      '<strong>Hérédité :</strong> Elle a une composante génétique claire : elle a tendance à être présente dans les familles, bien que pas toujours sous le même type de synesthésie.',
+      '<strong>Constance :</strong> Contrairement aux associations apprises, les couleurs synesthésiques sont extraordinairement stables dans le temps. Des études de suivi sur 10 ans démontrent une cohérence supérieure à 90 % dans les associations graphème-couleur.',
+      '<strong>Synesthètes célèbres :</strong> Vladimir Nabokov, Wassily Kandinsky, Nikola Tesla et Billy Joel ont publiquement décrit des expériences synesthésiques qui ont influencé leur travail.',
+    ]},
+    { type: 'stats', items: [
+      { value: '4–8%', label: 'Population synesthète', icon: 'mdi:brain' },
+      { value: '90%+', label: 'Constance des couleurs sur 10 ans', icon: 'mdi:check-circle' },
+      { value: '3–6×', label: 'Plus fréquent chez les femmes', icon: 'mdi:gender-female' },
+      { value: '26+10', label: 'Lettres et chiffres colorés', icon: 'mdi:alphabetical' },
+    ], columns: 4 },
+    { type: 'title', text: 'Art et Synesthésie : Quand les Sens Fusionnent', level: 3 },
+    { type: 'paragraph', html: '<strong>Wassily Kandinsky</strong>, fondateur de l\'expressionnisme abstrait, expérimentait à la fois la synesthésie graphème-couleur et musique-couleur : il entendait les instruments en couleurs (le jaune était une trompette, le bleu profond un violoncelle) et utilisait ces perceptions pour créer sa théorie de l\'art abstrait. En musique, <strong>Alexandre Scriabine</strong> a composé <em>Prométhée : Le Poème du Feu</em> avec une partie pour "clavier à lumières" (tastiera per luce), conçue pour projeter des couleurs correspondant à chaque note.' },
+    { type: 'tip', title: 'Palette de Couleurs de cet Outil', html: 'Les attributions de couleurs s\'inspirent des données statistiques les plus courantes dans la littérature scientifique. <strong>A → rouge</strong>, <strong>E → vert</strong>, <strong>I → blanc/noir selon le fond</strong>, <strong>O → noir/blanc</strong>, <strong>U → ambre</strong>. Les consonnes suivent des schémas moins uniformes, mais le contraste avec l\'arrière-plan est toujours privilégié pour garantir la lisibilité.' },
+  ],
+  faq: [
+    {
+      question: 'Tous les synesthètes voient-ils les mêmes couleurs pour chaque lettre ?',
+      answer: 'Non. Les couleurs synesthésiques sont uniques à chaque personne. Il existe des tendances statistiques (le A a tendance à être rouge pour beaucoup), mais aucun couple de synesthètes n\'a exactement la même palette. Cet outil utilise les couleurs les plus fréquemment rapportées dans les études de population, et non les "bonnes" couleurs.',
+    },
+    {
+      question: 'Puis-je développer la synesthésie en utilisant cet outil de manière continue ?',
+      answer: 'Pas au sens neurologique strict. La véritable synesthésie est une caractéristique du système nerveux, pas une compétence acquise. Cependant, l\'utilisation répétée d\'associations couleur-lettre peut créer de forts souvenirs associatifs. Certaines études suggèrent que pratiquer ces associations peut améliorer la mémoire textuelle.',
+    },
+    {
+      question: 'À quoi sert le mode "Aura" ?',
+      answer: 'Le mode Aura simule la façon dont certains synesthètes décrivent voir les couleurs "flotter" ou "rayonner" autour des lettres plutôt qu\'intégrées à celles-ci. Cela crée une expérience visuelle plus atmosphérique et immersive, particulièrement sur un fond sombre.',
+    },
+    {
+      question: 'Le mode "Points" a-t-il une base scientifique ?',
+      answer: 'C\'est une abstraction artistique. Il réduit le texte à son "essence chromatique" en éliminant la forme reconnaissable des lettres. Le résultat ressemble à des visualisations de données chromatiques ou à des peintures pointillistes, et permet de voir la "signature colorée" d\'un texte sans que le sens n\'interfère.',
+    },
+    {
+      question: 'Pourquoi certaines lettres comme I et O sont-elles blanches ou noires ?',
+      answer: 'Dans les études sur la synesthésie, les voyelles I et O, ainsi que la lettre W, sont fréquemment décrites comme blanches, transparentes ou noires. Cet outil adapte ces couleurs au fond actif : blanc sur fond sombre, noir sur fond clair, pour toujours garantir la visibilité.',
+    },
+  ],
+  bibliography: [
+    { name: 'Simner et al. (2006) – Synaesthesia: The prevalence of atypical cross-modal experiences', url: 'https://www.ncbi.nlm.nih.gov/pmc/articles/PMC1626536/' },
+    { name: 'Eagleman et al. (2007) – A standardized test battery for the study of synesthesia', url: 'https://www.sciencedirect.com/science/article/pii/S0010945207000087' },
+    { name: 'Kandinsky, W. – Du Spirituel dans l\'Art (1911)', url: 'https://fr.wikipedia.org/wiki/Du_spirituel_dans_l\'art' },
+  ],
+  howTo: [
+    { name: 'Écrire du texte', text: 'Cliquez sur la zone d\'écriture et commencez à taper. Chaque lettre apparaîtra colorée selon son association synesthésique statistique.' },
+    { name: 'Changer le mode de visualisation', text: 'Utilisez les boutons en haut à droite pour basculer entre Lettres (texte coloré), Points (cercles de couleur) et Aura (lettres lumineuses avec halos chromatiques).' },
+    { name: 'Explorer différents textes', text: 'Écrivez des noms, des mots dans différentes langues ou des phrases pour découvrir leur palette chromatique unique. Les mots longs créent des dégradés visuels fascinants.' },
+    { name: 'Effacer et recommencer', text: 'Utilisez le bouton "Effacer" dans la barre inférieure pour vider le canevas et explorer un nouveau texte.' },
+  ],
+  schemas: []
+};

package/src/tool/synesthesia-painter/index.ts

@@ -0,0 +1,39 @@
+import type { CreativeToolEntry, ToolLocaleContent, ToolDefinition } from '../../types';
+import SynesthesiaPainterComponent from './component.astro';
+import SynesthesiaPainterSEO from './seo.astro';
+import SynesthesiaPainterBibliography from './bibliography.astro';
+
+export interface SynesthesiaPainterUI {
+  [key: string]: string;
+  title: string;
+  description: string;
+  modeLetters: string;
+  modeDots: string;
+  modeAura: string;
+  placeholder: string;
+  footerText: string;
+  clearBtn: string;
+  faqTitle: string;
+  bibliographyTitle: string;
+}
+
+export type SynesthesiaPainterLocaleContent = ToolLocaleContent<SynesthesiaPainterUI>;
+
+export const synesthesiaPainter: CreativeToolEntry<SynesthesiaPainterUI> = {
+  id: 'synesthesia-painter',
+  icons: { bg: 'mdi:brush', fg: 'mdi:eye' },
+  i18n: {
+    es: () => import('./i18n/es').then((m) => m.content),
+    en: () => import('./i18n/en').then((m) => m.content),
+    fr: () => import('./i18n/fr').then((m) => m.content),
+  },
+};
+
+export { SynesthesiaPainterComponent, SynesthesiaPainterSEO, SynesthesiaPainterBibliography };
+
+export const SYNESTHESIA_PAINTER_TOOL: ToolDefinition = {
+  entry: synesthesiaPainter,
+  Component: SynesthesiaPainterComponent,
+  SEOComponent: SynesthesiaPainterSEO,
+  BibliographyComponent: SynesthesiaPainterBibliography,
+};

package/src/tool/synesthesia-painter/seo.astro

@@ -0,0 +1,14 @@
+---
+import { SEORenderer } from '@jjlmoya/utils-shared';
+import { synesthesiaPainter } from './index';
+import type { KnownLocale } from '../../types';
+
+interface Props {
+  locale?: KnownLocale;
+}
+
+const { locale = 'es' } = Astro.props;
+const content = await synesthesiaPainter.i18n[locale]?.();
+---
+
+{content && <SEORenderer content={{ locale, sections: content.seo }} />}

package/src/tool/synesthesia-painter/style.css

@@ -0,0 +1,234 @@
+.synesthesia-painter {
+  --sp-bg: #fff;
+  --sp-bg-muted: #f8fafc;
+  --sp-text: #0f172a;
+  --sp-text-muted: #475569;
+  --sp-text-dim: #64748b;
+  --sp-border: #e2e8f0;
+  --sp-shadow: rgba(0, 0, 0, 0.08);
+  --sp-primary: #6366f1;
+  --sp-primary-on: #fff;
+  --sp-header-bg: rgba(255, 255, 255, 0.92);
+}
+
+.theme-dark .synesthesia-painter {
+  --sp-bg: #0f172a;
+  --sp-bg-muted: #1e293b;
+  --sp-text: #f8fafc;
+  --sp-text-muted: #94a3b8;
+  --sp-text-dim: #64748b;
+  --sp-border: #334155;
+  --sp-shadow: rgba(0, 0, 0, 0.35);
+  --sp-primary: #818cf8;
+  --sp-header-bg: rgba(30, 41, 59, 0.92);
+}
+
+.synesthesia-painter-card {
+  position: relative;
+  min-height: 420px;
+  background-color: var(--sp-bg);
+  border-radius: 2rem;
+  border: 1px solid var(--sp-border);
+  box-shadow: 0 20px 40px -8px var(--sp-shadow);
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+/* ── mode selector ── */
+.synesthesia-painter-header {
+  position: absolute;
+  top: 1rem;
+  right: 1rem;
+  z-index: 30;
+  background-color: var(--sp-header-bg);
+  backdrop-filter: blur(8px);
+  padding: 0.3rem;
+  border-radius: 9999px;
+  border: 1px solid var(--sp-border);
+  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
+  display: flex;
+  gap: 0.2rem;
+}
+
+.synesthesia-painter-mode-btn {
+  padding: 0.4rem 0.875rem;
+  border-radius: 9999px;
+  font-size: 0.7rem;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  transition: background 0.2s, color 0.2s;
+  color: var(--sp-text-muted);
+  background: none;
+  border: none;
+  cursor: pointer;
+}
+
+.synesthesia-painter-mode-btn:hover {
+  background-color: var(--sp-bg-muted);
+  color: var(--sp-text);
+}
+
+.synesthesia-painter-mode-btn.active {
+  background-color: var(--sp-primary);
+  color: var(--sp-primary-on);
+  box-shadow: 0 2px 8px rgba(99, 102, 241, 0.35);
+}
+
+/* ── canvas area ── */
+.synesthesia-painter-canvas-wrapper {
+  position: relative;
+  flex-grow: 1;
+  padding: 2rem;
+  padding-top: 5rem;
+  cursor: text;
+}
+
+@media (min-width: 768px) {
+  .synesthesia-painter-canvas-wrapper {
+    padding: 3rem;
+    padding-top: 5rem;
+  }
+}
+
+.synesthesia-painter-viz-layer {
+  word-break: break-all;
+  white-space: pre-wrap;
+  line-height: 1.625;
+  outline: none;
+  font-size: 2.5rem;
+  min-height: 100%;
+}
+
+.synesthesia-painter-input {
+  position: absolute;
+  inset: 0;
+  opacity: 0;
+  cursor: text;
+  z-index: -10;
+  width: 100%;
+  height: 100%;
+  resize: none;
+  border: none;
+  background: transparent;
+}
+
+.synesthesia-painter-placeholder {
+  position: absolute;
+  top: 5rem;
+  left: 2rem;
+  pointer-events: none;
+  opacity: 0.35;
+  user-select: none;
+}
+
+@media (min-width: 768px) {
+  .synesthesia-painter-placeholder {
+    left: 3rem;
+  }
+}
+
+.synesthesia-painter-placeholder-text {
+  color: var(--sp-text-dim);
+  font-size: 2.25rem;
+  font-weight: 300;
+  font-style: italic;
+}
+
+/* ── footer ── */
+.synesthesia-painter-footer {
+  background-color: var(--sp-bg-muted);
+  border-top: 1px solid var(--sp-border);
+  padding: 0.875rem 2rem;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 1rem;
+}
+
+.synesthesia-painter-tooltip {
+  font-size: 0.75rem;
+  color: var(--sp-text-muted);
+  font-weight: 500;
+  margin: 0;
+}
+
+.synesthesia-painter-clear-btn {
+  font-size: 0.7rem;
+  font-weight: 700;
+  color: var(--sp-text-dim);
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  background: none;
+  border: none;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  gap: 0.375rem;
+  transition: color 0.2s;
+  white-space: nowrap;
+}
+
+.synesthesia-painter-clear-btn:hover {
+  color: #ef4444;
+}
+
+/* ── characters ── */
+.synesthesia-painter-char {
+  display: inline-block;
+  color: var(--char-color);
+  transition: color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  animation: sp-fade-in 0.2s ease-out forwards;
+}
+
+@keyframes sp-fade-in {
+  from {
+    opacity: 0;
+    transform: translate-y(4px);
+  }
+
+  to {
+    opacity: 1;
+    transform: translate-y(0);
+  }
+}
+
+/* mode: dots */
+.synesthesia-painter-viz-layer.dots .synesthesia-painter-char {
+  color: transparent;
+  font-size: 0;
+  width: 1rem;
+  height: 1rem;
+  border-radius: 50%;
+  background-color: var(--char-color);
+  margin: 0.25rem;
+  box-shadow: 0 0 8px var(--char-color);
+}
+
+/* mode: aura */
+.synesthesia-painter-viz-layer.aura .synesthesia-painter-char {
+  color: rgba(255, 255, 255, 0.15);
+  text-shadow: 0 0 18px var(--char-color), 0 0 36px var(--char-color);
+}
+
+.theme-dark .synesthesia-painter-viz-layer.aura .synesthesia-painter-char {
+  color: rgba(255, 255, 255, 0.85);
+  text-shadow: 0 0 14px var(--char-color), 0 0 28px var(--char-color), 0 0 56px var(--char-color);
+}
+
+/* cursor */
+.synesthesia-painter-cursor {
+  display: inline-block;
+  width: 2px;
+  height: 2.5rem;
+  background-color: var(--sp-primary);
+  animation: sp-blink 1s step-end infinite;
+  vertical-align: text-bottom;
+  margin-left: 2px;
+}
+
+@keyframes sp-blink {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0; }
+}

package/src/tool/zalgo-generator/bibliography.astro

@@ -0,0 +1,18 @@
+---
+import { Bibliography as SharedBibliography } from '@jjlmoya/utils-shared';
+import { zalgoGenerator, type ZalgoGeneratorLocaleContent } from './index';
+import type { KnownLocale } from '../../types';
+
+interface Props {
+  locale?: KnownLocale;
+}
+
+const { locale = 'es' } = Astro.props;
+const localeContentLoader = (zalgoGenerator.i18n as Record<string, () => Promise<ZalgoGeneratorLocaleContent>>)[locale];
+const content = localeContentLoader ? await localeContentLoader() : null;
+if (!content) return null;
+
+const { bibliography } = content;
+---
+
+<SharedBibliography links={bibliography} />

package/src/tool/zalgo-generator/component.astro

@@ -0,0 +1,195 @@
+---
+import { Icon } from 'astro-icon/components';
+import './style.css';
+---
+
+<section class="zg-section">
+    <div class="zg-grid">
+        <div class="zg-left">
+            <div class="zg-config-card">
+                <div class="zg-config-hover-bg"></div>
+                <h3 class="zg-config-title">
+                    <Icon name="mdi:tune-variant" style="width:1.25rem;height:1.25rem;color:#9333ea" />
+                    Configuración
+                </h3>
+
+                <div class="zg-config-body">
+                    <div class="zg-field">
+                        <div class="zg-field-header">
+                            <label class="zg-field-label">Intensidad</label>
+                            <span id="intensity-value" class="zg-intensity-val">50%</span>
+                        </div>
+                        <input type="range" id="intensity-slider" min="0.1" max="1.5" step="0.1" value="0.5" class="zg-slider" />
+                    </div>
+
+                    <div class="zg-toggles">
+                        <label class="zg-toggle-row">
+                            <span class="zg-toggle-label">Corrupción Superior</span>
+                            <div class="zg-switch">
+                                <input type="checkbox" id="opt-up" checked class="zg-switch-input" />
+                                <div class="zg-switch-track"></div>
+                            </div>
+                        </label>
+                        <label class="zg-toggle-row">
+                            <span class="zg-toggle-label">Ruido Central</span>
+                            <div class="zg-switch">
+                                <input type="checkbox" id="opt-middle" checked class="zg-switch-input" />
+                                <div class="zg-switch-track"></div>
+                            </div>
+                        </label>
+                        <label class="zg-toggle-row">
+                            <span class="zg-toggle-label">Corrupción Inferior</span>
+                            <div class="zg-switch">
+                                <input type="checkbox" id="opt-down" checked class="zg-switch-input" />
+                                <div class="zg-switch-track"></div>
+                            </div>
+                        </label>
+                    </div>
+
+                    <button id="reset-options" class="zg-reset-btn">
+                        <Icon name="mdi:history" style="width:1rem;height:1rem" />
+                        Restablecer Valores
+                    </button>
+                </div>
+            </div>
+
+            <div class="zg-warning">
+                <p>ADVERTENCIA: El texto Zalgo utiliza caracteres combinados de Unicode que pueden desbordar visualmente su contenedor. Úsese con precaución en redes sociales.</p>
+            </div>
+        </div>
+
+        <div class="zg-right">
+            <div class="zg-editor-card">
+                <div class="zg-editor-bar">
+                    <div class="zg-editor-bar-left">
+                        <Icon name="mdi:code-tags" style="width:1rem;height:1rem;color:#9333ea;opacity:0.5" />
+                        <span class="zg-editor-filename">Zalgo_Editor.sh</span>
+                    </div>
+                </div>
+                <textarea
+                    id="input-text"
+                    class="zg-textarea"
+                    placeholder="Escribe aquí el mensaje que deseas corromper..."
+                ></textarea>
+                <div class="zg-editor-footer">
+                    <span id="char-count" class="zg-char-count">0 CARACTERES</span>
+                    <div class="zg-footer-sep"></div>
+                    <button id="copy-btn" class="zg-copy-btn">
+                        <Icon name="mdi:content-copy" style="width:1.25rem;height:1.25rem" />
+                        Copiar Resultado
+                    </button>
+                    <button id="clear-btn" class="zg-clear-btn">
+                        <Icon name="mdi:trash-can-outline" style="width:1.25rem;height:1.25rem" />
+                    </button>
+                </div>
+            </div>
+
+            <div class="zg-preview-wrap">
+                <div class="zg-preview-badge">Vista Previa en Tiempo Real</div>
+                <div id="fake-ui-body" class="zg-preview-body">
+                    <div class="zg-preview-dots"></div>
+                    <div id="zalgo-output" class="zg-output">
+                        <span class="zg-output-empty">Vacío</span>
+                    </div>
+                    <div id="glitch-overlay" class="zg-glitch-overlay">
+                        <div class="zg-glitch-line zg-glitch-line-1"></div>
+                        <div class="zg-glitch-line zg-glitch-line-2"></div>
+                    </div>
+                </div>
+                <p class="zg-preview-note">Nota: Algunos navegadores pueden limitar el renderizado de caracteres combinados</p>
+            </div>
+        </div>
+    </div>
+</section>
+
+<script>
+    const UP = ["\u030d","\u030e","\u0304","\u0305","\u033f","\u0311","\u0306","\u0310","\u0352","\u0357","\u0351","\u0307","\u0308","\u030a","\u0342","\u0343","\u0344","\u034a","\u034b","\u034c","\u0303","\u0302","\u030c","\u0350","\u0300","\u0301","\u030b","\u030f","\u0312","\u0313","\u0314","\u033d","\u0309","\u0363","\u0364","\u0365","\u0366","\u0367","\u0368","\u0369","\u036a","\u036b","\u036c","\u036d","\u036e","\u036f","\u033e","\u035b","\u0346","\u031a"];
+    const MID = ["\u0315","\u031b","\u0340","\u0341","\u0358","\u0321","\u0322","\u0327","\u0328","\u0334","\u0335","\u0336","\u034f","\u035c","\u035d","\u035e","\u035f","\u0360","\u0362","\u0338","\u0337","\u0361","\u0489"];
+    const DOWN = ["\u0316","\u0317","\u0318","\u0319","\u031c","\u031d","\u031e","\u031f","\u0320","\u0324","\u0325","\u0326","\u0329","\u032a","\u032b","\u032c","\u032d","\u032e","\u032f","\u0330","\u0331","\u0332","\u0333","\u0339","\u033a","\u033b","\u033c","\u0345","\u0347","\u0348","\u0349","\u034d","\u034e","\u0353","\u0354","\u0355","\u0356","\u0359","\u035a","\u0323"];
+
+    function addCombiningChars(result: string, count: number, chars: string[], enabled: boolean): string {
+        if (!enabled) return result;
+        for (let j = 0; j < count; j++) result += chars[Math.floor(Math.random() * chars.length)];
+        return result;
+    }
+
+    function processZalgo(text: string, opts: { up: boolean; middle: boolean; down: boolean; intensity: number }): string {
+        let result = "";
+        const count = Math.floor(opts.intensity * 30);
+        for (let i = 0; i < text.length; i++) {
+            result += text[i];
+            if (/\s/.test(text[i] ?? '')) continue;
+            result = addCombiningChars(result, count, UP, opts.up);
+            result = addCombiningChars(result, Math.max(1, Math.floor(count/3)), MID, opts.middle);
+            result = addCombiningChars(result, count, DOWN, opts.down);
+        }
+        return result;
+    }
+
+    const input = document.getElementById("input-text") as HTMLTextAreaElement;
+    const output = document.getElementById("zalgo-output") as HTMLDivElement;
+    const intensitySlider = document.getElementById("intensity-slider") as HTMLInputElement;
+    const intensityValue = document.getElementById("intensity-value");
+    const optUp = document.getElementById("opt-up") as HTMLInputElement;
+    const optMiddle = document.getElementById("opt-middle") as HTMLInputElement;
+    const optDown = document.getElementById("opt-down") as HTMLInputElement;
+    const copyBtn = document.getElementById("copy-btn");
+    const clearBtn = document.getElementById("clear-btn");
+    const charCount = document.getElementById("char-count");
+    const resetBtn = document.getElementById("reset-options");
+    const glitchOverlay = document.getElementById("glitch-overlay") as HTMLElement;
+    const fakeUiBody = document.getElementById("fake-ui-body") as HTMLElement;
+
+    function update() {
+        const text = input.value;
+        const intensity = parseFloat(intensitySlider.value);
+        if (charCount) charCount.textContent = `${text.length} CARACTERES`;
+        if (intensityValue) intensityValue.textContent = `${Math.round(intensity * 100)}%`;
+        if (!text.trim()) {
+            output.innerHTML = '<span class="zg-output-empty">Vacío</span>';
+            glitchOverlay.style.opacity = "0";
+            fakeUiBody.style.borderColor = "";
+            fakeUiBody.style.boxShadow = "";
+            return;
+        }
+        const zalgoText = processZalgo(text, { up: optUp.checked, middle: optMiddle.checked, down: optDown.checked, intensity });
+        output.textContent = zalgoText;
+        if (intensity > 1.0) {
+            glitchOverlay.style.opacity = "1";
+            fakeUiBody.style.borderColor = intensity > 1.3 ? "rgba(147,51,234,0.3)" : "";
+            fakeUiBody.style.boxShadow = `inset 0 0 ${intensity * 10}px rgba(147,51,234,0.1)`;
+        } else {
+            glitchOverlay.style.opacity = "0";
+            fakeUiBody.style.borderColor = "";
+            fakeUiBody.style.boxShadow = "";
+        }
+        if (intensity > 1.2) output.style.setProperty("--zalgo-color","#9333ea");
+        else output.style.removeProperty("--zalgo-color");
+    }
+
+    input?.addEventListener("input", update);
+    intensitySlider?.addEventListener("input", update);
+    optUp?.addEventListener("change", update);
+    optMiddle?.addEventListener("change", update);
+    optDown?.addEventListener("change", update);
+
+    copyBtn?.addEventListener("click", () => {
+        const text = output.textContent || "";
+        if (text && text !== "Vacío") {
+            navigator.clipboard.writeText(text);
+            const orig = copyBtn.innerHTML;
+            copyBtn.innerHTML = "¡Copiado!";
+            setTimeout(() => { copyBtn.innerHTML = orig; }, 2000);
+        }
+    });
+
+    clearBtn?.addEventListener("click", () => { input.value = ""; update(); });
+
+    resetBtn?.addEventListener("click", () => {
+        intensitySlider.value = "0.5";
+        optUp.checked = true; optMiddle.checked = true; optDown.checked = true;
+        update();
+    });
+
+    update();
+</script>

package/src/tool/zalgo-generator/i18n/en.ts

@@ -0,0 +1,60 @@
+import type { ZalgoGeneratorLocaleContent } from '../index';
+
+export const content: ZalgoGeneratorLocaleContent = {
+  slug: 'zalgo-generator',
+  title: 'Zalgo Generator',
+  description: 'Corrupt your messages with cascading overflowing Unicode characters. Adjust intensity and direction of the glitch effect.',
+  faqTitle: 'Frequently Asked Questions',
+  bibliographyTitle: 'Chaos Bibliography',
+  ui: {
+    title: 'Zalgo Generator',
+    description: 'E̴v̵e̸r̸y̵t̸h̵i̸n̴g̴ ̷i̸s̶ ̶c̶o̷r̵r̷u̷p̶t̸',
+    inputPlaceholder: 'Type your normal message here...',
+    intensityLabel: 'Corruption Level',
+    outputLabel: 'Corrupted Result',
+    copyBtn: 'Copy Chaos',
+    copied: 'Copied!',
+    faqTitle: 'FAQ',
+    bibliographyTitle: 'References'
+  },
+  seo: [
+    { type: 'title', text: 'What Is Zalgo Text and How Does Visual Corruption Work?', level: 2 },
+    { type: 'paragraph', html: 'Zalgo Text is a form of typographic manipulation that exploits a specific feature of the Unicode standard: <strong>combining characters</strong>. Unlike normal characters, these diacritics take up no horizontal space — they stack vertically on top of the base letter, creating that "digital chaos" or "cosmic horror" aesthetic so popular in internet culture.' },
+    { type: 'title', text: 'Anatomy of the Process', level: 3 },
+    { type: 'paragraph', html: 'Our generator processes each character independently, injecting random bursts of Unicode code points in three distinct vectors: <strong>upper</strong> (diacritics that stack above), <strong>middle</strong> (which pierce through the letter), and <strong>lower</strong> (hanging below).' },
+    { type: 'tip', title: 'Corruption Algorithm', html: 'For each base character, a <code>count = intensity × 30</code> is calculated. That many random diacritics are added in each vector. At intensity 1.5 you can get up to 45 combining characters per letter.' },
+    { type: 'title', text: 'Etiquette and Applications', level: 3 },
+    { type: 'list', items: [
+      '<strong>Social Media:</strong> Grab attention on Instagram or TikTok. Perfect for bios seeking to break with convention.',
+      '<strong>Horror Storytelling:</strong> Dramatize fiction narratives, creepypastas, or simulations of compromised systems.',
+      '<strong>Accessibility:</strong> Warning — Zalgo text is unreadable by screen readers. Use it only as visual decoration, never for critical content.',
+      '<strong>SEO:</strong> Never use Zalgo in core keywords (H1, meta titles). Indexing bots may fail to normalize these characters.',
+    ]},
+    { type: 'title', text: 'The Origin: From Something Awful to Glitch Art', level: 3 },
+    { type: 'paragraph', html: 'Zalgo did not begin as a generator, but as an intervention in classic comic strips. The user Shmorky, in the mid-2000s, began deforming characters like Nancy or Archie, adding stains and distortions. The phrase <strong>"He comes"</strong> sealed the fate of these works, announcing the arrival of an entity that devoured reality.' },
+    { type: 'glossary', items: [
+      { term: 'Combining Character', definition: 'A Unicode code point designed to be placed on top of, below, or through a base character. Used legitimately in languages like Arabic, Vietnamese, and Hindi.' },
+      { term: 'Diacritic', definition: 'A mark added to a base letter to modify its pronunciation or meaning. Zalgo abuses these to create visual overflow.' },
+      { term: 'Unicode Block', definition: 'A contiguous range of Unicode code points. Zalgo characters mostly come from the "Combining Diacritical Marks" block (U+0300–U+036F).' },
+      { term: 'Glitch Art', definition: 'An aesthetic that intentionally incorporates or simulates errors, artifacts, and corruptions in digital media as an expressive technique.' },
+    ]},
+  ],
+  faq: [
+    { question: 'What is Zalgo text?', answer: 'It is a type of text that uses Unicode combining characters (diacritics) excessively. When stacked vertically, these characters "overflow" their original line, creating a visual effect of corruption, disorder, or horror popular in internet culture.' },
+    { question: 'Why does Zalgo text look so strange?', answer: 'It exploits a feature of the Unicode standard that allows adding marks above, below, or through a base letter. Since there is no strict limit on how many marks can be added, the text can "invade" lines above or below.' },
+    { question: 'Can I use this text on social media?', answer: 'Yes, most modern platforms (Instagram, Twitter, Discord) support Unicode. However, some networks or devices may filter or truncate excess characters at very high intensity to maintain interface readability.' },
+    { question: 'How can I remove the Zalgo effect from text?', answer: 'To clean corrupted text, you can use JavaScript string normalization or simply paste it into a basic text editor that only accepts plain text. Our tool is purely creative and does not damage the original content.' },
+  ],
+  bibliography: [
+    { name: 'Unicode Standard - Combining Characters', url: 'https://www.unicode.org/standard/principles.html#Combining_Characters' },
+    { name: 'The Zalgo Text Phenomenon', url: 'https://knowyourmeme.com/memes/zalgo' },
+    { name: 'MDN - String normalization', url: 'https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/normalize' },
+  ],
+  howTo: [
+    { name: 'Write the base message', text: 'Enter the text you want to "corrupt" in the main text box.' },
+    { name: 'Adjust the chaos intensity', text: 'Move the slider to define how many combining characters to stack. Higher intensity = harder to read.' },
+    { name: 'Select the overflow direction', text: 'Choose whether corruption should grow upward, downward, or in all directions simultaneously.' },
+    { name: 'Copy the result', text: 'Click the copy button. The resulting text includes all the invisible bytes needed to maintain the glitch effect.' },
+  ],
+  schemas: []
+};