@bl0cka.de/use-blob (0.1.1)
Installation
@bl0cka.de:registry=npm install @bl0cka.de/use-blob@0.1.1"@bl0cka.de/use-blob": "0.1.1"About this package
@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.
Dependencies
Dependencies
| ID | Version |
|---|---|
| @bl0cka.de/blob | file:../blob |
Development dependencies
| ID | Version |
|---|---|
| jsdom | ^29.1.1 |
| release-it | ^20.2.0 |
| typescript | ^5.8.0 |
| vue | ^3.5.0 |
Peer dependencies
| ID | Version |
|---|---|
| vue | ^3.3.0 |