FancyUI
Saved GitHub Get started
Action bar — gooey merge (prototype) — preview

Action bar — gooey merge (prototype)

FancyUI FANCYUI

A highlight that fuses with its neighbours like liquid as it travels along the bar.

#playful#physical#hover

Open docs

Related FancyUI components

  • Button

    The sharp layer is plain buttons; only the decorative blobs behind them are gooey.

    pnpm add fancy-ui-svelte
    import { Button } from "fancy-ui-svelte";

    Docs Source

Type
Interaction
Interaction
Hover
Style
Playful, Physical
Code availability
Open source

Why it works

Two sibling layers: a decorative one is blurred and alpha-thresholded so touching shapes fuse into one liquid body, and a sharp one on top holds the real buttons, labels and focus rings. Neighbours lean toward the hovered action with a 40 ms stagger per step.

When to use it

A short toolbar of three to six actions where a playful, physical feel is part of the brand. This is a prototype: its cost is being measured before it becomes a component.

Things to watch

The filter re-rasterizes the decorative layer on every frame it moves, so keep the layer small and never put text under it. Reduced motion and touch pointers snap instead of travelling.

Implementation clues

  • blur then alpha threshold
  • decorative layer apart from the buttons
  • staggered lean
  • snap under reduced motion