Components
Frame Button
A futuristic button with animated corner frames and tactile motion interactions. On hover the corner chevrons expand outward; supports default, secondary and outline variants with an optional glow.
import { FrameButton } from "@/components/ui/frame-button";
const settings = {
glow: true,
size: 20,
offset: 7.5,
hoverOffset: 7,
};
export default function Demo(props: Partial<typeof settings>) {
const s = { ...settings, ...props };
return (
<div className="h-screen w-screen flex items-center justify-center">
<FrameButton
glow={s.glow}
size={s.size}
offset={s.offset}
hoverOffset={s.hoverOffset}
>
Frame Button
</FrameButton>
</div>
);
}