@jjlmoya/utils-creative 1.19.0 → 1.21.0

package/src/tool/glitch-image-distorter/glitch-image-distorter.css

@@ -0,0 +1,233 @@
+.glitch-image-distorter {
+  --gid-bg: #fff;
+  --gid-bg-muted: #f8fafc;
+  --gid-text: #0f172a;
+  --gid-text-muted: #475569;
+  --gid-text-dim: #64748b;
+  --gid-border: #e2e8f0;
+  --gid-shadow: rgba(0, 0, 0, 0.08);
+  --gid-primary: #6366f1;
+  --gid-primary-on: #fff;
+}
+
+.theme-dark .glitch-image-distorter {
+  --gid-bg: #0f172a;
+  --gid-bg-muted: #1e293b;
+  --gid-text: #f8fafc;
+  --gid-text-muted: #94a3b8;
+  --gid-text-dim: #64748b;
+  --gid-border: #334155;
+  --gid-shadow: rgba(0, 0, 0, 0.35);
+  --gid-primary: #818cf8;
+}
+
+.glitch-image-distorter-card {
+  position: relative;
+  min-height: 500px;
+  background-color: var(--gid-bg);
+  border-radius: 2rem;
+  border: 1px solid var(--gid-border);
+  box-shadow: 0 20px 40px -8px var(--gid-shadow);
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+.glitch-image-distorter-canvas-wrapper {
+  flex: 1;
+  position: relative;
+  overflow: hidden;
+  background-color: var(--gid-bg-muted);
+  border: 2px dashed var(--gid-border);
+  border-radius: 1rem;
+  margin: 1.5rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+}
+
+.glitch-image-distorter-canvas {
+  max-width: 100%;
+  max-height: 100%;
+  border-radius: 0.5rem;
+}
+
+.glitch-image-distorter-drop-zone {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 1rem;
+  padding: 1rem;
+  text-align: center;
+  pointer-events: none;
+}
+
+.glitch-image-distorter-drop-zone.hidden {
+  display: none;
+}
+
+.glitch-image-distorter-drop-icon {
+  width: 3rem;
+  height: 3rem;
+  opacity: 0.5;
+  color: var(--gid-text-muted);
+}
+
+.glitch-image-distorter-drop-text {
+  color: var(--gid-text-muted);
+  font-size: 0.9rem;
+  font-weight: 500;
+}
+
+.glitch-image-distorter-paste-hint {
+  color: var(--gid-text-dim);
+  font-size: 0.8rem;
+  margin-top: 0.5rem;
+}
+
+.glitch-image-distorter-controls {
+  padding: 1.5rem;
+  background-color: var(--gid-bg);
+  border-top: 1px solid var(--gid-border);
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+  gap: 1rem;
+}
+
+.glitch-image-distorter-control {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+.glitch-image-distorter-label {
+  font-size: 0.875rem;
+  font-weight: 600;
+  color: var(--gid-text);
+}
+
+.glitch-image-distorter-slider {
+  width: 100%;
+  height: 6px;
+  border-radius: 3px;
+  background: linear-gradient(90deg, transparent, var(--gid-primary));
+  outline: none;
+  cursor: pointer;
+  -webkit-appearance: none;
+  appearance: none;
+}
+
+.glitch-image-distorter-slider::-webkit-slider-thumb {
+  -webkit-appearance: none;
+  appearance: none;
+  width: 16px;
+  height: 16px;
+  border-radius: 50%;
+  background: var(--gid-primary);
+  cursor: pointer;
+  box-shadow: 0 2px 4px var(--gid-shadow);
+}
+
+.glitch-image-distorter-slider::-moz-range-thumb {
+  width: 16px;
+  height: 16px;
+  border-radius: 50%;
+  background: var(--gid-primary);
+  cursor: pointer;
+  border: none;
+  box-shadow: 0 2px 4px var(--gid-shadow);
+}
+
+.glitch-image-distorter-select {
+  padding: 0.5rem;
+  border-radius: 0.5rem;
+  border: 1px solid var(--gid-border);
+  background-color: var(--gid-bg);
+  color: var(--gid-text);
+  font-size: 0.875rem;
+  cursor: pointer;
+}
+
+.glitch-image-distorter-buttons {
+  padding: 1.5rem;
+  background-color: var(--gid-bg-muted);
+  border-top: 1px solid var(--gid-border);
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.75rem;
+  justify-content: center;
+}
+
+.glitch-image-distorter-btn {
+  padding: 0.75rem 1.5rem;
+  border-radius: 0.5rem;
+  border: 1px solid var(--gid-border);
+  background-color: var(--gid-bg);
+  color: var(--gid-text);
+  font-weight: 500;
+  font-size: 0.875rem;
+  cursor: pointer;
+  transition: all 0.2s ease;
+}
+
+.glitch-image-distorter-btn:hover {
+  background-color: var(--gid-bg-muted);
+  border-color: var(--gid-primary);
+  color: var(--gid-primary);
+}
+
+.glitch-image-distorter-btn.primary {
+  background-color: var(--gid-primary);
+  color: var(--gid-primary-on);
+  border-color: var(--gid-primary);
+}
+
+.glitch-image-distorter-btn.primary:hover {
+  opacity: 0.9;
+  transform: translateY(-1px);
+  box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);
+}
+
+.glitch-image-distorter-checkbox {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  cursor: pointer;
+}
+
+.glitch-image-distorter-checkbox input {
+  cursor: pointer;
+  accent-color: var(--gid-primary);
+}
+
+.glitch-image-distorter-checkbox label {
+  cursor: pointer;
+  font-size: 0.875rem;
+  color: var(--gid-text);
+}
+
+.glitch-image-distorter-example-btn {
+  position: absolute;
+  bottom: 1rem;
+  right: 1rem;
+  padding: 0.75rem 1rem;
+  background-color: var(--gid-primary);
+  color: var(--gid-primary-on);
+  border: none;
+  border-radius: 0.5rem;
+  font-size: 0.875rem;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  z-index: 10;
+}
+
+.glitch-image-distorter-example-btn:hover {
+  opacity: 0.9;
+  transform: translateY(-2px);
+  box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);
+}

