Tween UITween UI
7

Blocks

CTA Photo Headline

A call-to-action with staggered avatars and photos tucked into the heading.

A ready-made CTA block. Avatars pop in above a heading that hides two photos in the copy — a pill that grows from the left, then a tilted square that drops into place. The action is a Slide Arrow Button. GSAP-driven.

New tab
Motion designer
Frontend engineer
Product designer
AI engineer

Turn staticAI interface collageinto motionAbstract 3D motion formwith Tween UI

Copy-paste GSAP blocks for React. Themed, reduced-motion ready, and built to drop into any stack.

Installation

pnpm dlx shadcn@latest add @tween-ui/cta-photo-headline

Usage

app/page.tsx
app/page.tsx
import CtaPhotoHeadline from '@/components/tweenui/cta/cta-photo-headline';
 
export default function Page() {
  return <CtaPhotoHeadline />;
}

Pass your own faces, photos, copy, and click handler:

app/page.tsx
app/page.tsx
import CtaPhotoHeadline from '@/components/tweenui/cta/cta-photo-headline';
 
export default function Page() {
  return (
    <CtaPhotoHeadline
      ctaLabel="Browse the blocks"
      onCtaClick={() => console.log('cta')}
      avatars={[
        { src: '/photos/one.jpg', alt: 'Motion designer' },
        { src: '/photos/two.jpg', alt: 'Frontend engineer' },
        { src: '/photos/three.jpg', alt: 'Product designer' },
        { src: '/photos/four.jpg', alt: 'AI engineer' },
      ]}
      inlineImage={{ src: '/photos/ai-interface.jpg', alt: 'AI interface' }}
      accentImage={{ src: '/photos/motion.jpg', alt: 'Motion form' }}
    />
  );
}

Props

PropTypeDefaultDescription
avatars{ src, alt }[]4 sample facesFaces in the row above the heading.
inlineImage{ src, alt? }sample landscapePill photo in the first headline line.
accentImage{ src, alt? }sample portraitTilted photo on the second headline line.
leadstringTurn staticHeadline fragment before the pill.
midstringinto motionHeadline fragment after the pill.
endstringwith Tween UISecond-line headline after the tilted photo.
descriptionstringsample lineSupporting line under the heading.
ctaLabelstringBrowse the blocksLabel on the slide-arrow button.
onCtaClick() => void—Click handler for the CTA button.

Extends native <section> attributes (className, style, …).

Accessibility

Avatars keep their alt text. Headline photos are decorative unless you pass alt. The CTA is a real button. Under prefers-reduced-motion: reduce the avatars and inline photos land in their final state with no motion.