Add ricochet playground control and tighten trail follow

Expose the existing `ricochet` option as a slider in the playground, with snippet and shareable-URL round-trip alongside the other controls (demo only — the API and docs already shipped).

Stiffen the shared chase/snap spring (170->260) and raise damping to match (20->26) so trailing bubbles track the leader more tightly during a group drag and settle against the edge a touch crisper.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

Author: githyperplexed

CHANGELOG.md

@@ -16,6 +16,8 @@ adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
 - The built-in fallback bubble icon (painted only when a bubble has no `icon`, with `bubbleIcon` as
   its stroke) is now an ellipsis glyph instead of a chat bubble.
+- Trailing bubbles track the leader more tightly during a group drag, and bubbles settle against the
+  edge a touch crisper — the shared chase/snap spring is stiffer and damped to match.
 
 ### Internal
 
@@ -24,6 +26,8 @@ adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
   external links announce that they open a new tab, and the contrast-aware glyph picks its ink by
   WCAG contrast ratio.
 - Added `@axe-core/playwright` and an end-to-end accessibility scan over the playground.
+- Playground now exposes the existing `ricochet` option as a slider, with snippet and shareable-URL
+  round-trip alongside the other controls.
 
 ## [0.5.1] - 2026-06-14
 

playground/components/settings-panel.svelte

@@ -53,6 +53,7 @@
 	// Sliders hand back float-noise like 0.35000000000000003; two decimals
 	// keep the URL and snippet honest.
 	const commitVertical = (value: number) => (config.vertical = Math.round(value * 100) / 100);
+	const commitRicochet = (value: number) => (config.ricochet = Math.round(value * 100) / 100);
 
 	const reset = () => Object.assign(config, defaults);
 </script>
@@ -205,6 +206,16 @@
 			onCommit={(v) => (config.panelMaxHeight = v)}
 		/>
 
+		<ControlSlider
+			label="Ricochet"
+			min={ranges.ricochet.min}
+			max={ranges.ricochet.max}
+			step={ranges.ricochet.step}
+			value={config.ricochet}
+			format={(v) => `${Math.round(v * 100)}%`}
+			onCommit={commitRicochet}
+		/>
+
 		<div class="flex items-center justify-between">
 			<span class="text-xs text-zinc-400 light:text-zinc-600">Max bubbles</span>
 			<div class="flex items-center gap-2">

playground/defaults.ts

@@ -8,7 +8,9 @@ export const ranges = {
 	panelWidth: { min: 280, max: 1600, step: 20 },
 	// Panel max height as a viewport percentage — the library takes "%".
 	panelMaxHeight: { min: 10, max: 100, step: 10 },
-	maxBubbles: { min: 1, max: 5 }
+	maxBubbles: { min: 1, max: 5 },
+	// Bounce restitution: 0 stops a fling dead at the gap, 1 is lossless.
+	ricochet: { min: 0, max: 1, step: 0.05 }
 } as const;
 
 /**
@@ -26,5 +28,6 @@ export const defaults: PlaygroundConfig = {
 	vertical: 0.5,
 	panelWidth: 480,
 	panelMaxHeight: 70,
-	maxBubbles: 5
+	maxBubbles: 5,
+	ricochet: 0.4
 };

playground/options.ts

@@ -63,5 +63,6 @@ export const toBubblesOptions = (config: PlaygroundConfig): BubblesOptions => ({
 	vertical: config.vertical,
 	panelWidth: config.panelWidth,
 	panelMaxHeight: `${config.panelMaxHeight}%`,
-	maxBubbles: config.maxBubbles
+	maxBubbles: config.maxBubbles,
+	ricochet: config.ricochet
 });

playground/snippet.ts

@@ -30,6 +30,7 @@ export const configSnippet = (config: PlaygroundConfig): string => {
 	// full-height panels instead of the contained ones on screen.
 	lines.push(`\tpanelMaxHeight: "${config.panelMaxHeight}%"`);
 	if (config.maxBubbles !== defaults.maxBubbles) lines.push(`\tmaxBubbles: ${config.maxBubbles}`);
+	if (config.ricochet !== defaults.ricochet) lines.push(`\tricochet: ${config.ricochet}`);
 
 	if (lines.length === 0) return "createBubbles();";
 	return `createBubbles({\n${lines.join(",\n")}\n});`;

playground/types/index.ts

@@ -14,6 +14,8 @@ export interface PlaygroundConfig {
 	/** Panel max height as a percentage of the viewport (10–100). */
 	panelMaxHeight: number;
 	maxBubbles: number;
+	/** Fraction of fling speed a bubble keeps when it bounces off the top/bottom gap (0–1). */
+	ricochet: number;
 }
 
 /** A curated accent color in the controls panel. */

playground/url.ts

@@ -31,13 +31,16 @@ export const readConfig = (): Partial<PlaygroundConfig> => {
 		["vertical", "vertical", ranges.vertical],
 		["panel-width", "panelWidth", ranges.panelWidth],
 		["panel-max-height", "panelMaxHeight", ranges.panelMaxHeight],
-		["max-bubbles", "maxBubbles", ranges.maxBubbles]
+		["max-bubbles", "maxBubbles", ranges.maxBubbles],
+		["ricochet", "ricochet", ranges.ricochet]
 	] as const;
+	// vertical and ricochet are fractions; the rest round to whole numbers.
+	const fractional = new Set(["vertical", "ricochet"]);
 	for (const [param, key, range] of numbers) {
 		const raw = params.get(param);
 		if (raw === null) continue;
 		const value = parseClamped(raw, range.min, range.max);
-		if (value !== undefined) config[key] = key === "vertical" ? value : Math.round(value);
+		if (value !== undefined) config[key] = fractional.has(key) ? value : Math.round(value);
 	}
 	return config;
 };
@@ -54,6 +57,7 @@ export const writeConfig = (config: PlaygroundConfig): void => {
 		params.set("panel-max-height", `${config.panelMaxHeight}`);
 	}
 	if (config.maxBubbles !== defaults.maxBubbles) params.set("max-bubbles", `${config.maxBubbles}`);
+	if (config.ricochet !== defaults.ricochet) params.set("ricochet", `${config.ricochet}`);
 
 	const query = params.toString();
 	history.replaceState(null, "", query ? `?${query}` : location.pathname);

src/physics/config.ts

@@ -23,10 +23,10 @@ export const TOUCH_VELOCITY_BOOST = 1.5;
 export const TOUCH_CHASE_RATE = 1.5;
 
 /** Spring pull toward the wall (1/s²). */
-export const SPRING_STIFFNESS = 170;
+export const SPRING_STIFFNESS = 260;
 
-/** Spring resistance (1/s). Critical damping is 2·√stiffness ≈ 26 — below that overshoots slightly. */
-export const SPRING_DAMPING = 20;
+/** Spring resistance (1/s). Critical damping is 2·√stiffness ≈ 32 — below that overshoots slightly. */
+export const SPRING_DAMPING = 26;
 
 /** Below this speed (px/s) an axis counts as at rest. */
 export const REST_VELOCITY = 10;