Focus Pull CTA

CTAs

About

An editorial closing call-to-action where hovering or tabbing onto a button racks visual focus onto it, like a camera lens, while the headline and other action blur and fall back.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Focus Pull CTA to your project and fits it to your theme.

Code

How Focus Pull CTA is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

"use client";

import FocusPullCta from "@/components/ui/focus-pull-cta";

export default function FocusPullCtaDemo() {
  return (
    <div className="flex min-h-[480px] w-full items-center bg-[#0c0b0a] px-[8%] py-12">
      <FocusPullCta
        eyebrow="Available from March"
        title={
          <>
            Have something worth building <em>carefully?</em>
          </>
        }
        primary={{ label: "Start a project", onClick: () => {} }}
        secondary={{ label: "See selected work", onClick: () => {} }}
        note="Studio Collective · Independent design practice"
      />
    </div>
  );
}