@gigo-ui/components 1.0.0

package/dist/components/chaos/ColorPickerWrong.svelte

@@ -0,0 +1,141 @@
+<script lang="ts">
+	import { cn } from '../../utils/cn.js';
+
+	let {
+		value = $bindable('#e040fb'),
+		offsetHue = true,
+		swapChannels = true,
+		delayUpdate = true,
+		class: className,
+		...restProps
+	}: {
+		value?: string;
+		offsetHue?: boolean;
+		swapChannels?: boolean;
+		delayUpdate?: boolean;
+		class?: string;
+		[key: string]: unknown;
+	} = $props();
+
+	let pickerValue = $state('#e040fb');
+	let displayColor = $state('#e040fb');
+	let actualColor = $state('#e040fb');
+	let labelLie = $state('');
+
+	const COLOR_NAMES: Record<string, string> = {
+		red: 'Definitely Blue', blue: 'Clearly Red', green: 'Obviously Purple',
+		yellow: 'Totally Black', black: 'Pure White', white: 'Deep Black',
+		pink: 'Forest Green', orange: 'Ocean Blue', purple: 'Grass Green',
+		cyan: 'Warm Orange', magenta: 'Cool Teal', lime: 'Hot Pink',
+	};
+
+	function hexToRgb(hex: string): [number, number, number] {
+		const h = hex.replace('#', '');
+		return [
+			parseInt(h.substring(0, 2), 16),
+			parseInt(h.substring(2, 4), 16),
+			parseInt(h.substring(4, 6), 16),
+		];
+	}
+
+	function rgbToHex(r: number, g: number, b: number): string {
+		return '#' + [r, g, b].map(c => Math.max(0, Math.min(255, Math.round(c))).toString(16).padStart(2, '0')).join('');
+	}
+
+	function corruptColor(hex: string): string {
+		let [r, g, b] = hexToRgb(hex);
+
+		if (swapChannels) {
+			[r, g, b] = [b, r, g];
+		}
+
+		if (offsetHue) {
+			r = (r + 128) % 256;
+			g = (g + 64) % 256;
+			b = (b + 192) % 256;
+		}
+
+		return rgbToHex(r, g, b);
+	}
+
+	function getClosestColorName(hex: string): string {
+		const [r, g, b] = hexToRgb(hex);
+		const names = Object.keys(COLOR_NAMES);
+		const hue = Math.atan2(Math.sqrt(3) * (g - b), 2 * r - g - b) * 180 / Math.PI;
+		const idx = Math.abs(Math.round(hue / 30)) % names.length;
+		return COLOR_NAMES[names[idx]] || 'Unknown Color';
+	}
+
+	function handlePick(e: Event) {
+		const raw = (e.target as HTMLInputElement).value;
+		pickerValue = raw;
+
+		const corrupted = corruptColor(raw);
+
+		if (delayUpdate) {
+			setTimeout(() => {
+				displayColor = corrupted;
+				actualColor = raw;
+				value = corrupted;
+				labelLie = getClosestColorName(raw);
+			}, 300 + Math.random() * 500);
+		} else {
+			displayColor = corrupted;
+			actualColor = raw;
+			value = corrupted;
+			labelLie = getClosestColorName(raw);
+		}
+	}
+</script>
+
+<div class={cn('space-y-4 max-w-xs', className)} {...restProps}>
+	<div class="flex items-center justify-between">
+		<span class="text-xs font-mono text-(--muted-foreground)">Pick a color</span>
+		{#if labelLie}
+			<span class="text-xs font-mono text-gigo-cyan">{labelLie}</span>
+		{/if}
+	</div>
+
+	<div class="flex items-center gap-4">
+		<input
+			type="color"
+			value={pickerValue}
+			oninput={handlePick}
+			class="w-16 h-16 rounded-xl border border-(--border) cursor-pointer bg-transparent
+				[&::-webkit-color-swatch-wrapper]:p-1 [&::-webkit-color-swatch]:rounded-lg [&::-webkit-color-swatch]:border-none
+				[&::-moz-color-swatch]:rounded-lg [&::-moz-color-swatch]:border-none"
+		/>
+
+		<div class="flex-1 space-y-2">
+			<div class="flex items-center gap-2">
+				<div class="w-8 h-8 rounded-lg border border-(--border)" style:background={actualColor}></div>
+				<span class="text-[10px] font-mono text-(--muted-foreground)">You picked</span>
+				<span class="font-mono text-xs">{actualColor}</span>
+			</div>
+			<div class="flex items-center gap-2">
+				<div class="w-8 h-8 rounded-lg border border-(--border)" style:background={displayColor}></div>
+				<span class="text-[10px] font-mono text-(--muted-foreground)">You get</span>
+				<span class="font-mono text-xs text-gigo-magenta">{displayColor}</span>
+			</div>
+		</div>
+	</div>
+
+	<div
+		class="h-20 w-full rounded-xl border border-(--border) transition-colors duration-500"
+		style:background={displayColor}
+	>
+		<div class="flex h-full items-center justify-center">
+			<span
+				class="text-sm font-mono font-bold px-3 py-1 rounded-lg"
+				style:background="rgba(0,0,0,0.5)"
+				style:color="white"
+			>
+				{displayColor}
+			</span>
+		</div>
+	</div>
+
+	<p class="text-[10px] font-mono text-(--muted-foreground) text-center">
+		Every color you pick gets channel-swapped and hue-shifted. Good luck matching anything.
+	</p>
+</div>

package/dist/components/chaos/ColorPickerWrong.svelte.d.ts

@@ -0,0 +1,11 @@
+type $$ComponentProps = {
+    value?: string;
+    offsetHue?: boolean;
+    swapChannels?: boolean;
+    delayUpdate?: boolean;
+    class?: string;
+    [key: string]: unknown;
+};
+declare const ColorPickerWrong: import("svelte").Component<$$ComponentProps, {}, "value">;
+type ColorPickerWrong = ReturnType<typeof ColorPickerWrong>;
+export default ColorPickerWrong;

package/dist/components/chaos/DropdownCalc.svelte

@@ -0,0 +1,195 @@
+<script lang="ts">
+	import { cn } from '../../utils/cn.js';
+
+	let {
+		value = $bindable(''),
+		class: className,
+		...restProps
+	}: {
+		value?: string;
+		class?: string;
+		[key: string]: unknown;
+	} = $props();
+
+	let expression = $state<string[]>([]);
+	let result = $state<string>('');
+	let showResult = $state(false);
+
+	const DIGIT_OPTIONS = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9'];
+	const OPERATOR_OPTIONS = ['+', '-', '×', '÷'];
+	const DECIMAL_OPTIONS = ['.'];
+
+	let digitDropdowns = $state<(string | null)[]>([null, null, null, null, null, null, null, null]);
+	let operatorDropdown = $state<string | null>(null);
+
+	function addDigit(index: number, val: string) {
+		digitDropdowns = digitDropdowns.map((d, i) => i === index ? val : d);
+		rebuildExpression();
+	}
+
+	function setOperator(val: string) {
+		operatorDropdown = val;
+		rebuildExpression();
+	}
+
+	function rebuildExpression() {
+		const parts: string[] = [];
+		// First number
+		const num1Digits = digitDropdowns.slice(0, 4).filter(d => d !== null);
+		if (num1Digits.length) parts.push(num1Digits.join(''));
+
+		// Operator
+		if (operatorDropdown) parts.push(operatorDropdown);
+
+		// Second number
+		const num2Digits = digitDropdowns.slice(4, 8).filter(d => d !== null);
+		if (num2Digits.length) parts.push(num2Digits.join(''));
+
+		expression = parts;
+		value = parts.join(' ');
+		showResult = false;
+	}
+
+	function calculate() {
+		const num1Str = digitDropdowns.slice(0, 4).filter(d => d !== null).join('');
+		const num2Str = digitDropdowns.slice(4, 8).filter(d => d !== null).join('');
+		const num1 = parseFloat(num1Str);
+		const num2 = parseFloat(num2Str);
+
+		if (isNaN(num1) || isNaN(num2) || !operatorDropdown) {
+			result = 'ERR: Incomplete';
+			showResult = true;
+			return;
+		}
+
+		let res: number;
+		switch (operatorDropdown) {
+			case '+': res = num1 + num2; break;
+			case '-': res = num1 - num2; break;
+			case '×': res = num1 * num2; break;
+			case '÷': res = num2 === 0 ? NaN : num1 / num2; break;
+			default: res = NaN;
+		}
+
+		result = isNaN(res) ? 'ERR: ÷ by 0' : String(Math.round(res * 10000) / 10000);
+		showResult = true;
+		value = `${num1} ${operatorDropdown} ${num2} = ${result}`;
+	}
+
+	function clearAll() {
+		digitDropdowns = [null, null, null, null, null, null, null, null];
+		operatorDropdown = null;
+		expression = [];
+		result = '';
+		showResult = false;
+		value = '';
+	}
+</script>
+
+<div class={cn('space-y-4 max-w-lg', className)} {...restProps}>
+	<!-- Display -->
+	<div class="rounded-xl border border-(--border) bg-(--secondary) px-4 py-3">
+		<div class="font-mono text-right text-sm text-(--muted-foreground) min-h-[1.2em]">
+			{expression.join(' ') || '_ ? _ = ?'}
+		</div>
+		{#if showResult}
+			<div class="font-mono text-right text-2xl font-bold mt-1"
+				style:color={result.startsWith('ERR') ? '#ff1744' : '#76ff03'}>
+				{result}
+			</div>
+		{/if}
+	</div>
+
+	<!-- Dropdown rows -->
+	<div class="space-y-3">
+		<!-- First number label -->
+		<div class="text-[10px] font-mono text-(--muted-foreground) uppercase tracking-wider">First Number (select each digit)</div>
+
+		<div class="flex gap-2 flex-wrap">
+			{#each [0, 1, 2, 3] as i}
+				<div class="flex flex-col items-center gap-1">
+					<span class="text-[9px] font-mono text-(--muted-foreground)">
+						{i === 0 ? 'Thou.' : i === 1 ? 'Hund.' : i === 2 ? 'Tens' : 'Ones'}
+					</span>
+					<select
+						class="w-16 h-9 rounded-lg border border-(--border) bg-(--card) text-center font-mono text-sm
+							text-(--foreground) cursor-pointer appearance-none
+							focus:outline-none focus:border-gigo-magenta focus:ring-1 focus:ring-gigo-magenta/30"
+						value={digitDropdowns[i] ?? ''}
+						onchange={(e) => addDigit(i, (e.target as HTMLSelectElement).value)}
+					>
+						<option value="" disabled selected>—</option>
+						{#each DIGIT_OPTIONS as d}
+							<option value={d}>{d}</option>
+						{/each}
+					</select>
+				</div>
+			{/each}
+		</div>
+
+		<!-- Operator -->
+		<div class="text-[10px] font-mono text-(--muted-foreground) uppercase tracking-wider">Operator</div>
+
+		<select
+			class="w-20 h-9 rounded-lg border border-(--border) bg-(--card) text-center font-mono text-lg
+				text-gigo-magenta cursor-pointer appearance-none
+				focus:outline-none focus:border-gigo-magenta focus:ring-1 focus:ring-gigo-magenta/30"
+			value={operatorDropdown ?? ''}
+			onchange={(e) => setOperator((e.target as HTMLSelectElement).value)}
+		>
+			<option value="" disabled selected>?</option>
+			{#each OPERATOR_OPTIONS as op}
+				<option value={op}>{op}</option>
+			{/each}
+		</select>
+
+		<!-- Second number -->
+		<div class="text-[10px] font-mono text-(--muted-foreground) uppercase tracking-wider">Second Number (select each digit)</div>
+
+		<div class="flex gap-2 flex-wrap">
+			{#each [4, 5, 6, 7] as i}
+				<div class="flex flex-col items-center gap-1">
+					<span class="text-[9px] font-mono text-(--muted-foreground)">
+						{i === 4 ? 'Thou.' : i === 5 ? 'Hund.' : i === 6 ? 'Tens' : 'Ones'}
+					</span>
+					<select
+						class="w-16 h-9 rounded-lg border border-(--border) bg-(--card) text-center font-mono text-sm
+							text-(--foreground) cursor-pointer appearance-none
+							focus:outline-none focus:border-gigo-magenta focus:ring-1 focus:ring-gigo-magenta/30"
+						value={digitDropdowns[i] ?? ''}
+						onchange={(e) => addDigit(i, (e.target as HTMLSelectElement).value)}
+					>
+						<option value="" disabled selected>—</option>
+						{#each DIGIT_OPTIONS as d}
+							<option value={d}>{d}</option>
+						{/each}
+					</select>
+				</div>
+			{/each}
+		</div>
+	</div>
+
+	<!-- Action buttons -->
+	<div class="flex gap-3">
+		<button
+			class="flex-1 px-4 py-2.5 rounded-xl font-mono text-sm font-bold
+				bg-gigo-magenta/15 border border-gigo-magenta/50 text-gigo-magenta
+				hover:bg-gigo-magenta/25 transition-colors cursor-pointer"
+			onclick={calculate}
+		>
+			= Calculate
+		</button>
+		<button
+			class="px-4 py-2.5 rounded-xl font-mono text-sm
+				bg-(--secondary) border border-(--border) text-(--muted-foreground)
+				hover:text-gigo-red hover:border-gigo-red/30 transition-colors cursor-pointer"
+			onclick={clearAll}
+		>
+			Clear
+		</button>
+	</div>
+
+	<p class="text-[10px] font-mono text-(--muted-foreground) text-center">
+		Every. Single. Digit. Is. A. Dropdown. You're welcome.
+	</p>
+</div>

package/dist/components/chaos/DropdownCalc.svelte.d.ts

@@ -0,0 +1,8 @@
+type $$ComponentProps = {
+    value?: string;
+    class?: string;
+    [key: string]: unknown;
+};
+declare const DropdownCalc: import("svelte").Component<$$ComponentProps, {}, "value">;
+type DropdownCalc = ReturnType<typeof DropdownCalc>;
+export default DropdownCalc;

package/dist/components/chaos/GhostCard.svelte

@@ -0,0 +1,157 @@
+<script lang="ts">
+	import { cn } from '../../utils/cn.js';
+
+	let {
+		title = 'Ghost Card',
+		description = '',
+		children,
+		disappearMinMs = 2000,
+		disappearMaxMs = 5000,
+		glitchChance = 0.6,
+		class: className,
+		...restProps
+	}: {
+		title?: string;
+		description?: string;
+		children?: import('svelte').Snippet;
+		disappearMinMs?: number;
+		disappearMaxMs?: number;
+		glitchChance?: number;
+		class?: string;
+		[key: string]: unknown;
+	} = $props();
+
+	let visible = $state(true);
+	let glitching = $state(false);
+	let offsetX = $state(0);
+	let offsetY = $state(0);
+	let rotation = $state(0);
+	let scaleX = $state(1);
+	let clipPath = $state('none');
+	let hueShift = $state(0);
+	let containerEl: HTMLDivElement | undefined = $state();
+
+	let glitchContentOpacity = $state(1);
+	let glitchTitleStrike = $state(false);
+	let glitchTitleText = $state('');
+	let glitchScanlineTop = $state(50);
+
+	const GLITCH_CLIPS = [
+		'polygon(0 0, 100% 0, 100% 45%, 0 45%)',
+		'polygon(0 55%, 100% 55%, 100% 100%, 0 100%)',
+		'polygon(0 0, 60% 0, 60% 100%, 0 100%)',
+		'polygon(20% 10%, 80% 10%, 80% 90%, 20% 90%)',
+		'inset(10% 0 10% 0)',
+		'polygon(0 0, 100% 0, 100% 30%, 70% 30%, 70% 70%, 100% 70%, 100% 100%, 0 100%)',
+	];
+
+	function corruptTitle(text: string): string {
+		return text.split('').map(c =>
+			Math.random() > 0.7 ? String.fromCharCode(c.charCodeAt(0) + Math.floor(Math.random() * 5)) : c
+		).join('');
+	}
+
+	$effect(() => {
+		const disappear = () => {
+			const nextDisappear = disappearMinMs + Math.random() * (disappearMaxMs - disappearMinMs);
+
+			const timer = setTimeout(() => {
+				visible = false;
+
+				const reappearDelay = 500 + Math.random() * 2000;
+				setTimeout(() => {
+					offsetX = (Math.random() - 0.5) * 60;
+					offsetY = (Math.random() - 0.5) * 40;
+					rotation = (Math.random() - 0.5) * 12;
+
+					if (Math.random() < glitchChance) {
+						glitching = true;
+						scaleX = Math.random() > 0.5 ? -1 : 1;
+						clipPath = Math.random() > 0.3 ? GLITCH_CLIPS[Math.floor(Math.random() * GLITCH_CLIPS.length)] : 'none';
+						hueShift = Math.random() * 360;
+						glitchContentOpacity = Math.random() > 0.5 ? 0.6 : 1;
+						glitchTitleStrike = Math.random() > 0.5;
+						glitchTitleText = Math.random() > 0.6 ? corruptTitle(title) : '';
+						glitchScanlineTop = Math.random() * 100;
+
+						setTimeout(() => {
+							glitching = false;
+							scaleX = 1;
+							clipPath = 'none';
+							hueShift = 0;
+							glitchContentOpacity = 1;
+							glitchTitleStrike = false;
+							glitchTitleText = '';
+						}, 800 + Math.random() * 1500);
+					}
+
+					visible = true;
+					disappear();
+				}, reappearDelay);
+			}, nextDisappear);
+
+			return timer;
+		};
+
+		const t = disappear();
+		return () => clearTimeout(t);
+	});
+</script>
+
+<div
+	class="relative"
+	bind:this={containerEl}
+>
+	<div
+		class={cn(
+			'relative rounded-2xl border bg-(--card) p-6 transition-all duration-500',
+			visible ? 'opacity-100' : 'opacity-0 scale-75',
+			glitching ? 'border-gigo-red/50' : 'border-(--border)',
+			className
+		)}
+		style:transform="translate({offsetX}px, {offsetY}px) rotate({rotation}deg) scaleX({scaleX})"
+		style:clip-path={clipPath}
+		style:filter="hue-rotate({hueShift}deg)"
+		style:transition="opacity 0.3s, transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1), clip-path 0.2s, filter 0.3s"
+		{...restProps}
+	>
+		{#if glitching}
+			<div class="absolute inset-0 pointer-events-none overflow-hidden rounded-2xl z-10">
+				<div class="absolute inset-0 bg-gigo-red/5"></div>
+				<div
+					class="absolute w-full h-0.5 bg-gigo-cyan/30"
+					style:top="{glitchScanlineTop}%"
+					style:animation="gigo-shimmer 0.5s linear infinite"
+				></div>
+			</div>
+		{/if}
+
+		<div class="relative z-0" style:opacity={glitchContentOpacity}>
+			{#if title}
+				<h3 class="text-lg font-semibold text-(--foreground)" class:line-through={glitchTitleStrike}>
+					{glitchTitleText || title}
+				</h3>
+			{/if}
+			{#if description}
+				<p class="mt-2 text-sm text-(--muted-foreground)">{description}</p>
+			{/if}
+			{#if children}
+				<div class="mt-4">
+					{@render children()}
+				</div>
+			{/if}
+		</div>
+
+		<!-- Ghost status indicator -->
+		<div class="absolute top-3 right-3 flex items-center gap-1.5">
+			<div
+				class="w-2 h-2 rounded-full transition-colors duration-300"
+				style:background={glitching ? '#ff1744' : visible ? '#76ff03' : '#7a7a8e'}
+				style:box-shadow={glitching ? '0 0 8px rgba(255, 23, 68, 0.6)' : 'none'}
+			></div>
+			<span class="text-[10px] font-mono text-(--muted-foreground)">
+				{glitching ? 'CORRUPT' : visible ? 'STABLE' : 'GONE'}
+			</span>
+		</div>
+	</div>
+</div>

package/dist/components/chaos/GhostCard.svelte.d.ts

@@ -0,0 +1,13 @@
+type $$ComponentProps = {
+    title?: string;
+    description?: string;
+    children?: import('svelte').Snippet;
+    disappearMinMs?: number;
+    disappearMaxMs?: number;
+    glitchChance?: number;
+    class?: string;
+    [key: string]: unknown;
+};
+declare const GhostCard: import("svelte").Component<$$ComponentProps, {}, "">;
+type GhostCard = ReturnType<typeof GhostCard>;
+export default GhostCard;

package/dist/components/chaos/GravityInput.svelte

@@ -0,0 +1,161 @@
+<script lang="ts">
+	import { cn } from '../../utils/cn.js';
+
+	let {
+		value = $bindable(''),
+		placeholder = 'Catch the digits...',
+		spawnInterval = 400,
+		maxFalling = 15,
+		characters = '0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ@.!?#$%',
+		arenaHeight = 224,
+		class: className,
+		...restProps
+	}: {
+		value?: string;
+		placeholder?: string;
+		spawnInterval?: number;
+		maxFalling?: number;
+		characters?: string;
+		arenaHeight?: number;
+		class?: string;
+		[key: string]: unknown;
+	} = $props();
+
+	interface FallingDigit {
+		id: number;
+		char: string;
+		x: number;
+		y: number;
+		speed: number;
+		caught: boolean;
+	}
+
+	let digits = $state<FallingDigit[]>([]);
+	let nextId = $state(0);
+	let containerEl: HTMLDivElement | undefined = $state();
+	let containerWidth = $state(400);
+	let containerHeight = $state(200);
+
+	$effect(() => {
+		const timer = setInterval(() => {
+			if (digits.length > maxFalling) return;
+			const id = nextId++;
+			const w = containerEl?.offsetWidth ?? 400;
+			digits = [...digits, {
+				id,
+				char: characters[Math.floor(Math.random() * characters.length)],
+				x: 20 + Math.random() * (w - 60),
+				y: -30,
+				speed: 0.6 + Math.random() * 1.5,
+				caught: false
+			}];
+		}, spawnInterval);
+		return () => clearInterval(timer);
+	});
+
+	// Gravity animation frame
+	$effect(() => {
+		let running = true;
+		const h = containerEl?.offsetHeight ?? 200;
+
+		function tick() {
+			if (!running) return;
+			digits = digits
+				.map(d => ({
+					...d,
+					y: d.caught ? d.y : d.y + d.speed
+				}))
+				.filter(d => d.y < h + 40 || d.caught);
+			requestAnimationFrame(tick);
+		}
+		requestAnimationFrame(tick);
+		return () => { running = false; };
+	});
+
+	// Update container dimensions
+	$effect(() => {
+		if (!containerEl) return;
+		const obs = new ResizeObserver(entries => {
+			for (const e of entries) {
+				containerWidth = e.contentRect.width;
+				containerHeight = e.contentRect.height;
+			}
+		});
+		obs.observe(containerEl);
+		return () => obs.disconnect();
+	});
+
+	function catchDigit(digit: FallingDigit) {
+		if (digit.caught) return;
+		value += digit.char;
+		digits = digits.filter(d => d.id !== digit.id);
+	}
+
+	function removeLastChar() {
+		value = value.slice(0, -1);
+	}
+</script>
+
+<div class={cn('space-y-3', className)}>
+	<!-- Display current value -->
+	<div class="flex items-center gap-2 rounded-xl border border-(--border) bg-(--secondary) px-4 py-2.5 min-h-10.5">
+		<span class="text-sm text-(--foreground) font-mono flex-1 break-all">
+			{#if value}
+				{value}
+			{:else}
+				<span class="text-(--muted-foreground)">{placeholder}</span>
+			{/if}
+		</span>
+		{#if value}
+			<button
+				class="text-xs text-(--muted-foreground) hover:text-gigo-red transition-colors px-1.5 py-0.5 rounded"
+				onclick={removeLastChar}
+			>
+				&#x232b;
+			</button>
+		{/if}
+	</div>
+
+	<!-- Falling digit arena -->
+	<div
+		bind:this={containerEl}
+		class="relative w-full overflow-hidden rounded-2xl border border-(--border) bg-(--card)"
+		style:height="{arenaHeight}px"
+		{...restProps}
+	>
+		<!-- Background grid -->
+		<div class="absolute inset-0 opacity-[0.03]" style="background-image: linear-gradient(var(--muted-foreground) 1px, transparent 1px), linear-gradient(90deg, var(--muted-foreground) 1px, transparent 1px); background-size: 32px 32px;"></div>
+
+		<!-- Catch zone at bottom -->
+		<div class="absolute bottom-0 left-0 right-0 h-10 bg-linear-to-t from-gigo-magenta/10 to-transparent pointer-events-none flex items-end justify-center pb-1">
+			<span class="text-[10px] font-mono text-gigo-magenta/50 uppercase tracking-widest">catch zone</span>
+		</div>
+
+		<!-- Falling digits -->
+		{#each digits as digit (digit.id)}
+			<button
+				class="absolute flex items-center justify-center w-9 h-9 rounded-lg text-sm font-mono font-bold cursor-pointer transition-all duration-100 hover:scale-125 active:scale-90 select-none"
+				style:left="{digit.x}px"
+				style:top="{digit.y}px"
+				style:background={digit.y > (containerHeight - 60) ? 'rgba(224, 64, 251, 0.2)' : 'rgba(255, 255, 255, 0.05)'}
+				style:border="1px solid {digit.y > (containerHeight - 60) ? 'rgba(224, 64, 251, 0.5)' : 'rgba(255, 255, 255, 0.1)'}"
+				style:color={digit.y > (containerHeight - 60) ? '#e040fb' : 'var(--foreground)'}
+				style:box-shadow={digit.y > (containerHeight - 60) ? '0 0 12px rgba(224, 64, 251, 0.3)' : 'none'}
+				onclick={() => catchDigit(digit)}
+			>
+				{digit.char}
+			</button>
+		{/each}
+
+		<!-- Instructions -->
+		{#if digits.length === 0 && !value}
+			<div class="absolute inset-0 flex items-center justify-center text-sm text-(--muted-foreground)">
+				Digits spawning...
+			</div>
+		{/if}
+	</div>
+
+	<p class="text-[10px] font-mono text-(--muted-foreground) text-center">
+		Click falling characters to type. Good luck spelling anything useful.
+	</p>
+</div>