Ouija Board Input

A Svelte 5 component that overlays invisible buttons on a Ouija board image so users can select letters, numbers, and words (YES, NO, GOOD BYE). It is useful for novelty text input and not much else.

What this project includes

• src/OuijaInput.svelte: reusable input component
• src/App.svelte: minimal local app usage
• examples/DemoApp.svelte: demo that maps word buttons to actions

Run locally

npm install
npm run dev

Run the demo page

npm run demo

This opens examples/demo.html, which mounts examples/DemoApp.svelte.

Wire buttons to your own methods

Use bind:value for the current text and onSelect to react to board button presses.

<script lang="ts">
	import OuijaInput from './OuijaInput.svelte';

	let value = $state('');

	type SelectDetail = { label: string; kind: 'letter' | 'number' | 'word' };

	function submitMessage() {
		console.log('submit', value);
	}

	function clearMessage() {
		value = '';
	}

	function backspace() {
		value = value.slice(0, -1);
	}

	function handleSelect(detail: SelectDetail) {
		if (detail.kind !== 'word') return;
		if (detail.label === 'YES') submitMessage();
		if (detail.label === 'NO') backspace();
		if (detail.label === 'GOOD BYE') clearMessage();
	}
</script>

<OuijaInput bind:value onSelect={handleSelect} />

Available props

• boardImageSrc?: string path to board image
• boardImageAlt?: string alt text for the board image
• value?: string current value (supports bind:value)
• showWordButtons?: boolean show or hide YES, NO, GOOD BYE
• showLetterButtons?: boolean show or hide letter buttons
• showNumberButtons?: boolean show or hide number buttons
• onChange?: (value: string) => void callback when value changes
• onSelect?: (detail: { label: string; kind: 'letter' | 'number' | 'word' }) => void callback when any board button is selected