Button

( Action / Form / Interactive )

A soft-canvas button with slowly floating blurred blobs behind a crisp white border.

React.js

"use client"

import React from "react";
import { motion, type HTMLMotionProps } from "framer-motion";
import { Loader2, Sparkles, type LucideIcon } from "lucide-react";

export interface DreamyButtonProps
  extends Omit<HTMLMotionProps<"button">, "children"> {
  /** Text label rendered inside the button */
  label?: string;
  /** lucide-react icon component. Defaults to Sparkles; pass `icon={null}` to hide it */
  icon?: LucideIcon | null;
  /** Where the icon sits relative to the label */
  iconPosition?: "left" | "right";
  /** Visual size of the button */
  size?: "sm" | "md" | "lg";
  /** Shows a spinner and disables interaction */
  loading?: boolean;
  /** Stretches the button to fill its container */
  fullWidth?: boolean;
  /** Color used for all the floating blurred blobs on the canvas */
  blobColor?: string;
  /** Base canvas color the blobs float on top of */
  canvasColor?: string;
  /** Extra classes for consumers using a utility CSS framework */
  className?: string;
}

const sizeStyles: Record<
  NonNullable<DreamyButtonProps["size"]>,
  { padding: string; fontSize: string; gap: string; iconSize: number; radius: string }
> = {
  sm: { padding: "8px 16px", fontSize: "13px", gap: "6px", iconSize: 14, radius: "10px" },
  md: { padding: "11px 22px", fontSize: "15px", gap: "8px", iconSize: 17, radius: "12px" },
  lg: { padding: "14px 30px", fontSize: "17px", gap: "10px", iconSize: 20, radius: "14px" },
};

const DEFAULT_BLOB_COLOR = "#7dd3fc"; // sky blue

/** Fixed, organic-feeling motion paths so blobs don't all move in sync.
 *  Sizes and positions are kept small/spaced so white canvas remains
 *  visible around each blob, like clouds floating on open sky. */
const BLOB_LAYOUT = [
  { top: "-15%", left: "-8%", size: "38%", xRange: [0, 14, -4, 0], yRange: [0, -8, 6, 0], duration: 9, opacity: 0.6 },
  { top: "5%", left: "68%", size: "32%", xRange: [0, -10, 8, 0], yRange: [0, 10, -6, 0], duration: 11, opacity: 0.5 },
  { top: "55%", left: "8%", size: "30%", xRange: [0, 8, -10, 0], yRange: [0, -6, 4, 0], duration: 8, opacity: 0.55 },
  { top: "60%", left: "62%", size: "34%", xRange: [0, -8, 10, 0], yRange: [0, 8, -8, 0], duration: 12, opacity: 0.5 },
];

const noop = () => {};

/**
 * DreamyButton — a self-contained, highly reusable button with a soft
 * white canvas background covered by slowly floating blurred blobs,
 * and a crisp 1px white border. Works out of the box with zero props;
 * configure everything via props, no children needed.
 */
export const DreamyButton = React.forwardRef<HTMLButtonElement, DreamyButtonProps>(
  (
    {
      label = "Button",
      icon: Icon = Sparkles,
      iconPosition = "left",
      size = "lg",
      loading = false,
      fullWidth = false,
      disabled = false,
      blobColor = DEFAULT_BLOB_COLOR,
      canvasColor = "#ffffff",
      className = "",
      style,
      onClick = noop,
      ...rest
    },
    ref
  ) => {
    const { padding, fontSize, gap, iconSize, radius } = sizeStyles[size];
    const isDisabled = disabled || loading;

    return (
      <motion.button
        ref={ref}
        type="button"
        disabled={isDisabled}
        aria-busy={loading}
        className={className}
        onClick={onClick}
        whileHover={isDisabled ? undefined : { scale: 1.025 }}
        whileTap={isDisabled ? undefined : { scale: 0.975 }}
        transition={{ type: "spring", stiffness: 400, damping: 22 }}
        style={{
          position: "relative",
          display: "inline-flex",
          alignItems: "center",
          justifyContent: "center",
          gap,
          width: fullWidth ? "100%" : "auto",
          padding,
          fontSize,
          fontWeight: 600,
          fontFamily: "inherit",
          color: "#3f3f46",
          background: canvasColor,
          border: "1px solid rgba(255, 255, 255, 0.9)",
          borderRadius: radius,
          cursor: isDisabled ? "not-allowed" : "pointer",
          overflow: "hidden",
          isolation: "isolate",
          opacity: isDisabled ? 0.6 : 1,
          boxShadow:
            "0 0 0 1px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.06), 0 10px 24px -10px rgba(120, 100, 200, 0.35)",
          WebkitTapHighlightColor: "transparent",
          ...style,
        }}
        {...rest}
      >
        {/* White canvas with floating blurred blobs */}
        <span
          aria-hidden="true"
          style={{
            position: "absolute",
            inset: 0,
            background: canvasColor,
            zIndex: -2,
          }}
        />
        <span
          aria-hidden="true"
          style={{
            position: "absolute",
            inset: 0,
            zIndex: -1,
            filter: "blur(14px)",
          }}
        >
          {BLOB_LAYOUT.map((blob, i) => (
            <motion.span
              key={i}
              style={{
                position: "absolute",
                top: blob.top,
                left: blob.left,
                width: blob.size,
                paddingBottom: blob.size,
                borderRadius: "9999px",
                background: blobColor,
                opacity: blob.opacity,
              }}
              animate={{
                x: blob.xRange,
                y: blob.yRange,
              }}
              transition={{
                duration: blob.duration,
                ease: "easeInOut",
                repeat: Infinity,
              }}
            />
          ))}
        </span>

        {/* Soft glossy highlight for depth */}
        <span
          aria-hidden="true"
          style={{
            position: "absolute",
            inset: 0,
            background:
              "linear-gradient(180deg, rgba(255,255,255,0.5) 0%, rgba(255,255,255,0) 50%)",
            pointerEvents: "none",
            zIndex: -1,
          }}
        />

        {loading ? (
          <Loader2 size={iconSize} style={{ animation: "spin 0.8s linear infinite" }} />
        ) : (
          <>
            {Icon && iconPosition === "left" && <Icon size={iconSize} strokeWidth={2.25} />}
            <span style={{ lineHeight: 1, whiteSpace: "nowrap" }}>{label}</span>
            {Icon && iconPosition === "right" && <Icon size={iconSize} strokeWidth={2.25} />}
          </>
        )}

        <style>{`
          @keyframes spin {
            from { transform: rotate(0deg); }
            to { transform: rotate(360deg); }
          }
        `}</style>
      </motion.button>
    );
  }
);

