MCPcopy Create free account
hub / github.com/SyntaxUI/syntaxui / ShimmerButton

Function ShimmerButton

src/showcase/components/button/ShimmerButton.tsx:4–41  ·  view source on GitHub ↗
()

Source from the content-addressed store, hash-verified

2import { motion } from 'framer-motion'
3
4const ShimmerButton = () => {
5 return (
6 <motion.button
7 className="inline-flex overflow-hidden rounded-lg bg-[linear-gradient(120deg,#FF98A4_calc(var(--shimmer-button-x)-25%),#f6f6f6_var(--shimmer-button-x),#FF98A4_calc(var(--shimmer-button-x)+25%))] [--shimmer-button-x:0%]"
8 initial={
9 {
10 scale: 1,
11 '--shimmer-button-x': '-100%',
12 } as any
13 }
14 animate={
15 {
16 '--shimmer-button-x': '200%',
17 } as any
18 }
19 transition={{
20 stiffness: 500,
21 damping: 20,
22 type: 'spring',
23 '--shimmer-button-x': {
24 duration: 3,
25 repeat: Infinity,
26 ease: [0.445, 0.05, 0.55, 0.95],
27 },
28 }}
29 whileTap={{
30 scale: 0.95,
31 }}
32 whileHover={{
33 scale: 1.05,
34 }}
35 >
36 <span className="m-[0.125rem] rounded-[calc(0.5rem-0.125rem)] bg-[#fb3b53] px-4 py-1 text-xs text-[#f6f6f6] backdrop-blur-sm">
37 SyntaxUI
38 </span>
39 </motion.button>
40 )
41}
42
43export default ShimmerButton

Callers

nothing calls this directly

Calls

no outgoing calls

Tested by

no test coverage detected