Shadcn Hero Section Block Thirteen

Shadcn Hero Section Block Thirteen is the audio and media variant. It is a client component because the hero uses motion.div, AnimatedGroup, useScroll, useTransform, and an animated AudioLinesIcon.

The headline is the visual signature. It wraps around an inline audio tile that uses an amber-to-rose gradient, a hover hue animation, and two stacked waveform icons. Below it, the image illustration behaves like a video card: a dotted overlay, Watch demo button, Unsplash image, scroll-linked y movement, scale, and rotateX.

Where this variant works

Use it for audio tools, recording products, creator software, media AI, podcast products, or anything where the hero should feel closer to a studio demo than a SaaS dashboard.

It can also work for a product video launch page. The illustration already includes a Watch demo control, so the first customization should connect that visual cue to an actual video action.

Implementation details from the source

• A light-mode background image animates from opacity: 0, y: -72, and blur(12px) into place, then hides in dark mode.
• The copy uses AnimatedGroup with staggered children and spring transitions.
• AudioLinesIcon animates SVG path d values on a repeating timeline.
• ImageIllustration uses scroll transforms for y, scale, and rotateX.
• LogoCloud sits under the illustration inside the same centered content column.

What to customize first

Replace the media image and decide what the demo button opens. Then adjust the inline icon if the product is not audio. Keep the headline short enough to wrap around the icon without making the line feel broken.

Frequently asked questions

Does Shadcn Hero Section Block Thirteen support dark mode?

Yes. The background image is light-mode only, while the main section uses theme tokens. Review the media image and the audio gradient in both themes.

Is Shadcn Hero Section Block Thirteen responsive?

Yes. The hero uses a centered max-w-5xl column, responsive headline sizes, and a compact max-w-xs media card inside the illustration.

Can I customize this Tailark block?

Yes. The motion variants, audio icon, media image, demo control, copy, and logo proof can all be edited locally.

What is the best use case for this hero section block?

Use it when motion and media are part of the product promise, especially for recording, playback, or creator workflows.

Related Shadcn UI blocks

• Shadcn Header Block One
• Shadcn Bento Block One

Start from Tailark

Preview Shadcn Hero Section Block Thirteen