package/src/tool/glitch-image-distorter/i18n/de.ts

@@ -0,0 +1,131 @@
+import type { WithContext, FAQPage, HowTo, SoftwareApplication } from 'schema-dts';
+import { bibliography } from '../bibliography';
+import type { GlitchImageDistorterLocaleContent } from '../index';
+
+const slug = 'glitch-bild-distorter';
+const title = 'Glitch Bild Distorter';
+const description = 'Verwandle Bilder in Glitch-Art mit RGB-Splits, Scanlines, Pixel-Sorting und animierten Verzerrungen. Ganz ohne Photoshop.';
+
+const faq: GlitchImageDistorterLocaleContent['faq'] = [
+  {
+    question: 'Was ist Glitch-Art?',
+    answer: 'Glitch-Art ist eine Form digitaler Kunst, bei der digitale Bilder oder Daten manipuliert werden, um absichtliche visuelle Fehler zu erzeugen. Diese "Glitches" führen zu fragmentierten Farben, verzerrten Formen und unvorhersehbaren Mustern, die eine Ästhetik digitaler Korruption und Chaos erzeugen.',
+  },
+  {
+    question: 'Kann ich meine eigenen Bilder verwenden?',
+    answer: 'Ja! Du kannst jedes PNG-, JPG- oder WebP-Bild hochladen, per Drag-and-Drop auf die Leinwand ziehen oder ein Bild direkt aus der Zwischenablage mit Strg+V einfügen. Du kannst auch das Beispielbild verwenden.',
+  },
+  {
+    question: 'Was bewirken die verschiedenen Verzerrungseffekte?',
+    answer: 'Korruption trennt die RGB-Kanäle für einen chromatischen Aberrationseffekt. Interferenz fügt monitorähnliche Scanlines mit optionalem Zittern hinzu. Pixel-Sorting lässt helle Pixel in eine gewählte Richtung "fließen". Statisches Rauschen überlagert klassisches TV-Schneerauschen.',
+  },
+  {
+    question: 'Kann ich den Glitch-Effekt animieren?',
+    answer: 'Ja! Der "Glitch-Animation"-Modus wendet mikro-zufällige Bewegungen auf die Parameter an und erzeugt so einen lebendigen, flackernden Effekt, der kontinuierlich läuft. Du kannst dies als animiertes GIF oder WebP exportieren.',
+  },
+  {
+    question: 'Welche Formate kann ich exportieren?',
+    answer: 'Du kannst ein hochwertiges PNG für die statische Nutzung herunterladen oder als animiertes GIF oder WebP exportieren, wenn der Animationsmodus aktiviert ist. Perfekt für Instagram, Discord oder andere Plattformen.',
+  },
+  {
+    question: 'Was macht die Chaos-Taste?',
+    answer: 'Die "Chaos-Zufall"-Taste randomisiert sofort alle Schiebereglerwerte und erzeugt so unerwartete und oft überraschende Glitch-Kombinationen. Ideal zum Erkunden des kreativen Potenzials ohne manuelle Anpassungen.',
+  },
+];
+
+const howTo: GlitchImageDistorterLocaleContent['howTo'] = [
+  { name: 'Bild laden', text: 'Ziehe ein Bild auf die Leinwand, füge es mit Strg+V ein, lade es über die Datei-Schaltfläche hoch oder klicke auf "Beispielbild verwenden".' },
+  { name: 'Regler anpassen', text: 'Verwende die Regler für Korruption, Interferenz, Pixel-Sort und Rauschen, um verschiedene Glitch-Effekte anzuwenden. Die Vorschau wird in Echtzeit aktualisiert.' },
+  { name: 'Animation aktivieren', text: 'Schalte die "Glitch-Animation"-Taste ein, um mikro-zufällige Bewegungen hinzuzufügen. Das Bild wird flackern und sich dynamisch verändern.' },
+  { name: 'Kreation exportieren', text: 'Lade als PNG für statische Kunstwerke herunter oder exportiere als GIF/WebP, wenn die Animation aktiviert ist. Teile deine Glitch-Art in sozialen Medien!' },
+  { name: 'Mit Chaos experimentieren', text: 'Klicke auf die "Chaos-Zufall"-Taste, um alle Einstellungen automatisch zu randomisieren und unerwartete Glitch-Kombinationen zu entdecken.' },
+];
+
+const faqSchema: WithContext<FAQPage> = {
+  '@context': 'https://schema.org',
+  '@type': 'FAQPage',
+  mainEntity: faq.map((item) => ({
+    '@type': 'Question',
+    name: item.question,
+    acceptedAnswer: { '@type': 'Answer', text: item.answer },
+  })),
+};
+
+const howToSchema: WithContext<HowTo> = {
+  '@context': 'https://schema.org',
+  '@type': 'HowTo',
+  name: title,
+  description,
+  step: howTo.map((step) => ({
+    '@type': 'HowToStep',
+    name: step.name,
+    text: step.text,
+  })),
+};
+
+const appSchema: WithContext<SoftwareApplication> = {
+  '@context': 'https://schema.org',
+  '@type': 'SoftwareApplication',
+  name: title,
+  description,
+  applicationCategory: 'UtilitiesApplication',
+  operatingSystem: 'Web',
+  offers: { '@type': 'Offer', price: '0', priceCurrency: 'EUR' },
+  inLanguage: 'de',
+};
+
+export const content: GlitchImageDistorterLocaleContent = {
+  slug,
+  title,
+  description,
+  faqTitle: 'Häufig gestellte Fragen',
+  ui: {
+    title: 'Glitch Distorter',
+    description: 'Erstelle Glitch-Art in Sekundenschnelle.',
+    dragDropText: 'Bild hierher ziehen oder zum Hochladen klicken',
+    pasteHint: 'Tipp: Du kannst ein Bild auch mit Strg+V einfügen',
+    exampleImageBtn: 'Beispielbild verwenden',
+    corruptionLabel: 'Korruption (RGB-Split)',
+    interferenceLabel: 'Interferenz (Scanlines)',
+    tremorLabel: 'Zittern',
+    pixelSortLabel: 'Pixel Sorting',
+    pixelSortDirectionLabel: 'Richtung',
+    noiseLabel: 'Statisches Rauschen',
+    animateBtn: 'Glitch Animation',
+    chaosBtn: 'Chaos-Zufall',
+    downloadPngBtn: 'PNG herunterladen',
+    downloadGifBtn: 'GIF herunterladen',
+    undoBtn: 'Rückgängig',
+    redoBtn: 'Wiederholen',
+    footerText: 'Erstelle korrumpierte digitale Kunst in weniger als 30 Sekunden',
+    faqTitle: 'FAQ',
+    bibliographyTitle: 'Referenzen'
+  },
+  seo: [
+    { type: 'title', text: 'Was ist Glitch-Art?', level: 2 },
+    { type: 'paragraph', html: '<strong>Glitch-Art</strong> ist eine kreative Praxis, die absichtlich digitale Fehler, korrupte Daten und visuelle Artefakte nutzt, um ästhetische Ergebnisse zu erzielen. Im Gegensatz zur traditionellen Kunst, die nach Perfektion strebt, feiert Glitch die unerwartete Schönheit des digitalen Zusammenbruchs — fragmentierte Farben und chaotische Muster, die aus technischem Versagen entstehen.' },
+    { type: 'title', text: 'Ursprünge und digitale Ästhetik', level: 3 },
+    { type: 'paragraph', html: 'Die Glitch-Ästhetik entstand Anfang der 2000er Jahre, als digitale Künstler begannen, mit korrupten Bilddateien und Hardwarefehlern zu experimentieren. Künstler wie <strong>Rosa Menkman</strong> erhoben Glitch-Art zur bildenden Kunst, indem sie die Poetik digitaler Artefakte untersuchten. Die Ästhetik schöpft aus VHS-Degradation, Übertragungsfehlern und dem sichtbaren "Rauschen" digitaler Systeme.' },
+    { type: 'title', text: 'Wichtige Glitch-Techniken', level: 3 },
+    { type: 'list', items: [
+      '<strong>RGB-Splitting:</strong> Das Trennen und Versetzen der roten, grünen und blauen Farbkanäle erzeugt chromatische Aberration.',
+      '<strong>Scanlines:</strong> Das Simulieren horizontaler Scanzeilen ahmt alte CRT-Monitore nach und fügt eine retro Ästhetik hinzu.',
+      '<strong>Pixel-Sorting:</strong> Das Sortieren von Pixeln nach Helligkeit und deren Verschiebung erzeugt einen "schmelzenden" Effekt.',
+      '<strong>Data Moshing:</strong> Die Manipulation von Videocodec-Daten, um Frames auf unerwartete Weise zu mischen.',
+      '<strong>Bit Shifting:</strong> Die direkte Veränderung von Binärdaten führt zu dramatischen Farbverschiebungen und Verzerrungen.',
+    ]},
+    { type: 'tip', title: 'Die Philosophie hinter Glitch', html: 'Glitch-Art stellt die Vorstellung einer "perfekten" digitalen Darstellung in Frage. Indem wir Fehler akzeptieren, hinterfragen wir die Zuverlässigkeit der Technologie und erforschen, wie diese unsere Wahrnehmung der Realität vermittelt. Es ist Kunst über Systemfehler und die in Chaos verborgene Schönheit.' },
+    { type: 'title', text: 'Zeitgenössische Anwendungen', level: 3 },
+    { type: 'paragraph', html: 'Heute findet man Glitch-Ästhetik überall: Albumcover, Musikvideos, Mode und Grafikdesign. Dieses Tool demokratisiert die Erstellung von Glitch-Art und ermöglicht es jedem, professionell aussehende digitale Korruption ohne tiefes technisches Wissen zu produzieren.' },
+    { type: 'stats', items: [
+      { value: '2000er', label: 'Entstehung der Glitch-Art', icon: 'mdi:history' },
+      { value: '∞', label: 'Mögliche Glitch-Kombinationen', icon: 'mdi:shuffle-variant' },
+      { value: '<30s', label: 'Zeit zum Erstellen', icon: 'mdi:flash' },
+      { value: '3+', label: 'Export-Formate', icon: 'mdi:download-multiple' },
+    ], columns: 4 },
+  ],
+  faq,
+  bibliography,
+  howTo,
+  schemas: [faqSchema as any, howToSchema as any, appSchema],
+};

