Blocks
CTA Image Fan
A call-to-action section with a fanned photo stack and a shiny button.
A ready-made CTA block. A fanned photo stack auto-advances above the headline, then a shiny button invites the click. Built from Image Fan Slider and Shiny Button.
Ready to accelerate Yourworkflow with AI?
Take the first step towards a more efficient and productive workflow.
Installation
pnpm dlx shadcn@latest add @tween-ui/cta-image-fanUsage
app/page.tsx
import CtaImageFan from '@/components/tweenui/cta/cta-image-fan';
export default function Page() {
return <CtaImageFan />;
}Pass your own photos, copy, and click handler:
app/page.tsx
import CtaImageFan from '@/components/tweenui/cta/cta-image-fan';
export default function Page() {
return (
<CtaImageFan
ctaLabel="Get started"
onCtaClick={() => console.log('cta')}
images={[
{ src: '/photos/one.jpg', alt: 'Portrait one' },
{ src: '/photos/two.jpg', alt: 'Portrait two' },
{ src: '/photos/three.jpg', alt: 'Portrait three' },
{ src: '/photos/four.jpg', alt: 'Portrait four' },
{ src: '/photos/five.jpg', alt: 'Portrait five' },
]}
/>
);
}Props
| Prop | Type | Default | Description |
|---|---|---|---|
images | { src, alt }[] | 5 sample photos | Photos in the fan. Five looks best. |
title | ReactNode | sample heading | Heading under the fan. |
description | string | sample line | Supporting line under the heading. |
ctaLabel | string | Try for free | Label on the shiny button. |
onCtaClick | () => void | — | Click handler for the CTA button. |
Extends native <section> attributes (className, style, …).
Accessibility
Each photo keeps its alt text. The CTA is a real button. Under
prefers-reduced-motion: reduce the fan holds on the first image and the
button shine does not run.