Libraries.dev Svelte Ports

Svelte 5 ports of the Libraries.dev Bot Avatars and Gooey radial plus menu. The implementation is ported from the cloned repository at C:\Users\admin\Downloads\Libraries.dev, including the original drawing/animation source, the Bot Avatars internal README, and the liquid-gooey source and README.

Bot Avatars

<script lang="ts">
  import { BotAvatar, type BotAvatarState } from 'libraries-dev-svelte';
  let state = $state<BotAvatarState>('working');
</script>

<BotAvatar type="clover" {state} size={64} />

The port retains all 18 shapes; idle, working and sleeping animation states; eyes and optional state-aware mouth; pointer following and click jumps; plastic, crisp, smooth and flat shading; lighting, whirl and jump controls; reduced-motion and paused poses; seed synchronization; accessible labels; and the canvas drawing exports. Canvas properties and native click handlers pass through. It updates at 30 fps with a maximum device pixel ratio of 1.5 by default to reduce continuous drawing and backing-store memory on high-density screens; set fps={60} and maxDpr={2} when maximum smoothness and resolution matter more.

Types, presets, palette, shape paths, simulation, renderer, and plastic-material helpers are exported from the package entry point. See packages/bot-avatars/README.md in the source clone for the complete original prop descriptions.

Gooey radial menu

<script lang="ts">
  import { GooeyRadialMenu, gooeyShadowPresets } from 'libraries-dev-svelte';
</script>

<GooeyRadialMenu bare blur={6} contrast={18} shadow={gooeyShadowPresets.light.soft} />

This ports the source PlusMenu.tsx demo and the liquid-gooey behavior it uses: filtered merged silhouettes and shadows, synchronized CSS transform transitions for each button and its SVG blob, stagger and easing controls, close anticipation, theme-aware fill, and the full tuning panel. The normal playground exposes duration and stagger; add ?pro on /gooey for the full controls, copy-values output, and reset.

Shadow styles

shadow styles one silhouette behind the menu. When the buttons join, their shadow joins into one continuous outline; it is not a separate shadow on each button. The presets are split by surface theme:

gooeyShadowPresets.light.soft
gooeyShadowPresets.light.floating
gooeyShadowPresets.dark.soft
gooeyShadowPresets.dark.floating
gooeyShadowPresets.none

You can also pass CSS box-shadow layers directly. Layer order is horizontal offset, vertical offset, blur, optional spread, then color. Separate layers with commas; add inset for an inner ring or highlight. Lengths must be numbers in pixels (px) or unitless values.

<GooeyRadialMenu
  bare
  shadow="0 0 0 1px rgba(0, 0, 0, .06), 0 4px 12px rgba(0, 0, 0, .12)"
/>

Props: blur (6), contrast (18), fill (var(--modal-bg, #fff)), shadow (empty), items (optional custom satellite items), onAction (optional callback; receives the selected item's action string), pro (false), and bare (false). bare renders only the menu stage and is the recommended mode when embedding it in an application; without it, the tuning panel is included. Selecting a satellite calls onAction when supplied and closes the menu. The host can set --modal-bg, --btn-text, --stage-bg, --accent, and --hover-veil to match its theme.

Custom items

Note for package users: GooeyRadialMenu no longer ships fixed demo items. By default it still renders the original New file / Add image / New folder demo, but you can pass your own via the items prop. Each item is { label, action, x, y, iconSnippet? }, where x/y are pixel offsets from the main button (positive y is down) and action is any string reported back through onAction. Keep offsets within the stage (the default stage is 200×140 with the main button centered) so satellites stay inside the goo filter. Icons are snippets, so any markup works — including an icon library. If iconSnippet is omitted, the built-in icon key ('file' | 'image' | 'folder') is used; when neither is set, the item renders unlabeled.

<script lang="ts">
  import { GooeyRadialMenu } from 'libraries-dev-svelte';

  const items = [
    { label: 'Reply', action: 'reply', x: -54, y: -34 },
    { label: 'Share', action: 'share', x: 0, y: -64 },
    { label: 'Delete', action: 'delete', x: 54, y: -34 },
  ];

  function handleAction(action: string) {
    if (action === 'delete') confirmDelete();
  }
</script>

<GooeyRadialMenu bare {items} onAction={handleAction} />

With custom icons:

<script lang="ts">
  import { GooeyRadialMenu } from 'libraries-dev-svelte';
  import { Camera, Send, Trash } from 'reicon-svelte';

  const items = [
    { label: 'Camera', action: 'camera', x: -54, y: -34 },
    { label: 'Send', action: 'send', x: 0, y: -64 },
    { label: 'Delete', action: 'delete', x: 54, y: -34 },
  ];
</script>

<GooeyRadialMenu
  bare
  {items}
  onAction={(action) => console.log(action)}
>
  {#snippet iconSnippet(item)}
    {#if item.action === 'camera'}<Camera size={16} weight="Outline" />{/if}
    {#if item.action === 'send'}<Send size={16} weight="Outline" />{/if}
    {#if item.action === 'delete'}<Trash size={16} weight="Outline" />{/if}
  {/snippet}
</GooeyRadialMenu>

Demo routes

• / — Bot Avatars, including the source showcase and rendering diagnostics.
• /gooey — Gooey radial menu with live blur, contrast, theme, and shadow controls.

Development

bun install
bun run dev
bun run check
bun run build

MIT. Original source: Libraries.dev.