kbubble open — the button becomes the window
ENTRY-BUBBLE1 · click a button and its border inflates: seeded organic undulation, breath
surges, rounding out as it swells, until the stroke has left the screen. The button's text and fill dissolve while the
target page fades in inside the loop — clipped to it, at its final size — so the bubble reads as a window
growing onto the next page. Source m/katomia/kbubbleopen.js · border itself is
kbubble.js (tuned in bubble.html).
Target page — the parameter that matters
The reveal is a real <iframe> pinned to the viewport, so what you see through the hole
is the final page at its final size — no scale, no pan, nothing to re-lay-out when the navigation lands. Prefetch
warms that iframe on hover, so by the time you click the document is already painted; leave real navigation off
while tuning and the lab stays put behind the reveal (a ↺ pill brings you back).
A solid backdrop sheet rides under the reveal on the same clip, because an iframe whose
stylesheet hasn't landed yet paints nothing — without it a cold target turns the window see-through and the
whole gesture reads as a no-op. auto borrows the target's own body background (or this page's if it
can't be read yet); any CSS colour overrides it, empty turns it off.
Same-origin targets only in practice — a cross-origin page that sends
X-Frame-Options: DENY can't be framed and the bubble will reveal blank.
Light — click one
Dark — the pitch-deck world
Knobs — live on the next click
The shape knobs: undulate is how far the loop breathes off a circle and lobes/harmonics how many bulges do the breathing — integer lobe counts, so the wobble closes seamlessly round the loop. settle is surface tension: how much of that wobble irons out as it fills (1 = perfectly round by the end). seed makes any shape you liked reproducible. puffs/puff depth make it swell in gulps of breath instead of one glide, and coverage pushes the final radius past the screen corners so the border ends up outside the viewport — auto-lifted if the end-state wobble would otherwise dip a lobe back into view.