proNew106 lines · framer-motion

Gradient CTA Band

One bold band, two buttons, a headline that pulls you in. A full-width rounded call-to-action band on a signal-coloured gradient, with two slow-drifting light blobs and a magnetic primary button that leans toward the cursor.

Use it for: The closing section of a landing page, or a mid-page break, where you want one unmissable, high-contrast push to act.
Themes: Light + dark
License: Commercial use

Live

Ship the agent UI your users actually trust

Copy the code, install from the registry, or hand your AI the prompt. Free components included.

tsx

"use client";

import * as React from "react";
import { motion, useReducedMotion, useSpring } 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;
}

export interface GradientCtaBandProps {
  title?: string;
  description?: string;
  ctaLabel?: string;
  secondaryLabel?: string;
  onCtaClick?: () => void;
  onSecondaryClick?: () => void;
  className?: string;
}

The rest is in Pro.

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

Get Pro

How it behaves

→Two soft blurred light shapes drift slowly behind the content on an infinite loop; prefers-reduced-motion freezes them.
→The primary button is magnetic on pointer devices: it eases toward the cursor within a small radius and springs back on leave.
→Both CTAs are real <button>s, not dummy href="#" anchors, so the band never risks landing inside another link (e.g. a library preview card) and the app wires its own navigation via onCtaClick/onSecondaryClick.
→Band colour is the --signal token blended toward --foreground, so it stays legible and on-brand in both themes.

Accessibility

✓Both buttons are real, keyboard-activatable `<button>` elements with visible focus rings tuned for the high-contrast band background.
✓Magnetic movement only engages for mouse pointers and is skipped under prefers-reduced-motion.
✓Decorative light blobs are aria-hidden.
✓Honours prefers-reduced-motion.