SDF Blob Transition

Frame-level WebGL transition that swaps content under soft-merged SDF circles with organic noise.

Open in v0

Last updated: July 6, 2026

smoothui.dev/preview
Dashboard

SDF blob

Revenue is ready to review.

A soft blob reveal that feels organic without adding extra chrome.

MRR
Activation
Retention

Installation

npx smoothui-cli add sdf-blob-transition

Features

  • Persistent WebGL transition wrapper triggered by a transitionKey
  • Soft-merged SDF circles inspired by shader image reveal techniques
  • Organic noise on the perimeter so the reveal feels alive without leaving residue
  • Accessible: honors prefers-reduced-motion and keeps semantic content in the DOM

Usage guidance

Use it for launch moments, onboarding steps, checkout completion, or presentation state changes where an organic reveal fits the product language.

Accessibility

When reduced motion is preferred, content swaps immediately and onRest still fires.

Props

On this page

Created by

Powered by

motion.dev