package/src/tool/glitch-image-distorter/i18n/en.ts

@@ -0,0 +1,131 @@
+import type { WithContext, FAQPage, HowTo, SoftwareApplication } from 'schema-dts';
+import { bibliography } from '../bibliography';
+import type { GlitchImageDistorterLocaleContent } from '../index';
+
+const slug = 'glitch-image-distorter';
+const title = 'Glitch Image Distorter';
+const description = 'Transform images into glitch art with RGB splits, scanlines, pixel sorting, and animated distortions. No Photoshop needed.';
+
+const faq: GlitchImageDistorterLocaleContent['faq'] = [
+  {
+    question: 'What is glitch art?',
+    answer: 'Glitch art is a form of digital art created by manipulating digital images or data to produce intentional visual errors. These "glitches" result in fragmented colors, distorted shapes, and unpredictable patterns that create an aesthetic of digital corruption and chaos.',
+  },
+  {
+    question: 'Can I use my own images?',
+    answer: 'Yes! You can upload any PNG, JPG, or WebP image, drag and drop it into the canvas, or paste an image directly from your clipboard using Ctrl+V. You can also use the example image to explore the tool without uploading.',
+  },
+  {
+    question: 'What do the different distortion effects do?',
+    answer: 'Corruption separates RGB channels for a chromatic aberration effect. Interference adds monitor-like scanlines with optional tremor. Pixel Sorting makes bright pixels "drip" in a chosen direction. Static Noise overlays classic TV snow. Combined, they create the glitch aesthetic.',
+  },
+  {
+    question: 'Can I animate the glitch effect?',
+    answer: 'Yes! The "Glitch Animate" mode applies micro-random movements to the parameters, creating a living, flickering effect that loops continuously. You can export this as an animated GIF or WebP for social media.',
+  },
+  {
+    question: 'What formats can I export?',
+    answer: 'You can download a high-quality PNG for static use, or export as an animated GIF or WebP if you enabled animation mode. These formats are perfect for sharing on Instagram, Discord, or other platforms.',
+  },
+  {
+    question: 'What does the Chaos button do?',
+    answer: 'The "Chaos Random" button instantly randomizes all slider values, creating unexpected and often surprising glitch combinations. It\'s perfect for exploring the tool\'s creative potential without manual tweaking.',
+  },
+];
+
+const howTo: GlitchImageDistorterLocaleContent['howTo'] = [
+  { name: 'Load an image', text: 'Drag and drop an image onto the canvas, paste one with Ctrl+V, upload via the file button, or click "Use example image" to start immediately.' },
+  { name: 'Adjust distortion sliders', text: 'Use the Corruption, Interference, Pixel Sort, and Noise sliders to apply different glitch effects. Watch the preview update in real-time.' },
+  { name: 'Enable animation', text: 'Toggle the "Glitch Animate" button to add micro-random movements. The image will flicker and shift, creating a living glitch effect.' },
+  { name: 'Export your creation', text: 'Download as PNG for static artwork, or export as GIF/WebP if animation is enabled. Share your glitch art on social media!' },
+  { name: 'Experiment with Chaos', text: 'Click the "Chaos Random" button to auto-randomize all settings and discover unexpected glitch combinations.' },
+];
+
+const faqSchema: WithContext<FAQPage> = {
+  '@context': 'https://schema.org',
+  '@type': 'FAQPage',
+  mainEntity: faq.map((item) => ({
+    '@type': 'Question',
+    name: item.question,
+    acceptedAnswer: { '@type': 'Answer', text: item.answer },
+  })),
+};
+
+const howToSchema: WithContext<HowTo> = {
+  '@context': 'https://schema.org',
+  '@type': 'HowTo',
+  name: title,
+  description,
+  step: howTo.map((step) => ({
+    '@type': 'HowToStep',
+    name: step.name,
+    text: step.text,
+  })),
+};
+
+const appSchema: WithContext<SoftwareApplication> = {
+  '@context': 'https://schema.org',
+  '@type': 'SoftwareApplication',
+  name: title,
+  description,
+  applicationCategory: 'UtilitiesApplication',
+  operatingSystem: 'Web',
+  offers: { '@type': 'Offer', price: '0', priceCurrency: 'EUR' },
+  inLanguage: 'en',
+};
+
+export const content: GlitchImageDistorterLocaleContent = {
+  slug,
+  title,
+  description,
+  faqTitle: 'Frequently Asked Questions',
+  ui: {
+    title: 'Glitch Image Distorter',
+    description: 'Create glitch art in seconds.',
+    dragDropText: 'Drag & drop an image here or click to upload',
+    pasteHint: 'Tip: You can also paste an image with Ctrl+V',
+    exampleImageBtn: 'Use example image',
+    corruptionLabel: 'Corruption (RGB Split)',
+    interferenceLabel: 'Interference (Scanlines)',
+    tremorLabel: 'Tremor',
+    pixelSortLabel: 'Pixel Sorting',
+    pixelSortDirectionLabel: 'Direction',
+    noiseLabel: 'Static Noise',
+    animateBtn: 'Glitch Animate',
+    chaosBtn: 'Chaos Random',
+    downloadPngBtn: 'Download PNG',
+    downloadGifBtn: 'Download GIF',
+    undoBtn: 'Undo',
+    redoBtn: 'Redo',
+    footerText: 'Create corrupted digital art in less than 30 seconds',
+    faqTitle: 'FAQ',
+    bibliographyTitle: 'References'
+  },
+  seo: [
+    { type: 'title', text: 'What Is Glitch Art?', level: 2 },
+    { type: 'paragraph', html: '<strong>Glitch art</strong> is a creative practice that intentionally exploits digital errors, corrupted data, and visual artifacts to produce aesthetic results. Unlike traditional art, which seeks perfection and clarity, glitch art celebrates the unexpected beauty of digital breakdown—fragmented colors, distorted shapes, and chaotic patterns that emerge from technological failure.' },
+    { type: 'title', text: 'Origins and Digital Aesthetics', level: 3 },
+    { type: 'paragraph', html: 'The glitch aesthetic emerged in the early 2000s as digital artists began experimenting with corrupted image files, codec errors, and hardware malfunctions. Artists like <strong>Rosa Menkman</strong> and <strong>Evan Roth</strong> elevated glitch art to fine art status by investigating the poetics of digital artifacts. The aesthetic draws from VHS degradation, transmission errors, and the visible "noise" of digital systems—transforming technical failures into cultural commentary.' },
+    { type: 'title', text: 'Key Glitch Techniques', level: 3 },
+    { type: 'list', items: [
+      '<strong>RGB Splitting:</strong> Separating red, green, and blue color channels and offsetting them creates chromatic aberration, a signature glitch effect.',
+      '<strong>Scanlines:</strong> Simulating horizontal scan lines mimics old CRT monitors and adds a retro, corrupted television aesthetic.',
+      '<strong>Pixel Sorting:</strong> Sorting pixels by brightness or hue and shifting them directionally creates a "melting" or "dripping" effect.',
+      '<strong>Data Moshing:</strong> Manipulating video codec data to blend frames in unexpected ways, creating temporal distortion.',
+      '<strong>Bit Shifting:</strong> Altering binary data directly results in dramatic color shifts and geometric distortions.',
+    ]},
+    { type: 'tip', title: 'The Philosophy Behind Glitch', html: 'Glitch art challenges the notion of "perfect" digital representation. By embracing errors and imperfections, glitch artists question the reliability of digital media and explore how technology mediates our perception of reality. It\'s art about systems failure, human fallibility, and the beauty hidden in chaos.' },
+    { type: 'title', text: 'Contemporary Applications', level: 3 },
+    { type: 'paragraph', html: 'Today, glitch aesthetics appear everywhere: album covers, music videos, fashion, and graphic design. Artists like <strong>Jon Cates</strong> and collectives like <strong>JODI</strong> continue pushing the boundaries of what glitch can express. This tool democratizes glitch art creation, allowing anyone to produce professional-looking digital corruption without deep technical knowledge.' },
+    { type: 'stats', items: [
+      { value: '2000s', label: 'Emergence of glitch art', icon: 'mdi:history' },
+      { value: '∞', label: 'Possible glitch combinations', icon: 'mdi:shuffle-variant' },
+      { value: '<30s', label: 'Time to create', icon: 'mdi:flash' },
+      { value: '3+', label: 'Export formats', icon: 'mdi:download-multiple' },
+    ], columns: 4 },
+  ],
+  faq,
+  bibliography,
+  howTo,
+  schemas: [faqSchema as any, howToSchema as any, appSchema],
+};

