Docs
FamilyButton
FamilyButton
Animated expansion inspired by Family
"use client"
import { useMemo, useState } from "react"
import { AnimatePresence, MotionConfig, motion } from "motion/react"
import useMeasure from "react-use-measure"
import FamilyButton from "../ui/family-button"
export function FamilyButtonDemo() {
return (
<div className=" w-full h-full min-h-[240px]">
<div className="absolute bottom-4 right-4 ">
<FamilyButton>
<MusicPlayerExample />
</FamilyButton>
</div>
</div>
)
}
let tabs = [
{ id: 0, label: "Apple" },
{ id: 1, label: "Spotify" },
]
export function MusicPlayerExample() {
const [activeTab, setActiveTab] = useState(0)
const [direction, setDirection] = useState(0)
const [isAnimating, setIsAnimating] = useState(false)
const [ref, bounds] = useMeasure()
const content = useMemo(() => {
switch (activeTab) {
case 0:
return (
<div className="flex items-center justify-center">
<svg
xmlns="http://www.w3.org/2000/svg"
xmlSpace="preserve"
viewBox="0 0 361 361"
width="5em"
height="5em"
>
<linearGradient
id="a"
x1={180}
x2={180}
y1={358.605}
y2={7.759}
gradientUnits="userSpaceOnUse"
>
<stop
offset={0}
style={{
stopColor: "#fa233b",
}}
/>
<stop
offset={1}
style={{
stopColor: "#fb5c74",
}}
/>
</linearGradient>
<path
d="M360 112.61c0-4.3 0-8.6-.02-12.9-.02-3.62-.06-7.24-.16-10.86-.21-7.89-.68-15.84-2.08-23.64-1.42-7.92-3.75-15.29-7.41-22.49a75.633 75.633 0 0 0-33.06-33.05c-7.19-3.66-14.56-5.98-22.47-7.41C287 .86 279.04.39 271.15.18c-3.62-.1-7.24-.14-10.86-.16-4.3-.02-8.6-.02-12.9-.02H112.61c-4.3 0-8.6 0-12.9.02-3.62.02-7.24.06-10.86.16C80.96.4 73 .86 65.2 2.27c-7.92 1.42-15.28 3.75-22.47 7.41A75.633 75.633 0 0 0 9.67 42.73c-3.66 7.2-5.99 14.57-7.41 22.49C.86 73.02.39 80.98.18 88.86.08 92.48.04 96.1.02 99.72 0 104.01 0 108.31 0 112.61v134.77c0 4.3 0 8.6.02 12.9.02 3.62.06 7.24.16 10.86.21 7.89.68 15.84 2.08 23.64 1.42 7.92 3.75 15.29 7.41 22.49a75.633 75.633 0 0 0 33.06 33.05c7.19 3.66 14.56 5.98 22.47 7.41 7.8 1.4 15.76 1.87 23.65 2.08 3.62.1 7.24.14 10.86.16 4.3.03 8.6.02 12.9.02h134.77c4.3 0 8.6 0 12.9-.02 3.62-.02 7.24-.06 10.86-.16 7.89-.21 15.85-.68 23.65-2.08 7.92-1.42 15.28-3.75 22.47-7.41a75.633 75.633 0 0 0 33.06-33.05c3.66-7.2 5.99-14.57 7.41-22.49 1.4-7.8 1.87-15.76 2.08-23.64.1-3.62.14-7.24.16-10.86.03-4.3.02-8.6.02-12.9V112.61z"
style={{
fillRule: "evenodd",
clipRule: "evenodd",
fill: "url(#a)",
}}
/>
<path
d="M254.5 55c-.87.08-8.6 1.45-9.53 1.64l-107 21.59-.04.01c-2.79.59-4.98 1.58-6.67 3-2.04 1.71-3.17 4.13-3.6 6.95-.09.6-.24 1.82-.24 3.62v133.92c0 3.13-.25 6.17-2.37 8.76s-4.74 3.37-7.81 3.99l-6.99 1.41c-8.84 1.78-14.59 2.99-19.8 5.01-4.98 1.93-8.71 4.39-11.68 7.51-5.89 6.17-8.28 14.54-7.46 22.38.7 6.69 3.71 13.09 8.88 17.82 3.49 3.2 7.85 5.63 12.99 6.66 5.33 1.07 11.01.7 19.31-.98 4.42-.89 8.56-2.28 12.5-4.61 3.9-2.3 7.24-5.37 9.85-9.11 2.62-3.75 4.31-7.92 5.24-12.35.96-4.57 1.19-8.7 1.19-13.26V142.81c0-6.22 1.76-7.86 6.78-9.08 0 0 88.94-17.94 93.09-18.75 5.79-1.11 8.52.54 8.52 6.61v79.29c0 3.14-.03 6.32-2.17 8.92-2.12 2.59-4.74 3.37-7.81 3.99l-6.99 1.41c-8.84 1.78-14.59 2.99-19.8 5.01-4.98 1.93-8.71 4.39-11.68 7.51-5.89 6.17-8.49 14.54-7.67 22.38.7 6.69 3.92 13.09 9.09 17.82 3.49 3.2 7.85 5.56 12.99 6.6 5.33 1.07 11.01.69 19.31-.98 4.42-.89 8.56-2.22 12.5-4.55 3.9-2.3 7.24-5.37 9.85-9.11 2.62-3.75 4.31-7.92 5.24-12.35.96-4.57 1-8.7 1-13.26V64.46c.02-6.16-3.23-9.96-9.02-9.46z"
style={{
fillRule: "evenodd",
clipRule: "evenodd",
fill: "#fff",
}}
/>
</svg>
</div>
)
case 1:
return (
<div className="flex items-center justify-center">
<svg
viewBox="0 0 256 256"
width="5em"
height="5em"
xmlns="http://www.w3.org/2000/svg"
preserveAspectRatio="xMidYMid"
>
<path
d="M128 0C57.308 0 0 57.309 0 128c0 70.696 57.309 128 128 128 70.697 0 128-57.304 128-128C256 57.314 198.697.007 127.998.007l.001-.006Zm58.699 184.614c-2.293 3.76-7.215 4.952-10.975 2.644-30.053-18.357-67.885-22.515-112.44-12.335a7.981 7.981 0 0 1-9.552-6.007 7.968 7.968 0 0 1 6-9.553c48.76-11.14 90.583-6.344 124.323 14.276 3.76 2.308 4.952 7.215 2.644 10.975Zm15.667-34.853c-2.89 4.695-9.034 6.178-13.726 3.289-34.406-21.148-86.853-27.273-127.548-14.92-5.278 1.594-10.852-1.38-12.454-6.649-1.59-5.278 1.386-10.842 6.655-12.446 46.485-14.106 104.275-7.273 143.787 17.007 4.692 2.89 6.175 9.034 3.286 13.72v-.001Zm1.345-36.293C162.457 88.964 94.394 86.71 55.007 98.666c-6.325 1.918-13.014-1.653-14.93-7.978-1.917-6.328 1.65-13.012 7.98-14.935C93.27 62.027 168.434 64.68 215.929 92.876c5.702 3.376 7.566 10.724 4.188 16.405-3.362 5.69-10.73 7.565-16.4 4.187h-.006Z"
fill="#1ED760"
/>
</svg>
</div>
)
default:
return null
}
}, [activeTab])
const handleTabClick = (newTabId: number) => {
if (newTabId !== activeTab && !isAnimating) {
const newDirection = newTabId > activeTab ? 1 : -1
setDirection(newDirection)
setActiveTab(newTabId)
}
}
const variants = {
initial: (direction: number) => ({
x: 300 * direction,
opacity: 0,
filter: "blur(4px)",
}),
active: {
x: 0,
opacity: 1,
filter: "blur(0px)",
},
exit: (direction: number) => ({
x: -300 * direction,
opacity: 0,
filter: "blur(4px)",
}),
}
return (
<div className="flex flex-col items-center pt-4 ">
<div className="flex space-x-1 border border-none rounded-[8px] cursor-pointer bg-neutral-700 px-[3px] py-[3.2px] shadow-inner-shadow">
{tabs.map((tab, i) => (
<button
key={`${tab.id}-i-${i}`}
onClick={() => handleTabClick(tab.id)}
className={`${
activeTab === tab.id ? "text-white " : "hover:text-neutral-300/60"
} relative rounded-[5px] px-3 py-1.5 text-xs sm:text-sm font-medium text-neutral-600 transition focus-visible:outline-1 focus-visible:ring-1 focus-visible:ring-blue-light focus-visible:outline-none`}
style={{ WebkitTapHighlightColor: "transparent" }}
>
{activeTab === tab.id && (
<motion.span
layoutId="family-bubble"
className="absolute inset-0 z-10 bg-neutral-800 mix-blend-difference shadow-inner-shadow"
style={{ borderRadius: 5 }}
transition={{ type: "spring", bounce: 0.19, duration: 0.4 }}
/>
)}
{tab.label}
</button>
))}
</div>
<MotionConfig transition={{ duration: 0.4, type: "spring", bounce: 0.2 }}>
<motion.div
className="relative mx-auto my-[10px] w-[60px] md:w-[150px] overflow-hidden"
initial={false}
animate={{ height: bounds.height }}
>
<div className="md:p-6 p-2" ref={ref}>
<AnimatePresence
custom={direction}
mode="popLayout"
onExitComplete={() => setIsAnimating(false)}
>
<motion.div
key={activeTab}
variants={variants}
initial="initial"
animate="active"
exit="exit"
custom={direction}
onAnimationStart={() => setIsAnimating(true)}
onAnimationComplete={() => setIsAnimating(false)}
>
{content}
</motion.div>
</AnimatePresence>
</div>
</motion.div>
</MotionConfig>
</div>
)
}Installation
npx shadcn@latest add https://cult-ui.com/r/family-button.jsonUsage
import { FamilyButton } from "@/components/ui/family-button"<FamilyButton>
<FamilyButtonHeader className="flex flex-col gap-4 justify-center items-center ">
<div className="p-3 bg-neutral-950 rounded-full">
<Mail className="h-4 w-4 stroke-neutral-200" />
</div>
</FamilyButtonHeader>
<FamilyButtonContent className=" w-48 ">
<p>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Dolorum eos quia
incidunt perspiciatis, ut, deleniti fugit a aliquam sequi, voluptatum
pariatur quaerat. Temporibus sed facere at, voluptas dolorem officiis
incidunt!
</p>
</FamilyButtonContent>
<TextureSeparator />
<div>
<div className="dark:bg-neutral-800 bg-stone-100 pt-px rounded-b-[20px] overflow-hidden ">
<div className="flex flex-col items-center justify-center">
<div className="py-2 px-2">
<p className="font-light dark:text-white text-black">
Texture <span className="font-medium tracking-wide">card</span>
</p>
</div>
</div>
</div>
</div>
</FamilyButton>