Loading craft...
Loading craft...
Animated pill navigation paired with a blur-fade content stage so you can tell long-form product stories without switching sections.
I saw a hero section on Doppler.com that stacked headline, stats, and integrations onto one cinematic surface, so I re-created the interaction with a springy pill, shared layoutId, blur-in copy, and a generous content stage tuned for narrative-heavy launches.
| Props | Description | Default |
|---|---|---|
tabs | Array of tab objects (`{ label, title, content }`). `content` accepts any React node, so you can inject marketing copy, media, or custom layouts. | [] |
containerClassName | Custom classes for the outer section. Perfect for width constraints, background treatments, or responsive padding tweaks. | - |
tabClassName | Shared classes for each tab button. Useful for typography, casing, spacing, or setting up your own hover states. | - |
activeTabClassName | Classes applied to the animated pill highlight. Combine with borders, gradients, or shadows to match your brand. | - |
contentClassName | Classes for the content surface. Use it to set min-heights, glassmorphism, borders, or layout primitives. | - |