Is Perspective Showcase Hero free to use?

Perspective Showcase Hero is a Premium AI Canvas block. Premium unlocks the full source code, the full remix prompt, and one-command installs for every Premium component, block, and template.

How do I install Perspective Showcase Hero?

Premium unlocks one-command installs: run the shadcn CLI with your AI Canvas token, or connect the AI Canvas MCP server and ask your AI editor to install it for you. Premium also unlocks the full remix prompt in the Remix panel.

What is Perspective Showcase Hero built with?

Perspective Showcase Hero is built with React and TypeScript, using Motion and Tailwind CSS. It ships with both light and dark styling.

Where would I use Perspective Showcase Hero?

Common uses include Photography portfolio, Editorial header, and Lookbook intro. Like every AI Canvas block, it is self-contained and drops into any React project.

Can I remix Perspective Showcase Hero with AI?

Yes. Open "Remix with AI" on this page to read the setup and the constants Perspective Showcase Hero is built from. The engine, the markup and the notes on how it works are part of Premium. For the exact block, install it with the one-command CLI.

Perspective Showcase HeroA hero section pairing a split editorial header with an endless CSS 3D carousel, no WebGL: cards tilt continuously with distance from the centre so the row reads as one arc, images counter-zoom inside their frames, and one velocity loop drives drift, drag, wheel, and keyboard input.

PremiumBlocksPhotography portfolioEditorial headerLookbook intro

Add to your projectPremium block

One command adds this component to your project.

Run the following command. New project? Run npx shadcn@latest init first to set up Tailwind and path aliases.

npx shadcn@latest add @aicanvas/••••••••••••

For dark mode, add the dark class to your <html> element:

Optional

<html class="dark">

Install with AI Canvas MCP

With AI Canvas MCP, your AI knows every component we ship. Ask for one inside Claude Code, Codex, or Cursor and it installs the component you pick. Works with any AI Canvas account, free or premium.

Get MCP

Props

Every prop this component accepts. Any other prop is forwarded to the underlying element.

ShowcaseItem

Prop	Type	Default	Description
srcreq	`string`	-	Image URL for the card.
captionreq	`string`	-	Editorial caption under the card, clamped to two lines.
href	`string`	-	Opened in a new tab when the centred card is activated.

PerspectiveShowcaseHero

Prop	Type	Default	Description
items	`ShowcaseItem[]`	DEFAULT_ITEMS	Cards in slot order; the loop wraps them endlessly. Clicking a side card centres it; clicking the centred card opens its href or fires onItemClick. Pass at least 5 items: the wrap ring is items.length * card pitch, so a shorter set is narrower than the stage and cards jump instead of looping. An empty array renders nothing.
titleLine1	`string`	'Everything bends'	First title line, rendered in the ink color.
titleLine2	`string`	'at the edges'	Second title line, rendered in the accent color.
description	`string`	DEFAULT_DESCRIPTION	Paragraph shown beside the title, past the divider.
hint	`string`	'Drag, scroll, or use the arrow keys'	Small helper line under the stage; empty string hides it.
driftSpeed	`number`	14	Idle auto-drift speed in px per second; 0 disables the drift.
zoom	`number`	1.4	Image scale while a card is flat at the centre; eases to 1 as it curls away.
onItemClick	`(item: ShowcaseItem, index: number) => void`	-	Called when the centred card is activated by click, Enter or Space.
className	`string`	-	Extra classes for the section root.

About Perspective Showcase Hero

Perspective Showcase Hero pairs a split editorial header with an endless row of photo cards that curve away from the centre on CSS 3D perspective, no WebGL involved. The card in the middle sits flat and zooms inside its frame while its neighbours rotate toward the vanishing point and wrap around at the edges. The row drifts on its own until you take over by dragging, scrolling sideways, or pressing the arrow keys, and one velocity loop drives all four inputs so releasing a flick coasts back into the drift. Motion handles the track, Tailwind covers the chrome, and captions, a slot counter, and reduced-motion support are built in. Swap in your own photos for a photography portfolio, an editorial cover, or a lookbook intro.

Built with

MotionTailwind CSS

Frequently asked questions

Is Perspective Showcase Hero free to use?: Perspective Showcase Hero is a Premium AI Canvas block. Premium unlocks the full source code, the full remix prompt, and one-command installs for every Premium component, block, and template.
How do I install Perspective Showcase Hero?: Premium unlocks one-command installs: run the shadcn CLI with your AI Canvas token, or connect the AI Canvas MCP server and ask your AI editor to install it for you. Premium also unlocks the full remix prompt in the Remix panel.
What is Perspective Showcase Hero built with?: Perspective Showcase Hero is built with React and TypeScript, using Motion and Tailwind CSS. It ships with both light and dark styling.
Where would I use Perspective Showcase Hero?: Common uses include Photography portfolio, Editorial header, and Lookbook intro. Like every AI Canvas block, it is self-contained and drops into any React project.
Can I remix Perspective Showcase Hero with AI?: Yes. Open "Remix with AI" on this page to read the setup and the constants Perspective Showcase Hero is built from. The engine, the markup and the notes on how it works are part of Premium. For the exact block, install it with the one-command CLI.