proNew171 lines · framer-motion

Loader Morph Shape

A blob that never quite settles. A full-width showcase section for an SVG loading indicator: a single path morphs between four hand-authored blob shapes in a smooth infinite loop, filled with a token-based gradient and an optional soft glow.

Use it for: Demonstrating a distinctive loading indicator on a marketing or docs page, or as a reference to lift the morph pattern into a real app loader.
Themes: Light + dark
License: Commercial use

Live

Loaders

A shape that never quite settles

A single path morphs between a handful of blob shapes on an infinite loop — a loading indicator with weight and light, not a spinner.

tsx

"use client";

import * as React from "react";
import { motion, useAnimationControls, useReducedMotion } from "framer-motion";
import { cn } from "@/lib/utils";

function useReducedMotionSafe() {
  const prefersReduced = useReducedMotion();
  const [mounted, setMounted] = React.useState(false);
  React.useEffect(() => setMounted(true), []);
  return mounted ? !!prefersReduced : false;
}

/**
 * Full-width showcase section for an SVG blob loader: a single <path> morphs
 * between a fixed set of hand-authored shapes in a smooth infinite loop,
 * filled with a token-based gradient. A Play/Pause control actually starts
 * and stops the loop; the loop also pauses offscreen, when the tab is
 * hidden, and rests on a single shape under prefers-reduced-motion.
 */

export interface LoaderMorphShapeProps {

The rest is in Pro.

Full source, the rebuild prompt and registry install unlock with Pro or Lifetime.

Get Pro

How it behaves

→A single <motion.path> animates its d attribute across four fixed, hand-authored blob path strings (same command structure, so the interpolation stays smooth) with repeat: Infinity.
→speed scales the morph cycle duration; size sets the shape's rendered pixel size; color picks which design token (signal/info/lime/ok) drives the gradient fill and the glow; glow toggles a soft blurred halo behind the shape.
→A Play/Pause button actually starts and stops the morph loop via framer-motion animation controls, not just a visual icon swap.
→The loop also pauses when the section scrolls offscreen (IntersectionObserver) and when the tab is hidden (visibilitychange), independent of the manual Play/Pause state.
→Under prefers-reduced-motion, the shape rests on its first fixed frame instead of auto-looping; Play/Pause still works on demand.

Accessibility

✓The SVG has `role="img"` and an `aria-label` describing it as a loading indicator; the decorative glow halo is `aria-hidden`.
✓Play/Pause is a real `<button>` with `aria-pressed` reflecting the current state, reachable and operable by keyboard.
✓Honours prefers-reduced-motion.