('.mode-btn'))
+for (const btn of modeButtons) {
+ btn.addEventListener('click', () => {
+ const mode = btn.dataset['mode'] as PhysicsMode | undefined
+ if (mode === undefined) return
+ physicsMode = mode
+ for (const b of modeButtons) b.classList.remove('selected')
+ btn.classList.add('selected')
+
+ if (mode === 'gravity') {
+ for (const bubble of bubbles) {
+ bubble.vy = -1 - Math.random() * 2
+ }
+ }
+ })
+}
+
+// ---------------------------------------------------------------------------
+// User input (feature 3)
+// ---------------------------------------------------------------------------
+
+function addUserBubble(text: string): void {
+ const trimmed = text.trim()
+ if (trimmed.length === 0) return
+
+ const detected = detectScript(trimmed)
+ const phrase: Phrase = {
+ lang: detected.lang,
+ label: detected.label,
+ text: trimmed,
+ font: defaultFont,
+ family: detected.family,
+ }
+
+ const w = window.innerWidth
+ const h = window.innerHeight
+ const bubble = makeBubble(phrase, w / 2 - 100, h * 0.6)
+ bubble.vy = -2 - Math.random()
+ bubble.vx = (Math.random() - 0.5) * 2
+
+ scene.appendChild(bubble.el)
+ bubbles.push(bubble)
+ bubbleCountEl.textContent = String(bubbles.length)
+
+ const color = familyColors[phrase.family]
+ spawnParticles(bubble.x + bubble.width / 2, bubble.y + bubble.height / 2, color, 20)
+}
+
+userInput.addEventListener('keydown', event => {
+ if (event.key === 'Enter') {
+ addUserBubble(userInput.value)
+ userInput.value = ''
+ }
+})
+
+addBtn.addEventListener('click', () => {
+ addUserBubble(userInput.value)
+ userInput.value = ''
+ userInput.focus()
+})
+
+// ---------------------------------------------------------------------------
+// Click handling — width animation toggle
+// ---------------------------------------------------------------------------
+
+scene.addEventListener('mousemove', event => {
+ mouseX = event.clientX
+ mouseY = event.clientY
+})
+
+scene.addEventListener('mouseleave', () => {
+ mouseX = -1000
+ mouseY = -1000
+})
+
+scene.addEventListener('click', event => {
+ const target = event.target as Element
+ const bubbleEl = target.closest('.bubble') as HTMLDivElement | null
+ if (bubbleEl === null) {
+ if (activeBubble !== null) {
+ if (activeBubble.animating) stopWidthAnimation(activeBubble)
+ activeBubble.el.classList.remove('active')
+ activeBubble.active = false
+ activeBubble = null
+ }
+ return
+ }
+
+ for (const bubble of bubbles) {
+ if (bubble.el === bubbleEl) {
+ if (activeBubble !== null && activeBubble !== bubble) {
+ if (activeBubble.animating) stopWidthAnimation(activeBubble)
+ activeBubble.el.classList.remove('active')
+ activeBubble.active = false
+ }
+ if (bubble.active) {
+ if (bubble.animating) stopWidthAnimation(bubble)
+ bubble.el.classList.remove('active')
+ bubble.active = false
+ activeBubble = null
+ } else {
+ bubble.el.classList.add('active')
+ bubble.active = true
+ activeBubble = bubble
+ startWidthAnimation(bubble, globalTime / 1000)
+ updateMetaText(bubble)
+ const color = familyColors[bubble.phrase.family]
+ spawnParticles(bubble.x + bubble.width / 2, bubble.y + bubble.height / 2, color, 16)
+ }
+ break
+ }
+ }
+})
+
+// ---------------------------------------------------------------------------
+// Lifecycle
+// ---------------------------------------------------------------------------
+
+window.addEventListener('resize', () => {
+ initCanvas()
+})
+
+document.fonts.ready.then(() => {
+ initCanvas()
+ initBubbles()
+ requestAnimationFrame(animate)
+})
diff --git a/pages/demos/index.html b/pages/demos/index.html
index a15f4efd..7686237f 100644
--- a/pages/demos/index.html
+++ b/pages/demos/index.html
@@ -136,6 +136,11 @@ Rich Text
Masonry
A text-card occlusion demo where height prediction comes from Pretext instead of DOM reads.
+
+
+ Floating Languages
+ Everyday phrases in many languages float across the screen. Hover to illuminate, click to inspect Pretext measurements.
+