Scroll Morph Blob

A gradient blob that morphs between several organic shapes as the scroll progresses.

useScroll tracks scroll progress and useTransform interpolates between several structurally identical SVG paths, so the blob morphs between organic shapes like a liquid while multiple gradient layers cross-fade to shift its color — a good decorative background for long pages or scroll-driven storytelling.

Loading preview…

npx shadcn@latest add "https://webberui.com/r/scroll-morph-blob.json?t=<install token>"

Playground

Tune the props live — the code snippet updates as you go, so you can dial in the look you want before copying it.

Blob size (px)size

280

Total scroll rotation (degrees)rotate

Show the outer glowglow

<ScrollMorphBlob />

Installation

npx shadcn@latest add "https://webberui.com/r/scroll-morph-blob.json?t=<install token>"

Or, once registries are configured in components.json, install it as @webberui/scroll-morph-blob.

Usage

import * as React from "react";
import { ScrollMorphBlob } from "@/components/ui/scroll-morph-blob";

function ScrollStory() {
  const containerRef = React.useRef<HTMLDivElement>(null);

  return (
    <div ref={containerRef} className="relative h-[400px] overflow-y-auto">
      <div className="pointer-events-none sticky top-0 flex h-[400px] items-center justify-center">
        <ScrollMorphBlob containerRef={containerRef} size={240} />
      </div>
      <div className="relative -mt-[400px]">{/* scrolling content sections… */}</div>
    </div>
  );
}

When containerRef is omitted, the blob tracks the scroll progress of the whole page (the viewport) instead.

Props

Prop	Type	Default	Description
`containerRef`	`React.RefObject<HTMLElement \| null>`	—	Ref of the scroll container; when omitted, whole-page scroll progress is tracked
`paths`	`string[]`	4 built in	The sequence of blob paths (at least 2; the SVG command structure must be identical for interpolation to work)
`colors`	`Array<[string, string]>`	4 built in	The two gradient colors for each shape stage; reused cyclically when there are not enough
`size`	`number`	`280`	Blob edge length (px); the SVG scales proportionally from a 200×200 viewBox
`rotate`	`number`	`60`	Total rotation accumulated across the whole scroll (degrees); set to 0 to disable rotation
`glow`	`boolean`	`true`	Whether to layer a Gaussian-blurred glow behind the blob
`className`	`string`	—	Forwarded to the outer container

Accessibility

The blob is purely decorative, so the outer container is marked aria-hidden and assistive technology skips it entirely
When the user has "reduce motion" enabled at the system level, a static blob using the first shape and gradient is rendered instead, with no morphing, rotation, or scaling
The animation is driven entirely by scroll progress, with nothing playing automatically, so what changes on screen stays in sync with user input
pointer-events-none makes sure the blob never intercepts clicks or scrolling