Sdf Blob Transition

Renders a dynamic WebGL SDF blob transition for visual effects during route or state changes. It animates and transitions between different blob shapes based on the provided variant. Use it to add smooth background transitions in a web application.

byEdu Calvo from Smoothui

Installation

terminal

pnpm dlx layro-cli add @educlopez/sdf-blob-transition

npx layro-cli add @educlopez/sdf-blob-transition

npx layro-cli add @educlopez/sdf-blob-transition

bunx layro-cli add @educlopez/sdf-blob-transition

New project? Start with init. Writes third-party code and installs packages with scripts off.

Code

Demo

"use client";

import { cn } from "@/lib/utils";
import { useReducedMotion } from "motion/react";
import { type ReactNode, useEffect, useRef, useState } from "react";

export type SdfBlobVariant = "circle" | "warped" | "merge" | "radial" | "final";

export interface SdfBlobTransitionProps {
  children: ReactNode;
  className?: string;
  duration?: number;
  onRest?: () => void;
  transitionKey: string | number;