Morphing Page Dots

Installation

Usage

import MorphingPageDots from "@/components/ruixen/morphing-page-dots";
import { useState } from "react";
 
export default function App() {
  const [currentPage, setCurrentPage] = useState(0);
  const totalPages = 5;
 
  return (
    <MorphingPageDots
      total={totalPages}
      initialPage={currentPage}
      onPageChange={setCurrentPage}
    />
  );
}

Props

Prop	Type	Default	Description
`total`	`number`	-	Total number of pages
`initialPage`	`number`	`0`	Initial active page index
`onPageChange`	`function`	-	Callback when page changes

Features

Morphing Width: Active dot expands to pill shape (28px width)
Ripple Effect: Expanding circle animation on active dot
Arrow Navigation: Chevron arrows for previous/next navigation
Spring Animation: Smooth morphing with spring physics
Disabled States: Arrows disable at first/last page

Animation Details

Active Dot: Morphs from 10px circle to 28px pill
Ripple: Scales from 0.8 to 1.6 with fade out
Spring Config: stiffness: 300, damping: 24
Duration: 0.6s for ripple effect