DreamyButton.displayName = "DreamyButton";

export default DreamyButton;

An animated call-to-action button with four blurred blobs drifting slowly behind a white canvas and a crisp 1px border. The label, the icon and the colours are all props, so there are no children to pass and nothing to style before it looks finished. It is a motion.button, so it keeps every native button behaviour: focus, disabled, form submission and event handlers.

Installation

Copy the source from the Code tab above into your project as Button.tsx. The styles are inline and the spinner keyframe travels with the file, so there is no stylesheet to import and no Tailwind config to touch.

It imports framer-motion for the drifting blobs and the press animation, and lucide-react for the default icon and the loading spinner:

Terminal

npm install framer-motion lucide-react

The file is marked "use client", which it needs: the animation runs in the browser. In an app router project it can still be imported from a server component.

Usage

Every prop is optional, and the label is a prop rather than a child:

Example.tsx

import Button from "./components/Button";

export default function Example() {
    return <Button label="Start building" size="lg" blobColor="#c4b5fd" />;
}

When to reach for it

The primary action in a hero or a pricing card, where one button is meant to draw the eye and there is room for it to breathe. The soft blob background is built for a light, low-contrast page rather than a dense toolbar.

A single accented action in an otherwise quiet layout: "Start building", "Upgrade", "Generate". Set blobColor to the accent you already use and the button picks up the page palette without any other change.

An async action that needs feedback. loading swaps the icon for a spinner and disables the button in one prop, so there is no separate disabled state to manage.

When not to

Not in a dense interface. Every instance runs four infinite blob animations, so a toolbar or a table with a button per row pays for motion nobody is looking at. A plain button is the right call there.

Not for navigation. This renders a <button>. A control that changes the URL should be an <a> so it can be opened in a new tab, and no prop here changes the element.

Not when the label is long or structured. The label is a single string with white-space: nowrap, so it will push the button wider rather than wrap. Text plus a badge, or two lines of copy, needs a different control.

Accessibility

Focus, activation by Enter and Space, and removal from the tab order when disabled all come from the native <button> underneath. loading sets both the disabled attribute and aria-busy, but the label does not change, so if the wait is long, announce the result from a live region rather than relying on the spinner.

The motion is not gated on prefers-reduced-motion. The blobs drift on a loop for as long as the button is mounted, and the hover and tap scaling are always on. If you support a reduced-motion setting, read it in the copied file and drop the animate values, since there is no prop that turns the animation off.

The label colour is fixed at #3f3f46. canvasColor changes the background underneath it, so a dark canvas will fail contrast until you change the text colour in the source too.

Props

Every prop the Button component accepts, with its type and default value.

Props accepted by the Button component
Prop	Type	Default	Description
`label`	`string`	`Button`	Text label rendered inside the button.
`icon`	`LucideIcon \| null`	`Sparkles`	lucide-react icon component. Pass icon={null} to hide it.
`iconPosition`	`"left" \| "right"`	`left`	Where the icon sits relative to the label.
`size`	`"sm" \| "md" \| "lg"`	`lg`	Visual size of the button.
`loading`	`boolean`	`false`	Shows a spinner and disables interaction.
`fullWidth`	`boolean`	`false`	Stretches the button to fill its container.
`blobColor`	`string`	`#7dd3fc`	Colour used for all the floating blurred blobs on the canvas.
`canvasColor`	`string`	`#ffffff`	Base canvas colour the blobs float on top of.

Notes

The component renders a <style> block defining a global spin keyframe. If your app already defines spin, one will win over the other.

Props spread onto the button after type="button", so passing type="submit" works and makes it submit the surrounding form.

style is applied after the component's own inline styles, so anything you pass through it wins, including borderRadius and boxShadow.

icon={null} removes the icon entirely. Leaving it unset gives you the Sparkles default, which is rarely what a real call to action wants.