Components
Morphing Arrow Button
A directional button that smoothly morphs on hover:
- Starts as a circular icon
- Expands outward in the given direction (left or right)
- Adds a subtle animated line and arrow shift for a modern touch
Ideal for carousels, sliders, or navigation UIs where you want subtle motion without being intrusive.
import MorphingArrowButton from "@/components/ui/morphing-arrow-button";
export default function Demo() {
return (
<div className="h-screen w-screen flex items-center justify-center gap-10 p-4">
<MorphingArrowButton direction="left" />
<MorphingArrowButton direction="right" />
</div>
);
}