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.
Premium blockBlocks
Add to your projectPremium block
One command adds this component to your project.
1
Run the following command. New project? Run npx shadcn@latest init first to set up Tailwind and path aliases.
npx shadcn@latest add @aicanvas/perspective-showcase-hero2
For dark mode, add the dark class to your <html> element:
<html class="dark">3
This component uses Manrope. Add it to your project:
Optional<link href="https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&display=swap" rel="stylesheet">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.
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. |
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 Hero, Gallery, CSS 3D, and Motion. It ships with both light and dark styling.
- 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.
AI Canvas