Skip to content

feat: add gooey popover component#99

Merged
starc007 merged 1 commit into
mainfrom
feat/gooey-popover
Jul 7, 2026
Merged

feat: add gooey popover component#99
starc007 merged 1 commit into
mainfrom
feat/gooey-popover

Conversation

@starc007

@starc007 starc007 commented Jul 7, 2026

Copy link
Copy Markdown
Owner

Summary

  • New composable popover: Popover / PopoverTrigger / PopoverContent (motion category).
  • The panel oozes out of the trigger through an SVG goo filter — a static trigger blob plus a morphing blob merge into a liquid neck that stretches and pinches. A clip-path inset() morph, driven by a spring progress value, carries the body from the trigger footprint to the open panel; the content is clipped by the same morph so it reveals with the body.
  • Click or hover trigger (hover has a grace window to cross the neck), controlled + uncontrolled, side/align/sideOffset/panelRadius/gooStrength props, reduced-motion safe, inert while closed.
  • Registered in lib/registry.ts + previews index + AGENTS.md catalog; preview with a click (form) and a hover popover.

Test plan

  • bun run check (typecheck + lint + registry)
  • Verified in-browser: click + hover open/close, goo neck, no edge artifacts, trigger clickable

Composable popover (Popover, PopoverTrigger, PopoverContent) whose panel
oozes out of the trigger via an SVG goo filter — a liquid neck that
stretches and pinches as a clip-path morph carries the body from the
trigger footprint to the open panel. Click or hover trigger, controlled
or uncontrolled, reduced-motion safe.
@starc007 starc007 merged commit d12e9f7 into main Jul 7, 2026
2 checks passed
@starc007 starc007 deleted the feat/gooey-popover branch July 7, 2026 17:30
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant