Building a Rich Popover with Blur Animations

In this tutorial, we'll build the Rich Popover component step by step. Scroll through to see how each feature is added - the component preview on the right will update as you progress.

Trigger Element

Start with an inline trigger that opens the popover on click.

<Popover>
  <PopoverTrigger asChild>
    <button className="text-brand underline">
      hover or click me
    </button>
  </PopoverTrigger>
  <PopoverContent>
    {/* Popover content */}
  </PopoverContent>
</Popover>

<Popover>  <PopoverTrigger asChild>    <button className="text-brand underline">      hover or click me    </button>  </PopoverTrigger>  <PopoverContent>    {/* Popover content */}  </PopoverContent></Popover>

Rich Content

Structure the popover with icon, title, description, and metadata.

<PopoverContent className="w-80 rounded-2xl bg-black p-4">
  <div className="flex gap-3">
    <div className="size-10 rounded-lg bg-red-600">
      <YouTubeIcon />
    </div>
    <div className="flex-1">
      <h3 className="font-semibold text-white">
        Video Title
        <ExternalLink className="ml-1 inline" />
      </h3>
      <p className="text-white/70 text-sm">
        Description text here...
      </p>
    </div>
  </div>
</PopoverContent>

<PopoverContent className="w-80 rounded-2xl bg-black p-4">  <div className="flex gap-3">    <div className="size-10 rounded-lg bg-red-600">      <YouTubeIcon />    </div>    <div className="flex-1">      <h3 className="font-semibold text-white">        Video Title        <ExternalLink className="ml-1 inline" />      </h3>      <p className="text-white/70 text-sm">        Description text here...      </p>    </div>  </div></PopoverContent>

Entry Animation

Add scale and opacity animation for smooth appearance.

<motion.div
  initial={{ opacity: 0, scale: 0.95, y: 5 }}
  animate={{ opacity: 1, scale: 1, y: 0 }}
  exit={{ opacity: 0, scale: 0.95, y: 5 }}
>
  {/* Popover content */}
</motion.div>

<motion.div  initial={{ opacity: 0, scale: 0.95, y: 5 }}  animate={{ opacity: 1, scale: 1, y: 0 }}  exit={{ opacity: 0, scale: 0.95, y: 5 }}>  {/* Popover content */}</motion.div>

Blur Effect

Add blur transition for a materializing glass effect.

initial={{
  opacity: 0,
  scale: 0.95,
  y: 5,
  filter: "blur(8px)"
}}
animate={{
  opacity: 1,
  scale: 1,
  y: 0,
  filter: "blur(0px)"
}}

initial={{  opacity: 0,  scale: 0.95,  y: 5,  filter: "blur(8px)"}}animate={{  opacity: 1,  scale: 1,  y: 0,  filter: "blur(0px)"}}

The blur creates a "materializing" effect, as if the content is coming into focus from behind frosted glass.

Spring Physics

Use spring animation for natural, responsive movement.

transition={{
  type: "spring",
  stiffness: 500,  // Quick response
  damping: 30,     // Smooth settling
  duration: 0.2    // Fast but visible
}}

transition={{  type: "spring",  stiffness: 500,  // Quick response  damping: 30,     // Smooth settling  duration: 0.2    // Fast but visible}}

Stiffness 500 makes it feel responsive. Duration 0.2s keeps it snappy without being jarring.

Complete

The final component with all features combined.

// The complete component includes:
✓ Scale + opacity animation
✓ Blur materializing effect
✓ Spring physics (stiffness: 500)
✓ Rich content structure
✓ Reduced motion support
✓ Dark theme aesthetic

// The complete component includes:✓ Scale + opacity animation✓ Blur materializing effect✓ Spring physics (stiffness: 500)✓ Rich content structure✓ Reduced motion support✓ Dark theme aesthetic

Try it! Click the trigger to see the animation in action.

Live PreviewStep 1/6

Check out the latest from OpenAI.

Key Takeaways

After building this component, you've learned:

Scale + opacity + blur creates a "materializing" effect
Blur transitions mimic how our eyes focus on appearing content
Spring physics with high stiffness (500) feel more responsive than easings
Dark themes benefit from subtle white borders with transparency
Rich content structure (icon + title + description + meta + action) creates visual hierarchy
Always support reduced motion - instant transitions are still accessible

Install the Component

Want to use this component in your project?

npx smoothui-cli add rich-popover

npx smoothui-cli add rich-popover

Check out the full documentation for all props and variations.