Newsletter Pill
A morphing subscribe pill that transitions between CTA, email form, and success state with a shared layout animation and confetti burst.
Installation
$shadcn add @yoavi/newsletter-pillAbout
A single pill that morphs through three states — call-to-action, email form, success — using Framer Motion's shared layout animation. No unmounting, no jarring transitions. The pill's size, shape, and position interpolate smoothly between states.
Concept originally by Nitish Khagwal. This is a re-implementation inspired by his design, built from scratch with a few extra touches (accessibility, reduced-motion support, duplicate detection, error handling).
How the morph works
The magic is LayoutGroup + layoutId. Every state's outer container shares the same layoutId="newsletter-pill". Framer Motion calculates the shape and size delta between states and interpolates position, size, and border-radius automatically.
The bell icon and text also share their own layoutId values, so they visually transition from one state to the next instead of unmounting and remounting.
<LayoutGroup>
<motion.button layoutId="newsletter-pill">
<motion.span layoutId="newsletter-icon"><Bell /></motion.span>
<motion.span layoutId="newsletter-text">Notify Me</motion.span>
</motion.button>
</LayoutGroup>