Components/Morphing Play/Pause Button

Morphing Play/Pause Button

A morphing play/pause button with smooth SVG path animations using Motion spring transitions.

Light Context

Dark Context

import PlayPauseButton from "@/components/ui/play-pause-button"

export default function Example() {
  return <PlayPauseButton />
}

Installation

pnpm dlx shadcn@latest add https://www.roshansahu.site/r/morphing-play-pause-button.json

Import the component in your project pages.

import PlayPauseButton from "@/components/ui/play-pause-button"

export default function Example() {
  return <PlayPauseButton />
}

Configure your component behavior using these props.

Prop	Type	Default	Description
`theme`	`"light" \| "dark"`	"light"	Visual theme for the button icon color.