@jjlmoya/utils-creative 1.20.0 → 1.22.0

package/src/tool/glitch-image-distorter/component.astro

@@ -0,0 +1,393 @@
+---
+import type { GlitchImageDistorterUI } from './index';
+
+interface Props {
+  ui: GlitchImageDistorterUI;
+}
+
+const { ui } = Astro.props;
+---
+
+<div id="gid-root" class="glitch-image-distorter" data-ui={JSON.stringify(ui)}>
+  <div class="glitch-image-distorter-card">
+    <div class="glitch-image-distorter-canvas-wrapper" id="gid-canvas-wrapper">
+      <canvas id="gid-canvas" class="glitch-image-distorter-canvas"></canvas>
+      <div class="glitch-image-distorter-drop-zone" id="gid-drop-zone">
+        <svg class="glitch-image-distorter-drop-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
+        </svg>
+        <span class="glitch-image-distorter-drop-text">{ui.dragDropText}</span>
+        <span class="glitch-image-distorter-paste-hint">{ui.pasteHint}</span>
+      </div>
+      <button class="glitch-image-distorter-example-btn" id="gid-example-btn">{ui.exampleImageBtn}</button>
+      <input type="file" id="gid-file-input" accept="image/*" class="gid-file-input" hidden />
+    </div>
+
+    <div class="glitch-image-distorter-controls" id="gid-controls">
+      <div class="glitch-image-distorter-control">
+        <label class="glitch-image-distorter-label" for="gid-corruption">{ui.corruptionLabel}</label>
+        <input type="range" id="gid-corruption" class="glitch-image-distorter-slider" min="0" max="100" value="0" />
+        <span style="font-size: 0.75rem; color: var(--gid-text-dim);" id="gid-corruption-val">0</span>
+      </div>
+
+      <div class="glitch-image-distorter-control">
+        <label class="glitch-image-distorter-label" for="gid-interference">{ui.interferenceLabel}</label>
+        <input type="range" id="gid-interference" class="glitch-image-distorter-slider" min="0" max="100" value="0" />
+        <span style="font-size: 0.75rem; color: var(--gid-text-dim);" id="gid-interference-val">0</span>
+      </div>
+
+      <div class="glitch-image-distorter-control">
+        <label class="glitch-image-distorter-label" for="gid-tremor">{ui.tremorLabel}</label>
+        <input type="range" id="gid-tremor" class="glitch-image-distorter-slider" min="0" max="100" value="0" />
+        <span style="font-size: 0.75rem; color: var(--gid-text-dim);" id="gid-tremor-val">0</span>
+      </div>
+
+      <div class="glitch-image-distorter-control">
+        <label class="glitch-image-distorter-label" for="gid-pixel-sort">{ui.pixelSortLabel}</label>
+        <input type="range" id="gid-pixel-sort" class="glitch-image-distorter-slider" min="0" max="100" value="0" />
+        <span style="font-size: 0.75rem; color: var(--gid-text-dim);" id="gid-pixel-sort-val">0</span>
+      </div>
+
+      <div class="glitch-image-distorter-control">
+        <label class="glitch-image-distorter-label" for="gid-sort-direction">{ui.pixelSortDirectionLabel}</label>
+        <select id="gid-sort-direction" class="glitch-image-distorter-select">
+          <option value="none">None</option>
+          <option value="up">Up</option>
+          <option value="down">Down</option>
+          <option value="left">Left</option>
+          <option value="right">Right</option>
+        </select>
+      </div>
+
+      <div class="glitch-image-distorter-control">
+        <label class="glitch-image-distorter-label" for="gid-noise">{ui.noiseLabel}</label>
+        <input type="range" id="gid-noise" class="glitch-image-distorter-slider" min="0" max="100" value="0" />
+        <span style="font-size: 0.75rem; color: var(--gid-text-dim);" id="gid-noise-val">0</span>
+      </div>
+
+      <div class="glitch-image-distorter-control">
+        <label class="glitch-image-distorter-checkbox">
+          <input type="checkbox" id="gid-animate" />
+          <span>{ui.animateBtn}</span>
+        </label>
+      </div>
+    </div>
+
+    <div class="glitch-image-distorter-buttons">
+      <button class="glitch-image-distorter-btn" id="gid-chaos-btn">{ui.chaosBtn}</button>
+      <button class="glitch-image-distorter-btn" id="gid-undo-btn">{ui.undoBtn}</button>
+      <button class="glitch-image-distorter-btn" id="gid-redo-btn">{ui.redoBtn}</button>
+      <button class="glitch-image-distorter-btn primary" id="gid-download-png-btn">{ui.downloadPngBtn}</button>
+      <button class="glitch-image-distorter-btn primary" id="gid-download-gif-btn">{ui.downloadGifBtn}</button>
+    </div>
+  </div>
+</div>
+
+<script>
+  interface State {
+    corruption: number;
+    interference: number;
+    tremor: number;
+    pixelSort: number;
+    sortDirection: string;
+    noise: number;
+  }
+
+  class GlitchDistorter {
+    canvas: HTMLCanvasElement;
+    ctx: CanvasRenderingContext2D | null;
+    sourceImage: HTMLImageElement | null = null;
+    state: State;
+    history: State[] = [];
+    historyIdx = -1;
+
+    constructor() {
+      this.canvas = document.getElementById('gid-canvas') as HTMLCanvasElement;
+      this.ctx = this.canvas.getContext('2d');
+      this.state = { corruption: 0, interference: 0, tremor: 0, pixelSort: 0, sortDirection: 'none', noise: 0 };
+    }
+
+    loadExampleImage() {
+      const svg = `<svg width="400" height="300" xmlns="http://www.w3.org/2000/svg"><defs><linearGradient id="g" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" style="stop-color:rgb(255,0,0)"/><stop offset="50%" style="stop-color:rgb(0,255,0)"/><stop offset="100%" style="stop-color:rgb(0,0,255)"/></linearGradient></defs><rect width="400" height="300" fill="url(#g)"/><circle cx="100" cy="100" r="50" fill="rgba(255,255,255,0.5)"/><text x="200" y="150" font-size="40" fill="white" text-anchor="middle" font-weight="bold">GLITCH</text></svg>`;
+      const blob = new Blob([svg], { type: 'image/svg+xml' });
+      const img = new Image();
+      img.onload = () => {
+        this.sourceImage = img;
+        this.canvas.width = img.width;
+        this.canvas.height = img.height;
+        this.applyDefaultGlitch();
+        this.updateDropZone();
+        URL.revokeObjectURL(img.src);
+      };
+      img.src = URL.createObjectURL(blob);
+    }
+
+    loadImage(file: File) {
+      const reader = new FileReader();
+      reader.onload = (e) => {
+        const img = new Image();
+        img.onload = () => {
+          this.sourceImage = img;
+          this.canvas.width = img.width;
+          this.canvas.height = img.height;
+          this.applyDefaultGlitch();
+          this.updateDropZone();
+        };
+        img.src = e.target?.result as string;
+      };
+      reader.readAsDataURL(file);
+    }
+
+    applyDefaultGlitch() {
+      this.state = { corruption: 40, interference: 50, tremor: 30, pixelSort: 35, sortDirection: 'down', noise: 25 };
+      this.updateSliders();
+      this.saveState();
+      this.render();
+    }
+
+    updateDropZone() {
+      const zone = document.getElementById('gid-drop-zone') as HTMLElement;
+      zone.classList.toggle('hidden', !!this.sourceImage);
+    }
+
+    render() {
+      if (!this.ctx || !this.sourceImage) return;
+      this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
+      this.ctx.drawImage(this.sourceImage, 0, 0);
+      const img = this.ctx.getImageData(0, 0, this.canvas.width, this.canvas.height);
+      if (this.state.corruption > 0) this.applyRGBSplit(img.data, this.state.corruption);
+      if (this.state.interference > 0) this.applyScanlines(img.data, this.state.interference, this.state.tremor);
+      if (this.state.noise > 0) this.applyNoise(img.data, this.state.noise);
+      this.ctx.putImageData(img, 0, 0);
+      if (this.state.pixelSort > 0 && this.state.sortDirection !== 'none') {
+        this.applyPixelSort(this.state.pixelSort, this.state.sortDirection);
+      }
+    }
+
+    applyRGBSplit(data: Uint8ClampedArray, intensity: number) {
+      const offset = Math.floor((intensity / 100) * 20);
+      for (let i = 0; i < data.length; i += 4) {
+        if (Math.random() < intensity / 100) {
+          const tmp = data[i] ?? 0;
+          data[i] = data[i + 2] ?? 0;
+          data[i + 2] = tmp;
+          if (offset > 0 && i + offset * 4 + 1 < data.length) {
+            data[i + 1] = data[i + offset * 4 + 1] ?? 0;
+          }
+        }
+      }
+    }
+
+    applyScanlines(data: Uint8ClampedArray, freq: number, tremor: number) {
+      const spacing = Math.max(1, Math.floor((100 - freq) / 10));
+      const w = this.canvas.width;
+      for (let y = 0; y < this.canvas.height; y += spacing) {
+        const off = Math.floor(y * w * 4);
+        for (let x = 0; x < w; x++) {
+          const idx = off + x * 4;
+          if (idx + 2 < data.length) {
+            const tint = 0.8 + Math.random() * 0.2 * (tremor / 100);
+            data[idx] = Math.floor((data[idx] ?? 0) * tint);
+            data[idx + 1] = Math.floor((data[idx + 1] ?? 0) * tint);
+            data[idx + 2] = Math.floor((data[idx + 2] ?? 0) * tint);
+          }
+        }
+      }
+    }
+
+    applyNoise(data: Uint8ClampedArray, intensity: number) {
+      for (let i = 0; i < data.length; i += 4) {
+        if (Math.random() < intensity / 100 && i + 3 < data.length) {
+          const n = Math.random() * 255;
+          data[i] = Math.floor((data[i] ?? 0) * 0.7 + n * 0.3);
+          data[i + 1] = Math.floor((data[i + 1] ?? 0) * 0.7 + n * 0.3);
+          data[i + 2] = Math.floor((data[i + 2] ?? 0) * 0.7 + n * 0.3);
+          data[i + 3] = Math.floor((intensity / 100) * 255);
+        }
+      }
+    }
+
+    applyPixelSort(intensity: number, dir: string) {
+      if (!this.ctx) return;
+      const cd = this.ctx.getImageData(0, 0, this.canvas.width, this.canvas.height);
+      const cfg = { th: (intensity / 100) * 255, sh: Math.floor((intensity / 100) * 30), w: this.canvas.width, h: this.canvas.height, dir };
+      const v = dir === 'up' || dir === 'down';
+      const max = v ? cfg.w : cfg.h;
+      for (let i = 0; i < max; i++) {
+        this.sortLine(cd.data, i, v, cfg);
+      }
+      this.ctx.putImageData(cd, 0, 0);
+    }
+
+    sortLine(d: Uint8ClampedArray, ln: number, v: boolean, cfg: { th: number; sh: number; w: number; h: number; dir: string }) {
+      const idx: number[] = [];
+      const max = v ? cfg.h : cfg.w;
+      for (let j = 0; j < max; j++) {
+        const p = (v ? j * cfg.w + ln : ln * cfg.w + j) * 4;
+        if (p + 2 < d.length && this.isBright(d, p, cfg.th)) idx.push(p);
+      }
+      if (cfg.dir === 'down' || cfg.dir === 'left') idx.reverse();
+      const o = this.getOffset(v, cfg.sh, cfg.w, cfg.dir);
+      this.movePixels(d, idx, o);
+    }
+
+    getOffset(v: boolean, sh: number, w: number, dir: string): number {
+      if (v) return sh * w * 4;
+      return dir === 'right' ? sh * 4 : -sh * 4;
+    }
+
+    isBright(d: Uint8ClampedArray, p: number, th: number): boolean {
+      return ((d[p] ?? 0) + (d[p + 1] ?? 0) + (d[p + 2] ?? 0)) / 3 > th;
+    }
+
+    movePixels(d: Uint8ClampedArray, idx: number[], off: number) {
+      for (const i of idx) {
+        const t = i + off;
+        if (t >= 0 && t + 3 < d.length && i + 3 < d.length) {
+          for (let j = 0; j < 4; j++) d[t + j] = d[i + j] ?? 0;
+        }
+      }
+    }
+
+    saveState() {
+      this.history = this.history.slice(0, this.historyIdx + 1);
+      this.history.push({ ...this.state });
+      this.historyIdx++;
+      if (this.history.length > 20) {
+        this.history.shift();
+        this.historyIdx--;
+      }
+    }
+
+    undo() {
+      if (this.historyIdx > 0) {
+        this.historyIdx--;
+        this.state = { ...this.history[this.historyIdx] };
+        this.updateSliders();
+        this.render();
+      }
+    }
+
+    redo() {
+      if (this.historyIdx < this.history.length - 1) {
+        this.historyIdx++;
+        this.state = { ...this.history[this.historyIdx] };
+        this.updateSliders();
+        this.render();
+      }
+    }
+
+    updateSliders() {
+      (document.getElementById('gid-corruption') as HTMLInputElement).value = String(this.state.corruption);
+      (document.getElementById('gid-interference') as HTMLInputElement).value = String(this.state.interference);
+      (document.getElementById('gid-tremor') as HTMLInputElement).value = String(this.state.tremor);
+      (document.getElementById('gid-pixel-sort') as HTMLInputElement).value = String(this.state.pixelSort);
+      (document.getElementById('gid-sort-direction') as HTMLSelectElement).value = this.state.sortDirection;
+      (document.getElementById('gid-noise') as HTMLInputElement).value = String(this.state.noise);
+      this.updateValueDisplays();
+    }
+
+    updateValueDisplays() {
+      (document.getElementById('gid-corruption-val') as HTMLElement).textContent = String(this.state.corruption);
+      (document.getElementById('gid-interference-val') as HTMLElement).textContent = String(this.state.interference);
+      (document.getElementById('gid-tremor-val') as HTMLElement).textContent = String(this.state.tremor);
+      (document.getElementById('gid-pixel-sort-val') as HTMLElement).textContent = String(this.state.pixelSort);
+      (document.getElementById('gid-noise-val') as HTMLElement).textContent = String(this.state.noise);
+    }
+
+    randomizeSettings() {
+      const dirs = ['none', 'up', 'down', 'left', 'right'];
+      this.state = {
+        corruption: Math.floor(Math.random() * 100),
+        interference: Math.floor(Math.random() * 100),
+        tremor: Math.floor(Math.random() * 100),
+        pixelSort: Math.floor(Math.random() * 100),
+        sortDirection: dirs[Math.floor(Math.random() * dirs.length)] ?? 'none',
+        noise: Math.floor(Math.random() * 100),
+      };
+      this.updateSliders();
+      this.saveState();
+      this.render();
+    }
+
+    downloadPNG() {
+      const link = document.createElement('a');
+      link.href = this.canvas.toDataURL('image/png');
+      link.download = 'glitch-art.png';
+      link.click();
+    }
+
+    downloadGIF() {
+      alert('GIF export coming soon. Use PNG export or screen recording.');
+    }
+
+    setupInputs() {
+      const w = document.getElementById('gid-canvas-wrapper');
+      const fi = document.getElementById('gid-file-input') as HTMLInputElement;
+      const eb = document.getElementById('gid-example-btn') as HTMLButtonElement;
+      w?.addEventListener('click', () => fi.click());
+      w?.addEventListener('dragover', (e) => e.preventDefault());
+      w?.addEventListener('drop', (e) => {
+        e.preventDefault();
+        const f = (e as DragEvent).dataTransfer?.files?.[0];
+        if (f) this.loadImage(f);
+      });
+      fi.addEventListener('change', (e) => {
+        const f = (e.target as HTMLInputElement).files?.[0];
+        if (f) this.loadImage(f);
+      });
+      eb.addEventListener('click', (e) => {
+        e.stopPropagation();
+        this.loadExampleImage();
+      });
+      document.addEventListener('paste', (e) => {
+        for (let i = 0; i < (e.clipboardData?.items.length ?? 0); i++) {
+          const item = e.clipboardData?.items[i];
+          if (item?.type.includes('image')) {
+            const f = item.getAsFile();
+            if (f) this.loadImage(f);
+          }
+        }
+      });
+    }
+
+    setupSliders() {
+      const sliders: { id: string; key: keyof State }[] = [
+        { id: 'gid-corruption', key: 'corruption' },
+        { id: 'gid-interference', key: 'interference' },
+        { id: 'gid-tremor', key: 'tremor' },
+        { id: 'gid-pixel-sort', key: 'pixelSort' },
+        { id: 'gid-noise', key: 'noise' },
+      ];
+      sliders.forEach(({ id, key }) => {
+        document.getElementById(id)?.addEventListener('input', (e) => {
+          (this.state[key] as number) = Number((e.target as HTMLInputElement).value);
+          this.updateValueDisplays();
+          this.render();
+        });
+      });
+      document.getElementById('gid-sort-direction')?.addEventListener('change', (e) => {
+        this.state.sortDirection = (e.target as HTMLSelectElement).value;
+        this.render();
+      });
+    }
+
+    setupButtons() {
+      document.getElementById('gid-chaos-btn')?.addEventListener('click', () => this.randomizeSettings());
+      document.getElementById('gid-undo-btn')?.addEventListener('click', () => this.undo());
+      document.getElementById('gid-redo-btn')?.addEventListener('click', () => this.redo());
+      document.getElementById('gid-download-png-btn')?.addEventListener('click', () => this.downloadPNG());
+      document.getElementById('gid-download-gif-btn')?.addEventListener('click', () => this.downloadGIF());
+    }
+
+    init() {
+      this.setupInputs();
+      this.setupSliders();
+      this.setupButtons();
+    }
+  }
+
+  const d = new GlitchDistorter();
+  d.init();
+  document.addEventListener('astro:page-load', () => new GlitchDistorter().init());
+</script>

