Adding the first glitch gallery

2026-03-24 11:30:14 +01:00
commit 137d1a8191
24 changed files with 1572 additions and 0 deletions
@@ -0,0 +1,59 @@
+export interface GlitchComponentConfig {
+  id: string
+  name: string
+  version: string
+  params: Record<string, unknown>
+}
+
+export interface GlitchHostBridge {
+  playSound?: (id: string, payload?: Record<string, unknown>) => void
+  stopSound?: (id: string, payload?: Record<string, unknown>) => void
+  emit?: (type: string, payload?: unknown) => void
+}
+
+export interface GlitchTheme {
+  primary: string
+  accent: string
+  bg: string
+  bgSecondary: string
+  text: string
+  textMuted: string
+  border: string
+}
+
+export interface GlitchComponentResult {
+  success: boolean
+  score?: number
+  data?: unknown
+  error?: string
+}
+
+export interface GlitchComponentProps {
+  config: GlitchComponentConfig
+  onComplete: (result: GlitchComponentResult) => void
+  onProgress?: (percent: number) => void
+  theme?: GlitchTheme
+  className?: string
+  host?: GlitchHostBridge
+}
+
+export interface ParamSchema {
+  [key: string]: {
+    type: 'number' | 'string' | 'boolean' | 'color' | 'select' | 'range'
+    label?: string
+    description?: string
+    default: unknown
+    options?: { value: string | number; label: string }[]
+    min?: number
+    max?: number
+    step?: number
+  }
+}
+
+export interface GlitchComponentMetadata {
+  name: string
+  displayName: string
+  version: string
+  paramSchema: ParamSchema
+  defaultParams: Record<string, unknown>
+}
@@ -0,0 +1,47 @@
+:root {
+  --color-bg: #0a0a0f;
+  --color-bg-secondary: #12121a;
+  --color-text: #e8e8ec;
+  --color-text-muted: #9999a8;
+  --color-primary: #6366f1;
+  --color-primary-hover: #818cf8;
+  --color-accent: #22d3ee;
+  --color-accent-secondary: #a855f7;
+  --color-border: #2a2a3a;
+  --font-main: "Iceland", -apple-system, BlinkMacSystemFont, sans-serif;
+  --font-display: "Russo One", -apple-system, BlinkMacSystemFont, sans-serif;
+  --font-mono: "JetBrains Mono", "Iceland", monospace;
+  --small-font: 1.875rem;
+  --spacing-xs: 0.5rem;
+  --spacing-sm: 1rem;
+  --spacing-md: 2rem;
+  --spacing-lg: 4rem;
+  --spacing-xl: 6rem;
+  --max-width: 1200px;
+  --border-radius: 12px;
+  --border-radius-sm: 8px;
+  --transition: 0.2s ease;
+}
+
+html,
+body,
+#root {
+  width: 100%;
+  min-height: 100%;
+}
+
+body {
+  margin: 0;
+  background:
+    radial-gradient(circle at top, rgb(99 102 241 / 18%), transparent 36%),
+    linear-gradient(180deg, #080810, #0d1018);
+  color: var(--color-text);
+  font-family: var(--font-main);
+}
+
+button,
+input,
+select,
+textarea {
+  font: inherit;
+}