package/src/tool/glitch-image-distorter/i18n/es.ts

@@ -0,0 +1,131 @@
+import type { WithContext, FAQPage, HowTo, SoftwareApplication } from 'schema-dts';
+import { bibliography } from '../bibliography';
+import type { GlitchImageDistorterLocaleContent } from '../index';
+
+const slug = 'distorsionador-imagenes-glitch';
+const title = 'Distorsionador de Imágenes Glitch';
+const description = 'Transforma tus fotos en arte glitch con separaciones RGB, líneas de escaneo, pixel sorting y distorsiones animadas. Sin Photoshop.';
+
+const faq: GlitchImageDistorterLocaleContent['faq'] = [
+  {
+    question: '¿Qué es el arte glitch?',
+    answer: 'El arte glitch es una forma de expresión digital que consiste en manipular imágenes o datos para producir errores visuales intencionados. Estos "glitches" generan colores fragmentados, formas distorsionadas y patrones impredecibles que crean una estética de corrupción digital y caos.',
+  },
+  {
+    question: '¿Puedo usar mis propias imágenes?',
+    answer: '¡Sí! Puedes subir cualquier imagen en formato PNG, JPG o WebP, arrastrarla y soltarla en el lienzo, o pegarla directamente desde el portapapeles usando Ctrl+V. También tienes disponible una imagen de ejemplo para explorar la herramienta.',
+  },
+  {
+    question: '¿Qué hacen los diferentes efectos de distorsión?',
+    answer: 'La Corrupción separa los canales RGB para un efecto de aberración cromática. La Interferencia añade líneas de escaneo similares a monitores antiguos con temblor opcional. El Pixel Sorting hace que los píxeles brillantes "goteen" en una dirección. El Ruido Estático añade la clásica nieve de televisor.',
+  },
+  {
+    question: '¿Puedo animar el efecto glitch?',
+    answer: '¡Claro! El modo "Animación Glitch" aplica movimientos aleatorios sutiles a los parámetros, creando un efecto vibrante y dinámico que se repite continuamente. Puedes exportarlo como un GIF animado o WebP para redes sociales.',
+  },
+  {
+    question: '¿En qué formatos puedo exportar?',
+    answer: 'Puedes descargar un PNG de alta calidad para imágenes estáticas, o exportar como GIF o WebP animado si activaste el modo de animación. Estos formatos son perfectos para compartir en Instagram, Discord y otras plataformas.',
+  },
+  {
+    question: '¿Para qué sirve el botón Caos?',
+    answer: 'El botón "Caos Aleatorio" cambia instantáneamente todos los valores de los controles, generando combinaciones de glitch inesperadas y sorprendentes. Es ideal para explorar el potencial creativo de la herramienta sin ajustes manuales.',
+  },
+];
+
+const howTo: GlitchImageDistorterLocaleContent['howTo'] = [
+  { name: 'Carga una imagen', text: 'Arrastra y suelta una imagen, pégala con Ctrl+V, súbela desde tu dispositivo o usa la imagen de ejemplo para empezar de inmediato.' },
+  { name: 'Ajusta los efectos', text: 'Usa los controles de Corrupción, Interferencia, Pixel Sorting y Ruido para aplicar diferentes efectos. La vista previa se actualiza en tiempo real.' },
+  { name: 'Activa la animación', text: 'Pulsa el botón "Animación Glitch" para añadir vibraciones y parpadeos aleatorios. La imagen cobrará vida con un efecto glitch dinámico.' },
+  { name: 'Exporta tu creación', text: 'Descarga como PNG para arte estático o exporta como GIF/WebP si activaste la animación. ¡Comparte tu arte glitch en redes sociales!' },
+  { name: 'Experimenta con el Caos', text: 'Haz clic en el botón "Caos Aleatorio" para descubrir combinaciones de efectos sorprendentes de forma automática.' },
+];
+
+const faqSchema: WithContext<FAQPage> = {
+  '@context': 'https://schema.org',
+  '@type': 'FAQPage',
+  mainEntity: faq.map((item) => ({
+    '@type': 'Question',
+    name: item.question,
+    acceptedAnswer: { '@type': 'Answer', text: item.answer },
+  })),
+};
+
+const howToSchema: WithContext<HowTo> = {
+  '@context': 'https://schema.org',
+  '@type': 'HowTo',
+  name: title,
+  description,
+  step: howTo.map((step) => ({
+    '@type': 'HowToStep',
+    name: step.name,
+    text: step.text,
+  })),
+};
+
+const appSchema: WithContext<SoftwareApplication> = {
+  '@context': 'https://schema.org',
+  '@type': 'SoftwareApplication',
+  name: title,
+  description,
+  applicationCategory: 'UtilitiesApplication',
+  operatingSystem: 'Web',
+  offers: { '@type': 'Offer', price: '0', priceCurrency: 'EUR' },
+  inLanguage: 'es',
+};
+
+export const content: GlitchImageDistorterLocaleContent = {
+  slug,
+  title,
+  description,
+  faqTitle: 'Preguntas Frecuentes',
+  ui: {
+    title: 'Distorsionador Glitch',
+    description: 'Crea arte glitch en segundos.',
+    dragDropText: 'Arrastra una imagen aquí o haz clic para subir',
+    pasteHint: 'Truco: También puedes pegar una imagen con Ctrl+V',
+    exampleImageBtn: 'Usar imagen de ejemplo',
+    corruptionLabel: 'Corrupción (Separación RGB)',
+    interferenceLabel: 'Interferencia (Líneas)',
+    tremorLabel: 'Temblor',
+    pixelSortLabel: 'Pixel Sorting',
+    pixelSortDirectionLabel: 'Dirección',
+    noiseLabel: 'Ruido Estático',
+    animateBtn: 'Animación Glitch',
+    chaosBtn: 'Caos Aleatorio',
+    downloadPngBtn: 'Descargar PNG',
+    downloadGifBtn: 'Descargar GIF',
+    undoBtn: 'Deshacer',
+    redoBtn: 'Rehacer',
+    footerText: 'Crea arte digital corrupto en menos de 30 segundos',
+    faqTitle: 'FAQ',
+    bibliographyTitle: 'Referencias'
+  },
+  seo: [
+    { type: 'title', text: '¿Qué es el Arte Glitch?', level: 2 },
+    { type: 'paragraph', html: 'El <strong>arte glitch</strong> es una práctica creativa que explota intencionadamente los errores digitales, los datos corruptos y los artefactos visuales para producir resultados estéticos. A diferencia del arte tradicional, que busca la perfección, el glitch celebra la belleza inesperada del fallo tecnológico: colores fragmentados y patrones caóticos que surgen del error.' },
+    { type: 'title', text: 'Orígenes y Estética Digital', level: 3 },
+    { type: 'paragraph', html: 'Esta estética surgió a principios de los 2000, cuando artistas digitales empezaron a experimentar con archivos corruptos y fallos de hardware. Artistas como <strong>Rosa Menkman</strong> elevaron el glitch a la categoría de arte mediante la investigación de la poética de los artefactos digitales. La estética se nutre de la degradación del VHS, los errores de transmisión y el "ruido" de los sistemas digitales.' },
+    { type: 'title', text: 'Técnicas Clave de Glitch', level: 3 },
+    { type: 'list', items: [
+      '<strong>Separación RGB:</strong> Desfasar los canales rojo, verde y azul para crear aberración cromática.',
+      '<strong>Líneas de Escaneo:</strong> Simular las líneas horizontales de los antiguos monitores CRT para un toque retro.',
+      '<strong>Pixel Sorting:</strong> Ordenar píxeles por brillo y desplazarlos para crear un efecto de "derretido".',
+      '<strong>Data Moshing:</strong> Manipular datos de códecs de vídeo para mezclar fotogramas de forma inesperada.',
+      '<strong>Bit Shifting:</strong> Alterar datos binarios directamente para obtener distorsiones geométricas dramáticas.',
+    ]},
+    { type: 'tip', title: 'La Filosofía del Glitch', html: 'El arte glitch desafía la idea de la representación digital "perfecta". Al abrazar el error, cuestionamos la fiabilidad de la tecnología y exploramos cómo ésta media en nuestra percepción de la realidad. Es arte sobre el fallo del sistema y la belleza oculta en el caos.' },
+    { type: 'title', text: 'Aplicaciones Contemporáneas', level: 3 },
+    { type: 'paragraph', html: 'Hoy en día, la estética glitch está en todas partes: portadas de discos, videoclips, moda y diseño gráfico. Esta herramienta democratiza la creación de este estilo, permitiendo que cualquiera genere piezas profesionales de corrupción digital sin conocimientos técnicos profundos.' },
+    { type: 'stats', items: [
+      { value: '2000s', label: 'Aparición del arte glitch', icon: 'mdi:history' },
+      { value: '∞', label: 'Combinaciones posibles', icon: 'mdi:shuffle-variant' },
+      { value: '<30s', label: 'Tiempo de creación', icon: 'mdi:flash' },
+      { value: '3+', label: 'Formatos de exportación', icon: 'mdi:download-multiple' },
+    ], columns: 4 },
+  ],
+  faq,
+  bibliography,
+  howTo,
+  schemas: [faqSchema as any, howToSchema as any, appSchema],
+};