Building an Animated Social Selector Component

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

Platform Buttons

Start with a row of icon buttons for each social platform.

<div className="flex gap-4">
  {platforms.map((platform) => (
    <button
      key={platform.name}
      onClick={() => setSelected(platform)}
      className="size-9 rounded-full"
    >
      <platform.icon className="size-5" />
    </button>
  ))}
</div>

<div className="flex gap-4">  {platforms.map((platform) => (    <button      key={platform.name}      onClick={() => setSelected(platform)}      className="size-9 rounded-full"    >      <platform.icon className="size-5" />    </button>  ))}</div>

Sliding Indicator

Add an animated background that follows the selected button.

<div className="relative flex gap-4">
  {/* Animated background indicator */}
  <motion.div
    className="absolute size-9 rounded-full bg-primary"
    animate={{ x: selectedIndex * (36 + 16) }}
  />
  {/* Platform buttons */}
  {platforms.map((platform) => (
    <button ...>{platform.icon}</button>
  ))}
</div>

<div className="relative flex gap-4">  {/* Animated background indicator */}  <motion.div    className="absolute size-9 rounded-full bg-primary"    animate={{ x: selectedIndex * (36 + 16) }}  />  {/* Platform buttons */}  {platforms.map((platform) => (    <button ...>{platform.icon}</button>  ))}</div>

Spring Physics

Use spring animation for natural, snappy movement.

<motion.div
  animate={{ x: selectedIndex * (36 + 16) }}
  transition={{
    type: "spring",
    stiffness: 500,  // Snappy response
    damping: 30,     // Prevents oscillation
    duration: 0.25
  }}
/>

<motion.div  animate={{ x: selectedIndex * (36 + 16) }}  transition={{    type: "spring",    stiffness: 500,  // Snappy response    damping: 30,     // Prevents oscillation    duration: 0.25  }}/>

Stiffness 500 creates snappy, responsive movement. Damping 30 prevents the indicator from overshooting.

Dynamic Link

Show the platform link with animated transitions.

<AnimatePresence mode="wait">
  <motion.a
    key={platform.domain}
    href={platform.url}
    initial={{ opacity: 0, y: 10 }}
    animate={{ opacity: 1, y: 0 }}
    exit={{ opacity: 0, y: -10 }}
  >
    @{username} on {platform.domain}
  </motion.a>
</AnimatePresence>

<AnimatePresence mode="wait">  <motion.a    key={platform.domain}    href={platform.url}    initial={{ opacity: 0, y: 10 }}    animate={{ opacity: 1, y: 0 }}    exit={{ opacity: 0, y: -10 }}  >    @{username} on {platform.domain}  </motion.a></AnimatePresence>

Blur Transition

Add blur effect for depth when switching platforms.

initial={{
  opacity: 0,
  y: 10,
  filter: "blur(5px)"
}}
animate={{
  opacity: 1,
  y: 0,
  filter: "blur(0px)"
}}
exit={{
  opacity: 0,
  y: -10,
  filter: "blur(5px)"
}}

initial={{  opacity: 0,  y: 10,  filter: "blur(5px)"}}animate={{  opacity: 1,  y: 0,  filter: "blur(0px)"}}exit={{  opacity: 0,  y: -10,  filter: "blur(5px)"}}

The blur effect creates depth, making content feel like it's materializing from behind a glass surface.

Complete

The final component with all features combined.

// The complete component includes:
✓ Animated sliding indicator
✓ Spring physics (stiffness: 500)
✓ Blur transitions on link change
✓ Reduced motion support
✓ Controlled/uncontrolled modes

// The complete component includes:✓ Animated sliding indicator✓ Spring physics (stiffness: 500)✓ Blur transitions on link change✓ Reduced motion support✓ Controlled/uncontrolled modes

Try it! Click the platform icons to see the animations in action.

Live PreviewStep 1/6

Key Takeaways

After building this component, you've learned:

Sliding indicators with layoutId create smooth following animations
High stiffness (500) makes springs feel snappy and responsive
Damping (30) prevents unwanted oscillation or bounciness
Combine y-offset + blur for elegant content transitions
AnimatePresence with mode="wait" ensures clean exit/enter sequences
Always support reduced motion with useReducedMotion() from Motion

Install the Component

Want to use this component in your project?

npx smoothui-cli add social-selector

npx smoothui-cli add social-selector

Check out the full documentation for all props and variations.