package/src/tool/glitch-image-distorter/entry.ts

@@ -0,0 +1,48 @@
+import type { CreativeToolEntry, ToolLocaleContent } from '../../types';
+
+export interface GlitchImageDistorterUI {
+  [key: string]: string;
+  title: string;
+  description: string;
+  dragDropText: string;
+  pasteHint: string;
+  exampleImageBtn: string;
+  corruptionLabel: string;
+  interferenceLabel: string;
+  tremorLabel: string;
+  pixelSortLabel: string;
+  pixelSortDirectionLabel: string;
+  noiseLabel: string;
+  animateBtn: string;
+  chaosBtn: string;
+  downloadPngBtn: string;
+  downloadGifBtn: string;
+  undoBtn: string;
+  redoBtn: string;
+  footerText: string;
+  faqTitle: string;
+}
+
+export type GlitchImageDistorterLocaleContent = ToolLocaleContent<GlitchImageDistorterUI>;
+
+export const glitchImageDistorter: CreativeToolEntry<GlitchImageDistorterUI> = {
+  id: 'glitch-image-distorter',
+  icons: { bg: 'mdi:image-broken-variant', fg: 'mdi:flash-outline' },
+  i18n: {
+    de: () => import('./i18n/de').then((m) => m.content),
+    en: () => import('./i18n/en').then((m) => m.content),
+    es: () => import('./i18n/es').then((m) => m.content),
+    fr: () => import('./i18n/fr').then((m) => m.content),
+    id: () => import('./i18n/id').then((m) => m.content),
+    it: () => import('./i18n/it').then((m) => m.content),
+    ja: () => import('./i18n/ja').then((m) => m.content),
+    ko: () => import('./i18n/ko').then((m) => m.content),
+    nl: () => import('./i18n/nl').then((m) => m.content),
+    pl: () => import('./i18n/pl').then((m) => m.content),
+    pt: () => import('./i18n/pt').then((m) => m.content),
+    ru: () => import('./i18n/ru').then((m) => m.content),
+    sv: () => import('./i18n/sv').then((m) => m.content),
+    tr: () => import('./i18n/tr').then((m) => m.content),
+    zh: () => import('./i18n/zh').then((m) => m.content),
+  },
+};

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);
+}