@bl0cka.de/use-blob

Vue 3 composable binding for @bl0cka.de/blob — organically morphing decorative blobs with gradient or image fill.

npm install @bl0cka.de/use-blob

Ships raw TypeScript — add it to transpilePackages (Nuxt/Next-style setups) or let Vite handle it. Requires Vue ≥ 3.3.

Usage

<script setup lang="ts">
import { useBlob } from '@bl0cka.de/use-blob'

const { containerRef } = useBlob({
  fill: {
    type: 'gradient',
    stops: [
      { offset: 0, color: '#8b5cf6' },
      { offset: 1, color: '#22d3ee' },
    ],
    angle: 45,
  },
  animate: 'hover',
})
</script>

<template>
  <div ref="containerRef" style="width: 320px; height: 200px" />
</template>

The blob is created on mount and destroyed on unmount (SSR-safe: nothing happens on the server). Size it via the container element.

Reactive options

Pass a ref, getter, or reactive object and option changes apply live — shape changes crossfade smoothly, exactly like controller.setOptions:

const options = reactive<BlobOptions>({ points: 8, irregularity: 0.35 })
const { containerRef } = useBlob(options)

options.points = 12 // crossfades, no jump

Changing the create-time-only keys (renderer, fit) destroys and recreates the blob automatically.

Returned API

const {
  containerRef, // Ref<HTMLElement | null> — bind to the container
  controller,   // ShallowRef<BlobController | null> — full underlying API
  play,         // eased start (no-op before mount)
  pause,        // eased stop
  setOptions,   // imperative patch, same as controller.setOptions
} = useBlob(options)

All option types (BlobOptions, BlobFill, Easing, …) are re-exported. See the @bl0cka.de/blob README for the full option reference.