var Component=(()=>{var m=Object.create;var t=Object.defineProperty;var F=Object.getOwnPropertyDescriptor;var u=Object.getOwnPropertyNames;var E=Object.getPrototypeOf,N=Object.prototype.hasOwnProperty;var g=(e,n)=>()=>(n||e((n={exports:{}}).exports,n),n.exports),b=(e,n)=>{for(var s in n)t(e,s,{get:n[s],enumerable:!0})},h=(e,n,s,i)=>{if(n&&typeof n=="object"||typeof n=="function")for(let c of u(n))!N.call(e,c)&&c!==s&&t(e,c,{get:()=>n[c],enumerable:!(i=F(n,c))||i.enumerable});return e};var B=(e,n,s)=>(s=e!=null?m(E(e)):{},h(n||!e||!e.__esModule?t(s,"default",{value:e,enumerable:!0}):s,e)),f=e=>h(t({},"__esModule",{value:!0}),e);var C=g((S,y)=>{y.exports=_jsx_runtime});var v={};b(v,{default:()=>D,frontmatter:()=>_});var l=B(C()),_={title:"Shiny Button",description:"A shiny button with a sleek animation effect."};function A(e){let n={a:"a",code:"code",div:"div",h2:"h2",p:"p",pre:"pre",span:"span",...e.components},{ComponentPreview:s,ComponentSource:i,InstallationTabs:c,Step:r,Steps:d,TabsContent:a,UsageTabs:p}=n;return s||o("ComponentPreview",!0),i||o("ComponentSource",!0),c||o("InstallationTabs",!0),r||o("Step",!0),d||o("Steps",!0),a||o("TabsContent",!0),p||o("UsageTabs",!0),(0,l.jsxs)(l.Fragment,{children:[(0,l.jsx)(s,{name:"shiny-button-demo",children:(0,l.jsx)(n.div,{"data-rehype-pretty-code-fragment":"",children:(0,l.jsx)(n.pre,{"data-language":"tsx","data-theme":"default",__rawString__:`import { ShinyButton } from "@/components/shiny-button"; export const ShinyButtonDemo = () => { return Button; }; `,__src__:"/vercel/path0/registry/react/examples/shiny-button-demo.tsx",children:(0,l.jsxs)(n.code,{"data-language":"tsx","data-theme":"default","data-line-numbers":"",children:[(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#5DE4C7"},children:"import "}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:"{"}),(0,l.jsx)(n.span,{style:{color:"#ADD7FF"},children:" ShinyButton"}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:" }"}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:" from"}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:' "'}),(0,l.jsx)(n.span,{style:{color:"#5DE4C7"},children:"@/components/shiny-button"}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:'"'}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:";"})]}),` `,(0,l.jsx)(n.span,{className:"line",children:" "}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#5DE4C7"},children:"export"}),(0,l.jsx)(n.span,{style:{color:"#91B4D5"},children:" const"}),(0,l.jsx)(n.span,{style:{color:"#ADD7FF"},children:" ShinyButtonDemo"}),(0,l.jsx)(n.span,{style:{color:"#91B4D5"},children:" ="}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:" () "}),(0,l.jsx)(n.span,{style:{color:"#91B4D5"},children:"=>"}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:" {"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#5DE4C7C0"},children:" return"}),(0,l.jsx)(n.span,{style:{color:"#E4F0FB"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#5DE4C7"},children:"ShinyButton"}),(0,l.jsx)(n.span,{style:{color:"#E4F0FB"},children:">Button"}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:";"})]}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:"};"})})]})})})}),` `,(0,l.jsxs)(n.h2,{id:"installation",children:[(0,l.jsx)(n.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#installation",children:(0,l.jsx)(n.span,{className:"icon icon-link"})}),"Installation"]}),` `,(0,l.jsxs)(p,{children:[(0,l.jsx)(a,{value:"React",children:(0,l.jsxs)(c,{children:[(0,l.jsx)(a,{value:"cli",children:(0,l.jsx)(n.div,{"data-rehype-pretty-code-fragment":"",children:(0,l.jsx)(n.pre,{"data-language":"bash","data-theme":"default",__rawString__:`npx shadcn@latest add https://atlasui.dev/r/shiny-button.json `,__npm__:`npx shadcn@latest add https://atlasui.dev/r/shiny-button.json `,__yarn__:`yarn shadcn@latest add https://atlasui.dev/r/shiny-button.json `,__pnpm__:`pnpm dlx shadcn@latest add https://atlasui.dev/r/shiny-button.json `,__bun__:`bunx --bun shadcn@latest add https://atlasui.dev/r/shiny-button.json `,children:(0,l.jsx)(n.code,{"data-language":"bash","data-theme":"default","data-line-numbers":"",children:(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#91B4D5"},children:"npx"}),(0,l.jsx)(n.span,{style:{color:"#ADD7FF"},children:" shadcn@latest"}),(0,l.jsx)(n.span,{style:{color:"#ADD7FF"},children:" add"}),(0,l.jsx)(n.span,{style:{color:"#ADD7FF"},children:" https://atlasui.dev/r/shiny-button.json"})]})})})})}),(0,l.jsx)(a,{value:"manual",children:(0,l.jsxs)(d,{children:[(0,l.jsx)(r,{children:"Install the following dependencies:"}),(0,l.jsx)(n.div,{"data-rehype-pretty-code-fragment":"",children:(0,l.jsx)(n.pre,{"data-language":"bash","data-theme":"default",__rawString__:`npm install motion `,__npm__:`npm install motion `,__yarn__:`yarn add motion `,__pnpm__:`pnpm add motion `,__bun__:`bun add motion `,children:(0,l.jsx)(n.code,{"data-language":"bash","data-theme":"default","data-line-numbers":"",children:(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#91B4D5"},children:"npm"}),(0,l.jsx)(n.span,{style:{color:"#ADD7FF"},children:" install"}),(0,l.jsx)(n.span,{style:{color:"#ADD7FF"},children:" motion"})]})})})}),(0,l.jsx)(r,{children:"Copy and paste the following code into your project."}),(0,l.jsx)(i,{name:"shiny-button",filePath:"components/ui/shiny-button.tsx",children:(0,l.jsx)(n.div,{"data-rehype-pretty-code-fragment":"",children:(0,l.jsx)(n.pre,{"data-language":"tsx","data-theme":"default",__rawString__:`"use client"; import { cn } from "@/lib/utils"; import { motion, MotionProps } from "motion/react"; import { ButtonHTMLAttributes } from "react"; type MergedProps = Omit< ButtonHTMLAttributes, keyof MotionProps > & MotionProps; interface ShinyButtonProps extends MergedProps { children: React.ReactNode; className?: string; } export const ShinyButton = ({ children, className, ...props }: ShinyButtonProps) => { return ( {children} ); }; `,__src__:"registry/react/atlasui/shiny-button.tsx",children:(0,l.jsxs)(n.code,{"data-language":"tsx","data-theme":"default","data-line-numbers":"",children:[(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:'"'}),(0,l.jsx)(n.span,{style:{color:"#5DE4C7"},children:"use client"}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:'"'}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:";"})]}),` `,(0,l.jsx)(n.span,{className:"line",children:" "}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#5DE4C7"},children:"import "}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:"{"}),(0,l.jsx)(n.span,{style:{color:"#ADD7FF"},children:" cn"}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:" }"}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:" from"}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:' "'}),(0,l.jsx)(n.span,{style:{color:"#5DE4C7"},children:"@/lib/utils"}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:'"'}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:";"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#5DE4C7"},children:"import "}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:"{"}),(0,l.jsx)(n.span,{style:{color:"#ADD7FF"},children:" motion"}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:","}),(0,l.jsx)(n.span,{style:{color:"#ADD7FF"},children:" MotionProps"}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:" }"}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:" from"}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:' "'}),(0,l.jsx)(n.span,{style:{color:"#5DE4C7"},children:"motion/react"}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:'"'}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:";"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#5DE4C7"},children:"import "}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:"{"}),(0,l.jsx)(n.span,{style:{color:"#ADD7FF"},children:" ButtonHTMLAttributes"}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:" }"}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:" from"}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:' "'}),(0,l.jsx)(n.span,{style:{color:"#5DE4C7"},children:"react"}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:'"'}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:";"})]}),` `,(0,l.jsx)(n.span,{className:"line",children:" "}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#91B4D5"},children:"type"}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:" MergedProps"}),(0,l.jsx)(n.span,{style:{color:"#91B4D5"},children:" ="}),(0,l.jsx)(n.span,{style:{color:"#A6ACCDC0"},children:" Omit"}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:"<"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#A6ACCDC0"},children:" ButtonHTMLAttributes"}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:"<"}),(0,l.jsx)(n.span,{style:{color:"#A6ACCDC0"},children:"HTMLButtonElement"}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:">,"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#91B4D5"},children:" keyof"}),(0,l.jsx)(n.span,{style:{color:"#A6ACCDC0"},children:" MotionProps"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:">"}),(0,l.jsx)(n.span,{style:{color:"#91B4D5"},children:" &"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#A6ACCDC0"},children:" MotionProps"}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:";"})]}),` `,(0,l.jsx)(n.span,{className:"line",children:" "}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#91B4D5"},children:"interface"}),(0,l.jsx)(n.span,{style:{color:"#A6ACCDC0"},children:" ShinyButtonProps"}),(0,l.jsx)(n.span,{style:{color:"#5DE4C7"},children:" extends"}),(0,l.jsx)(n.span,{style:{color:"#ADD7FF"},children:" MergedProps"}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:" {"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:" children"}),(0,l.jsx)(n.span,{style:{color:"#91B4D5"},children:":"}),(0,l.jsx)(n.span,{style:{color:"#A6ACCDC0"},children:" React"}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:"."}),(0,l.jsx)(n.span,{style:{color:"#A6ACCDC0"},children:"ReactNode"}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:";"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:" className"}),(0,l.jsx)(n.span,{style:{color:"#91B4D5"},children:"?:"}),(0,l.jsx)(n.span,{style:{color:"#A6ACCDC0"},children:" string"}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:";"})]}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:"}"})}),` `,(0,l.jsx)(n.span,{className:"line",children:" "}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#5DE4C7"},children:"export"}),(0,l.jsx)(n.span,{style:{color:"#91B4D5"},children:" const"}),(0,l.jsx)(n.span,{style:{color:"#ADD7FF"},children:" ShinyButton"}),(0,l.jsx)(n.span,{style:{color:"#91B4D5"},children:" ="}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:" ({"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#E4F0FB"},children:" children"}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:","})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#E4F0FB"},children:" className"}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:","})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#91B4D5"},children:" ..."}),(0,l.jsx)(n.span,{style:{color:"#E4F0FB"},children:"props"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:"}"}),(0,l.jsx)(n.span,{style:{color:"#91B4D5"},children:":"}),(0,l.jsx)(n.span,{style:{color:"#A6ACCDC0"},children:" ShinyButtonProps"}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:") "}),(0,l.jsx)(n.span,{style:{color:"#91B4D5"},children:"=>"}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:" {"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#5DE4C7C0"},children:" return"}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:" ("})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#E4F0FB"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#5DE4C7"},children:"motion.button"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#91B4D5",fontStyle:"italic"},children:" className"}),(0,l.jsx)(n.span,{style:{color:"#91B4D5"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#E4F0FB"},children:"{"}),(0,l.jsx)(n.span,{style:{color:"#E4F0FBD0"},children:"cn"}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:"("}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:'"'}),(0,l.jsx)(n.span,{style:{color:"#5DE4C7"},children:"radial-gradient relative rounded-md px-6 py-2"}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:'"'}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:","}),(0,l.jsx)(n.span,{style:{color:"#E4F0FB"},children:" className"}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:")"}),(0,l.jsx)(n.span,{style:{color:"#E4F0FB"},children:"}"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#91B4D5",fontStyle:"italic"},children:" initial"}),(0,l.jsx)(n.span,{style:{color:"#91B4D5"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#E4F0FB"},children:"{"}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:"{"}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:' "'}),(0,l.jsx)(n.span,{style:{color:"#5DE4C7"},children:"--x"}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:'"'}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:":"}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:' "'}),(0,l.jsx)(n.span,{style:{color:"#5DE4C7"},children:"100%"}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:'"'}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:","}),(0,l.jsx)(n.span,{style:{color:"#ADD7FF"},children:" scale"}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:":"}),(0,l.jsx)(n.span,{style:{color:"#5DE4C7"},children:" 1"}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:" }"}),(0,l.jsx)(n.span,{style:{color:"#E4F0FB"},children:"}"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#91B4D5",fontStyle:"italic"},children:" animate"}),(0,l.jsx)(n.span,{style:{color:"#91B4D5"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#E4F0FB"},children:"{"}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:"{"}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:' "'}),(0,l.jsx)(n.span,{style:{color:"#5DE4C7"},children:"--x"}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:'"'}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:":"}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:' "'}),(0,l.jsx)(n.span,{style:{color:"#5DE4C7"},children:"-100%"}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:'"'}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:" }"}),(0,l.jsx)(n.span,{style:{color:"#E4F0FB"},children:"}"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#91B4D5",fontStyle:"italic"},children:" whileTap"}),(0,l.jsx)(n.span,{style:{color:"#91B4D5"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#E4F0FB"},children:"{"}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:"{"}),(0,l.jsx)(n.span,{style:{color:"#ADD7FF"},children:" scale"}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:":"}),(0,l.jsx)(n.span,{style:{color:"#5DE4C7"},children:" 0.97"}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:" }"}),(0,l.jsx)(n.span,{style:{color:"#E4F0FB"},children:"}"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#91B4D5",fontStyle:"italic"},children:" transition"}),(0,l.jsx)(n.span,{style:{color:"#91B4D5"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#E4F0FB"},children:"{"}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:"{"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#ADD7FF"},children:" repeat"}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:":"}),(0,l.jsx)(n.span,{style:{color:"#5DE4C7"},children:" Infinity"}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:","})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#ADD7FF"},children:" repeatType"}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:":"}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:' "'}),(0,l.jsx)(n.span,{style:{color:"#5DE4C7"},children:"loop"}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:'"'}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:","})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#ADD7FF"},children:" repeatDelay"}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:":"}),(0,l.jsx)(n.span,{style:{color:"#5DE4C7"},children:" 1"}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:","})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#ADD7FF"},children:" type"}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:":"}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:' "'}),(0,l.jsx)(n.span,{style:{color:"#5DE4C7"},children:"spring"}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:'"'}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:","})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#ADD7FF"},children:" stiffness"}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:":"}),(0,l.jsx)(n.span,{style:{color:"#5DE4C7"},children:" 20"}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:","})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#ADD7FF"},children:" damping"}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:":"}),(0,l.jsx)(n.span,{style:{color:"#5DE4C7"},children:" 15"}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:","})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#ADD7FF"},children:" mass"}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:":"}),(0,l.jsx)(n.span,{style:{color:"#5DE4C7"},children:" 2"}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:","})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#ADD7FF"},children:" scale"}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:":"}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:" {"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#ADD7FF"},children:" type"}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:":"}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:' "'}),(0,l.jsx)(n.span,{style:{color:"#5DE4C7"},children:"spring"}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:'"'}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:","})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#ADD7FF"},children:" stiffness"}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:":"}),(0,l.jsx)(n.span,{style:{color:"#5DE4C7"},children:" 10"}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:","})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#ADD7FF"},children:" damping"}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:":"}),(0,l.jsx)(n.span,{style:{color:"#5DE4C7"},children:" 5"}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:","})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#ADD7FF"},children:" mass"}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:":"}),(0,l.jsx)(n.span,{style:{color:"#5DE4C7"},children:" 0.1"}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:","})]}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:" },"})}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:" }"}),(0,l.jsx)(n.span,{style:{color:"#E4F0FB"},children:"}"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#E4F0FB"},children:" {"}),(0,l.jsx)(n.span,{style:{color:"#91B4D5"},children:"..."}),(0,l.jsx)(n.span,{style:{color:"#E4F0FB"},children:"props}"})]}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#E4F0FB"},children:" >"})}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#E4F0FB"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#5DE4C7"},children:"span"}),(0,l.jsx)(n.span,{style:{color:"#91B4D5",fontStyle:"italic"},children:" className"}),(0,l.jsx)(n.span,{style:{color:"#91B4D5"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:'"'}),(0,l.jsx)(n.span,{style:{color:"#5DE4C7"},children:"linear-mask relative block h-full w-full font-light tracking-wide text-neutral-100"}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:'"'}),(0,l.jsx)(n.span,{style:{color:"#E4F0FB"},children:">"})]}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#E4F0FB"},children:" {children}"})}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#E4F0FB"},children:" "})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#E4F0FB"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#5DE4C7"},children:"span"}),(0,l.jsx)(n.span,{style:{color:"#91B4D5",fontStyle:"italic"},children:" className"}),(0,l.jsx)(n.span,{style:{color:"#91B4D5"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:'"'}),(0,l.jsx)(n.span,{style:{color:"#5DE4C7"},children:"linear-overlay absolute inset-0 block rounded-md p-px"}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:'"'}),(0,l.jsx)(n.span,{style:{color:"#E4F0FB"},children:" />"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#E4F0FB"},children:" "})]}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:" );"})}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:"};"})})]})})})}),(0,l.jsxs)(r,{children:["Update ",(0,l.jsx)(n.code,{"data-line-numbers":"",children:"globals.css"})]}),(0,l.jsx)(n.div,{"data-rehype-pretty-code-fragment":"",children:(0,l.jsx)(n.pre,{"data-language":"css","data-theme":"default",__rawString__:`.radial-gradient { background: radial-gradient( circle at 50% 0%, rgba(250, 250, 250, 0.05) 0%, transparent 60% ), rgba(15, 15, 15, 1); } .linear-mask { mask-image: linear-gradient( -75deg, white calc(var(--x) + 20%), transparent calc(var(--x) + 30%), white calc(var(--x) + 100%) ); } .linear-overlay { background-image: linear-gradient( -75deg, rgba(255, 255, 255, 0.1) calc(var(--x) + 20%), rgba(255, 255, 255, 0.5) calc(var(--x) + 25%), rgba(255, 255, 255, 0.1) calc(var(--x) + 100%) ); mask: linear-gradient(black, black) content-box, linear-gradient(black, black); mask-composite: exclude; } `,children:(0,l.jsxs)(n.code,{"data-language":"css","data-theme":"default","data-line-numbers":"",children:[(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#E4F0FBD0",fontStyle:"italic"},children:"."}),(0,l.jsx)(n.span,{style:{color:"#5FB3A1",fontStyle:"italic"},children:"radial-gradient"}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:" {"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#ADD7FF"},children:" background"}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:":"})]}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:" radial-gradient("})}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#ADD7FF"},children:" circle"}),(0,l.jsx)(n.span,{style:{color:"#91B4D5"},children:" at"}),(0,l.jsx)(n.span,{style:{color:"#5DE4C7"},children:" 50%"}),(0,l.jsx)(n.span,{style:{color:"#5DE4C7"},children:" 0%"}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:","})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:" rgba("}),(0,l.jsx)(n.span,{style:{color:"#5DE4C7"},children:"250"}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:", "}),(0,l.jsx)(n.span,{style:{color:"#5DE4C7"},children:"250"}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:", "}),(0,l.jsx)(n.span,{style:{color:"#5DE4C7"},children:"250"}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:", "}),(0,l.jsx)(n.span,{style:{color:"#5DE4C7"},children:"0.05"}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:") "}),(0,l.jsx)(n.span,{style:{color:"#5DE4C7"},children:"0%"}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:","})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#ADD7FF"},children:" transparent"}),(0,l.jsx)(n.span,{style:{color:"#5DE4C7"},children:" 60%"})]}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:" ),"})}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:" rgba("}),(0,l.jsx)(n.span,{style:{color:"#5DE4C7"},children:"15"}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:", "}),(0,l.jsx)(n.span,{style:{color:"#5DE4C7"},children:"15"}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:", "}),(0,l.jsx)(n.span,{style:{color:"#5DE4C7"},children:"15"}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:", "}),(0,l.jsx)(n.span,{style:{color:"#5DE4C7"},children:"1"}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:");"})]}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:"}"})}),` `,(0,l.jsx)(n.span,{className:"line",children:" "}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#E4F0FBD0",fontStyle:"italic"},children:"."}),(0,l.jsx)(n.span,{style:{color:"#5FB3A1",fontStyle:"italic"},children:"linear-mask"}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:" {"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#ADD7FF"},children:" mask-image"}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:": linear-gradient("})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#5DE4C7"},children:" -75deg"}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:","})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#ADD7FF"},children:" white"}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:" calc(var(--x) "}),(0,l.jsx)(n.span,{style:{color:"#91B4D5"},children:"+"}),(0,l.jsx)(n.span,{style:{color:"#5DE4C7"},children:" 20%"}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:"),"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#ADD7FF"},children:" transparent"}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:" calc(var(--x) "}),(0,l.jsx)(n.span,{style:{color:"#91B4D5"},children:"+"}),(0,l.jsx)(n.span,{style:{color:"#5DE4C7"},children:" 30%"}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:"),"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#ADD7FF"},children:" white"}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:" calc(var(--x) "}),(0,l.jsx)(n.span,{style:{color:"#91B4D5"},children:"+"}),(0,l.jsx)(n.span,{style:{color:"#5DE4C7"},children:" 100%"}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:")"})]}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:" );"})}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:"}"})}),` `,(0,l.jsx)(n.span,{className:"line",children:" "}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#E4F0FBD0",fontStyle:"italic"},children:"."}),(0,l.jsx)(n.span,{style:{color:"#5FB3A1",fontStyle:"italic"},children:"linear-overlay"}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:" {"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#ADD7FF"},children:" background-image"}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:": linear-gradient("})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#5DE4C7"},children:" -75deg"}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:","})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:" rgba("}),(0,l.jsx)(n.span,{style:{color:"#5DE4C7"},children:"255"}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:", "}),(0,l.jsx)(n.span,{style:{color:"#5DE4C7"},children:"255"}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:", "}),(0,l.jsx)(n.span,{style:{color:"#5DE4C7"},children:"255"}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:", "}),(0,l.jsx)(n.span,{style:{color:"#5DE4C7"},children:"0.1"}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:") calc(var(--x) "}),(0,l.jsx)(n.span,{style:{color:"#91B4D5"},children:"+"}),(0,l.jsx)(n.span,{style:{color:"#5DE4C7"},children:" 20%"}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:"),"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:" rgba("}),(0,l.jsx)(n.span,{style:{color:"#5DE4C7"},children:"255"}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:", "}),(0,l.jsx)(n.span,{style:{color:"#5DE4C7"},children:"255"}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:", "}),(0,l.jsx)(n.span,{style:{color:"#5DE4C7"},children:"255"}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:", "}),(0,l.jsx)(n.span,{style:{color:"#5DE4C7"},children:"0.5"}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:") calc(var(--x) "}),(0,l.jsx)(n.span,{style:{color:"#91B4D5"},children:"+"}),(0,l.jsx)(n.span,{style:{color:"#5DE4C7"},children:" 25%"}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:"),"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:" rgba("}),(0,l.jsx)(n.span,{style:{color:"#5DE4C7"},children:"255"}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:", "}),(0,l.jsx)(n.span,{style:{color:"#5DE4C7"},children:"255"}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:", "}),(0,l.jsx)(n.span,{style:{color:"#5DE4C7"},children:"255"}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:", "}),(0,l.jsx)(n.span,{style:{color:"#5DE4C7"},children:"0.1"}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:") calc(var(--x) "}),(0,l.jsx)(n.span,{style:{color:"#91B4D5"},children:"+"}),(0,l.jsx)(n.span,{style:{color:"#5DE4C7"},children:" 100%"}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:")"})]}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:" );"})}),` `,(0,l.jsx)(n.span,{className:"line",children:" "}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#ADD7FF"},children:" mask"}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:":"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:" linear-gradient("}),(0,l.jsx)(n.span,{style:{color:"#ADD7FF"},children:"black"}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:", "}),(0,l.jsx)(n.span,{style:{color:"#ADD7FF"},children:"black"}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:") "}),(0,l.jsx)(n.span,{style:{color:"#ADD7FF"},children:"content-box"}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:","})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:" linear-gradient("}),(0,l.jsx)(n.span,{style:{color:"#ADD7FF"},children:"black"}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:", "}),(0,l.jsx)(n.span,{style:{color:"#ADD7FF"},children:"black"}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:");"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#ADD7FF"},children:" mask-composite"}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:": "}),(0,l.jsx)(n.span,{style:{color:"#ADD7FF"},children:"exclude"}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:";"})]}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:"}"})})]})})}),(0,l.jsx)(r,{children:"Update the import paths to match your project setup."})]})})]})}),(0,l.jsx)(a,{value:"HTML",children:(0,l.jsxs)(c,{children:[(0,l.jsx)(a,{value:"cli",children:(0,l.jsx)(n.div,{"data-rehype-pretty-code-fragment":"",children:(0,l.jsx)(n.pre,{"data-language":"bash","data-theme":"default",__rawString__:`npx shadcn@latest add https://atlasui.dev/r/shiny-button-html.json `,__npm__:`npx shadcn@latest add https://atlasui.dev/r/shiny-button-html.json `,__yarn__:`yarn shadcn@latest add https://atlasui.dev/r/shiny-button-html.json `,__pnpm__:`pnpm dlx shadcn@latest add https://atlasui.dev/r/shiny-button-html.json `,__bun__:`bunx --bun shadcn@latest add https://atlasui.dev/r/shiny-button-html.json `,children:(0,l.jsx)(n.code,{"data-language":"bash","data-theme":"default","data-line-numbers":"",children:(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#91B4D5"},children:"npx"}),(0,l.jsx)(n.span,{style:{color:"#ADD7FF"},children:" shadcn@latest"}),(0,l.jsx)(n.span,{style:{color:"#ADD7FF"},children:" add"}),(0,l.jsx)(n.span,{style:{color:"#ADD7FF"},children:" https://atlasui.dev/r/shiny-button-html.json"})]})})})})}),(0,l.jsx)(a,{value:"manual",children:(0,l.jsxs)(d,{children:[(0,l.jsx)(r,{children:"Install the following dependencies:"}),(0,l.jsx)(n.div,{"data-rehype-pretty-code-fragment":"",children:(0,l.jsx)(n.pre,{"data-language":"bash","data-theme":"default",__rawString__:`npm install motion `,__npm__:`npm install motion `,__yarn__:`yarn add motion `,__pnpm__:`pnpm add motion `,__bun__:`bun add motion `,children:(0,l.jsx)(n.code,{"data-language":"bash","data-theme":"default","data-line-numbers":"",children:(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#91B4D5"},children:"npm"}),(0,l.jsx)(n.span,{style:{color:"#ADD7FF"},children:" install"}),(0,l.jsx)(n.span,{style:{color:"#ADD7FF"},children:" motion"})]})})})}),(0,l.jsx)(r,{children:"Copy and paste the following code into your project."}),(0,l.jsx)(n.div,{"data-rehype-pretty-code-fragment":"",children:(0,l.jsx)(n.pre,{"data-language":"html","data-theme":"default",__rawString__:` `,children:(0,l.jsxs)(n.code,{"data-language":"html","data-theme":"default","data-line-numbers":"",children:[(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#E4F0FB"},children:"<"}),(0,l.jsx)(n.span,{style:{color:"#5DE4C7"},children:"button"}),(0,l.jsx)(n.span,{style:{color:"#5FB3A1",fontStyle:"italic"},children:" class"}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:'"'}),(0,l.jsx)(n.span,{style:{color:"#5DE4C7"},children:"shiny-button"}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:'"'}),(0,l.jsx)(n.span,{style:{color:"#E4F0FB"},children:">"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#E4F0FB"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#5DE4C7"},children:"span"}),(0,l.jsx)(n.span,{style:{color:"#5FB3A1",fontStyle:"italic"},children:" class"}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:'"'}),(0,l.jsx)(n.span,{style:{color:"#5DE4C7"},children:"button-content"}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:'"'}),(0,l.jsx)(n.span,{style:{color:"#E4F0FB"},children:">"}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:"Button"}),(0,l.jsx)(n.span,{style:{color:"#E4F0FB"},children:""})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#E4F0FB"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#5DE4C7"},children:"span"}),(0,l.jsx)(n.span,{style:{color:"#5FB3A1",fontStyle:"italic"},children:" class"}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:'"'}),(0,l.jsx)(n.span,{style:{color:"#5DE4C7"},children:"shiny-overlay"}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:'"'}),(0,l.jsx)(n.span,{style:{color:"#E4F0FB"},children:">"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#E4F0FB"},children:""})]})]})})}),(0,l.jsxs)(r,{children:["Add ",(0,l.jsx)(n.code,{"data-line-numbers":"",children:"style.css"})]}),(0,l.jsx)(n.div,{"data-rehype-pretty-code-fragment":"",children:(0,l.jsx)(n.pre,{"data-language":"css","data-theme":"default",__rawString__:`.shiny-button { position: relative; padding: 0.5rem 1.5rem; position: relative; border: none; border-radius: 8px; background: radial-gradient( circle at 50% 0%, rgba(250, 250, 250, 0.05) 0%, transparent 60% ), rgba(15, 15, 15, 1); cursor: pointer; overflow: hidden; } .button-content { position: relative; color: #f5f5f5; font-weight: 300; letter-spacing: 0.025em; height: 100%; width: 100%; display: block; mask-image: linear-gradient( -75deg, white calc(var(--x) + 20%), transparent calc(var(--x) + 30%), white calc(var(--x) + 100%) ); } .shiny-overlay { position: absolute; inset: 0px; padding: 1px; border-radius: 8px; display: block; background-image: linear-gradient( -75deg, rgba(255, 255, 255, 0.1) calc(var(--x) + 20%), rgba(255, 255, 255, 0.5) calc(var(--x) + 25%), rgba(255, 255, 255, 0.1) calc(var(--x) + 100%) ); mask: linear-gradient(black, black) content-box, linear-gradient(black, black); mask-composite: exclude; pointer-events: none; } `,children:(0,l.jsxs)(n.code,{"data-language":"css","data-theme":"default","data-line-numbers":"",children:[(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#E4F0FBD0",fontStyle:"italic"},children:"."}),(0,l.jsx)(n.span,{style:{color:"#5FB3A1",fontStyle:"italic"},children:"shiny-button"}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:" {"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#ADD7FF"},children:" position"}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:": "}),(0,l.jsx)(n.span,{style:{color:"#ADD7FF"},children:"relative"}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:";"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#ADD7FF"},children:" padding"}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:": "}),(0,l.jsx)(n.span,{style:{color:"#5DE4C7"},children:"0.5rem"}),(0,l.jsx)(n.span,{style:{color:"#5DE4C7"},children:" 1.5rem"}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:";"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#ADD7FF"},children:" position"}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:": "}),(0,l.jsx)(n.span,{style:{color:"#ADD7FF"},children:"relative"}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:";"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#ADD7FF"},children:" border"}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:": "}),(0,l.jsx)(n.span,{style:{color:"#ADD7FF"},children:"none"}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:";"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#ADD7FF"},children:" border-radius"}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:": "}),(0,l.jsx)(n.span,{style:{color:"#5DE4C7"},children:"8px"}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:";"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#ADD7FF"},children:" background"}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:":"})]}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:" radial-gradient("})}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#ADD7FF"},children:" circle"}),(0,l.jsx)(n.span,{style:{color:"#91B4D5"},children:" at"}),(0,l.jsx)(n.span,{style:{color:"#5DE4C7"},children:" 50%"}),(0,l.jsx)(n.span,{style:{color:"#5DE4C7"},children:" 0%"}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:","})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:" rgba("}),(0,l.jsx)(n.span,{style:{color:"#5DE4C7"},children:"250"}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:", "}),(0,l.jsx)(n.span,{style:{color:"#5DE4C7"},children:"250"}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:", "}),(0,l.jsx)(n.span,{style:{color:"#5DE4C7"},children:"250"}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:", "}),(0,l.jsx)(n.span,{style:{color:"#5DE4C7"},children:"0.05"}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:") "}),(0,l.jsx)(n.span,{style:{color:"#5DE4C7"},children:"0%"}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:","})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#ADD7FF"},children:" transparent"}),(0,l.jsx)(n.span,{style:{color:"#5DE4C7"},children:" 60%"})]}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:" ),"})}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:" rgba("}),(0,l.jsx)(n.span,{style:{color:"#5DE4C7"},children:"15"}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:", "}),(0,l.jsx)(n.span,{style:{color:"#5DE4C7"},children:"15"}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:", "}),(0,l.jsx)(n.span,{style:{color:"#5DE4C7"},children:"15"}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:", "}),(0,l.jsx)(n.span,{style:{color:"#5DE4C7"},children:"1"}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:");"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#ADD7FF"},children:" cursor"}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:": "}),(0,l.jsx)(n.span,{style:{color:"#ADD7FF"},children:"pointer"}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:";"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#ADD7FF"},children:" overflow"}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:": "}),(0,l.jsx)(n.span,{style:{color:"#ADD7FF"},children:"hidden"}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:";"})]}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:"}"})}),` `,(0,l.jsx)(n.span,{className:"line",children:" "}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#E4F0FBD0",fontStyle:"italic"},children:"."}),(0,l.jsx)(n.span,{style:{color:"#5FB3A1",fontStyle:"italic"},children:"button-content"}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:" {"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#ADD7FF"},children:" position"}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:": "}),(0,l.jsx)(n.span,{style:{color:"#ADD7FF"},children:"relative"}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:";"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#ADD7FF"},children:" color"}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:": #"}),(0,l.jsx)(n.span,{style:{color:"#E4F0FB"},children:"f5f5f5"}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:";"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#ADD7FF"},children:" font-weight"}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:": "}),(0,l.jsx)(n.span,{style:{color:"#5DE4C7"},children:"300"}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:";"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#ADD7FF"},children:" letter-spacing"}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:": "}),(0,l.jsx)(n.span,{style:{color:"#5DE4C7"},children:"0.025em"}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:";"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#ADD7FF"},children:" height"}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:": "}),(0,l.jsx)(n.span,{style:{color:"#5DE4C7"},children:"100%"}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:";"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#ADD7FF"},children:" width"}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:": "}),(0,l.jsx)(n.span,{style:{color:"#5DE4C7"},children:"100%"}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:";"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#ADD7FF"},children:" display"}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:": "}),(0,l.jsx)(n.span,{style:{color:"#ADD7FF"},children:"block"}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:";"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#ADD7FF"},children:" mask-image"}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:": linear-gradient("})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#5DE4C7"},children:" -75deg"}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:","})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#ADD7FF"},children:" white"}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:" calc(var(--x) "}),(0,l.jsx)(n.span,{style:{color:"#91B4D5"},children:"+"}),(0,l.jsx)(n.span,{style:{color:"#5DE4C7"},children:" 20%"}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:"),"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#ADD7FF"},children:" transparent"}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:" calc(var(--x) "}),(0,l.jsx)(n.span,{style:{color:"#91B4D5"},children:"+"}),(0,l.jsx)(n.span,{style:{color:"#5DE4C7"},children:" 30%"}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:"),"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#ADD7FF"},children:" white"}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:" calc(var(--x) "}),(0,l.jsx)(n.span,{style:{color:"#91B4D5"},children:"+"}),(0,l.jsx)(n.span,{style:{color:"#5DE4C7"},children:" 100%"}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:")"})]}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:" );"})}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:"}"})}),` `,(0,l.jsx)(n.span,{className:"line",children:" "}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#E4F0FBD0",fontStyle:"italic"},children:"."}),(0,l.jsx)(n.span,{style:{color:"#5FB3A1",fontStyle:"italic"},children:"shiny-overlay"}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:" {"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#ADD7FF"},children:" position"}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:": "}),(0,l.jsx)(n.span,{style:{color:"#ADD7FF"},children:"absolute"}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:";"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#ADD7FF"},children:" inset"}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:": "}),(0,l.jsx)(n.span,{style:{color:"#5DE4C7"},children:"0px"}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:";"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#ADD7FF"},children:" padding"}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:": "}),(0,l.jsx)(n.span,{style:{color:"#5DE4C7"},children:"1px"}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:";"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#ADD7FF"},children:" border-radius"}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:": "}),(0,l.jsx)(n.span,{style:{color:"#5DE4C7"},children:"8px"}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:";"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#ADD7FF"},children:" display"}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:": "}),(0,l.jsx)(n.span,{style:{color:"#ADD7FF"},children:"block"}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:";"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#ADD7FF"},children:" background-image"}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:": linear-gradient("})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#5DE4C7"},children:" -75deg"}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:","})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:" rgba("}),(0,l.jsx)(n.span,{style:{color:"#5DE4C7"},children:"255"}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:", "}),(0,l.jsx)(n.span,{style:{color:"#5DE4C7"},children:"255"}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:", "}),(0,l.jsx)(n.span,{style:{color:"#5DE4C7"},children:"255"}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:", "}),(0,l.jsx)(n.span,{style:{color:"#5DE4C7"},children:"0.1"}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:") calc(var(--x) "}),(0,l.jsx)(n.span,{style:{color:"#91B4D5"},children:"+"}),(0,l.jsx)(n.span,{style:{color:"#5DE4C7"},children:" 20%"}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:"),"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:" rgba("}),(0,l.jsx)(n.span,{style:{color:"#5DE4C7"},children:"255"}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:", "}),(0,l.jsx)(n.span,{style:{color:"#5DE4C7"},children:"255"}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:", "}),(0,l.jsx)(n.span,{style:{color:"#5DE4C7"},children:"255"}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:", "}),(0,l.jsx)(n.span,{style:{color:"#5DE4C7"},children:"0.5"}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:") calc(var(--x) "}),(0,l.jsx)(n.span,{style:{color:"#91B4D5"},children:"+"}),(0,l.jsx)(n.span,{style:{color:"#5DE4C7"},children:" 25%"}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:"),"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:" rgba("}),(0,l.jsx)(n.span,{style:{color:"#5DE4C7"},children:"255"}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:", "}),(0,l.jsx)(n.span,{style:{color:"#5DE4C7"},children:"255"}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:", "}),(0,l.jsx)(n.span,{style:{color:"#5DE4C7"},children:"255"}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:", "}),(0,l.jsx)(n.span,{style:{color:"#5DE4C7"},children:"0.1"}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:") calc(var(--x) "}),(0,l.jsx)(n.span,{style:{color:"#91B4D5"},children:"+"}),(0,l.jsx)(n.span,{style:{color:"#5DE4C7"},children:" 100%"}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:")"})]}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:" );"})}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#ADD7FF"},children:" mask"}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:":"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:" linear-gradient("}),(0,l.jsx)(n.span,{style:{color:"#ADD7FF"},children:"black"}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:", "}),(0,l.jsx)(n.span,{style:{color:"#ADD7FF"},children:"black"}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:") "}),(0,l.jsx)(n.span,{style:{color:"#ADD7FF"},children:"content-box"}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:","})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:" linear-gradient("}),(0,l.jsx)(n.span,{style:{color:"#ADD7FF"},children:"black"}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:", "}),(0,l.jsx)(n.span,{style:{color:"#ADD7FF"},children:"black"}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:");"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#ADD7FF"},children:" mask-composite"}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:": "}),(0,l.jsx)(n.span,{style:{color:"#ADD7FF"},children:"exclude"}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:";"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#ADD7FF"},children:" pointer-events"}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:": "}),(0,l.jsx)(n.span,{style:{color:"#ADD7FF"},children:"none"}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:";"})]}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:"}"})})]})})}),(0,l.jsxs)(r,{children:["Add ",(0,l.jsx)(n.code,{"data-line-numbers":"",children:"script.js"})]}),(0,l.jsx)(n.div,{"data-rehype-pretty-code-fragment":"",children:(0,l.jsx)(n.pre,{"data-language":"js","data-theme":"default",__rawString__:`import { animate, spring } from "motion"; const btn = document.querySelector(".shiny-button"); animate( btn, { "--x": ["100%", "-100%"] }, { repeat: Infinity, repeatType: "loop", repeatDelay: 1, duration: 2, }, { type: "spring", stiffness: 20, damping: 15, mass: 2, }, ); btn.addEventListener("mousedown", () => { animate(btn, { scale: 0.95, }); }); btn.addEventListener("mouseup", () => { animate(btn, { scale: 1, }); }); `,children:(0,l.jsxs)(n.code,{"data-language":"js","data-theme":"default","data-line-numbers":"",children:[(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#5DE4C7"},children:"import "}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:"{"}),(0,l.jsx)(n.span,{style:{color:"#ADD7FF"},children:" animate"}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:","}),(0,l.jsx)(n.span,{style:{color:"#ADD7FF"},children:" spring"}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:" }"}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:" from"}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:' "'}),(0,l.jsx)(n.span,{style:{color:"#5DE4C7"},children:"motion"}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:'"'}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:";"})]}),` `,(0,l.jsx)(n.span,{className:"line",children:" "}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#91B4D5"},children:"const"}),(0,l.jsx)(n.span,{style:{color:"#E4F0FB"},children:" btn"}),(0,l.jsx)(n.span,{style:{color:"#91B4D5"},children:" ="}),(0,l.jsx)(n.span,{style:{color:"#E4F0FB"},children:" document"}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:"."}),(0,l.jsx)(n.span,{style:{color:"#E4F0FBD0"},children:"querySelector"}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:"("}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:'"'}),(0,l.jsx)(n.span,{style:{color:"#5DE4C7"},children:".shiny-button"}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:'"'}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:");"})]}),` `,(0,l.jsx)(n.span,{className:"line",children:" "}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#E4F0FBD0"},children:"animate"}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:"("})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#E4F0FB"},children:" btn"}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:","})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:" {"}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:' "'}),(0,l.jsx)(n.span,{style:{color:"#5DE4C7"},children:"--x"}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:'"'}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:":"}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:" ["}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:'"'}),(0,l.jsx)(n.span,{style:{color:"#5DE4C7"},children:"100%"}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:'"'}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:","}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:' "'}),(0,l.jsx)(n.span,{style:{color:"#5DE4C7"},children:"-100%"}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:'"'}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:"]"}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:" },"})]}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:" {"})}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#ADD7FF"},children:" repeat"}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:":"}),(0,l.jsx)(n.span,{style:{color:"#5DE4C7"},children:" Infinity"}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:","})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#ADD7FF"},children:" repeatType"}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:":"}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:' "'}),(0,l.jsx)(n.span,{style:{color:"#5DE4C7"},children:"loop"}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:'"'}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:","})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#ADD7FF"},children:" repeatDelay"}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:":"}),(0,l.jsx)(n.span,{style:{color:"#5DE4C7"},children:" 1"}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:","})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#ADD7FF"},children:" duration"}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:":"}),(0,l.jsx)(n.span,{style:{color:"#5DE4C7"},children:" 2"}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:","})]}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:" },"})}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:" {"})}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#ADD7FF"},children:" type"}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:":"}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:' "'}),(0,l.jsx)(n.span,{style:{color:"#5DE4C7"},children:"spring"}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:'"'}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:","})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#ADD7FF"},children:" stiffness"}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:":"}),(0,l.jsx)(n.span,{style:{color:"#5DE4C7"},children:" 20"}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:","})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#ADD7FF"},children:" damping"}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:":"}),(0,l.jsx)(n.span,{style:{color:"#5DE4C7"},children:" 15"}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:","})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#ADD7FF"},children:" mass"}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:":"}),(0,l.jsx)(n.span,{style:{color:"#5DE4C7"},children:" 2"}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:","})]}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:" },"})}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:");"})}),` `,(0,l.jsx)(n.span,{className:"line",children:" "}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#E4F0FB"},children:"btn"}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:"."}),(0,l.jsx)(n.span,{style:{color:"#E4F0FBD0"},children:"addEventListener"}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:"("}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:'"'}),(0,l.jsx)(n.span,{style:{color:"#5DE4C7"},children:"mousedown"}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:'"'}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:", () "}),(0,l.jsx)(n.span,{style:{color:"#91B4D5"},children:"=>"}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:" {"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#E4F0FBD0"},children:" animate"}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:"("}),(0,l.jsx)(n.span,{style:{color:"#E4F0FB"},children:"btn"}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:", {"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#ADD7FF"},children:" scale"}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:":"}),(0,l.jsx)(n.span,{style:{color:"#5DE4C7"},children:" 0.95"}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:","})]}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:" });"})}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:"});"})}),` `,(0,l.jsx)(n.span,{className:"line",children:" "}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#E4F0FB"},children:"btn"}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:"."}),(0,l.jsx)(n.span,{style:{color:"#E4F0FBD0"},children:"addEventListener"}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:"("}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:'"'}),(0,l.jsx)(n.span,{style:{color:"#5DE4C7"},children:"mouseup"}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:'"'}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:", () "}),(0,l.jsx)(n.span,{style:{color:"#91B4D5"},children:"=>"}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:" {"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#E4F0FBD0"},children:" animate"}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:"("}),(0,l.jsx)(n.span,{style:{color:"#E4F0FB"},children:"btn"}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:", {"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#ADD7FF"},children:" scale"}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:":"}),(0,l.jsx)(n.span,{style:{color:"#5DE4C7"},children:" 1"}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:","})]}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:" });"})}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:"});"})})]})})})]})})]})})]}),` `,(0,l.jsxs)(n.h2,{id:"usage",children:[(0,l.jsx)(n.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#usage",children:(0,l.jsx)(n.span,{className:"icon icon-link"})}),"Usage"]}),` `,(0,l.jsxs)(p,{children:[(0,l.jsxs)(a,{value:"React",children:[(0,l.jsx)(n.div,{"data-rehype-pretty-code-fragment":"",children:(0,l.jsx)(n.pre,{"data-language":"tsx","data-theme":"default",__rawString__:`import { ShinyButton } from "@/components/ui/shiny-button"; `,children:(0,l.jsx)(n.code,{"data-language":"tsx","data-theme":"default","data-line-numbers":"",children:(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#5DE4C7"},children:"import "}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:"{"}),(0,l.jsx)(n.span,{style:{color:"#ADD7FF"},children:" ShinyButton"}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:" }"}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:" from"}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:' "'}),(0,l.jsx)(n.span,{style:{color:"#5DE4C7"},children:"@/components/ui/shiny-button"}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:'"'}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:";"})]})})})}),(0,l.jsx)(n.div,{"data-rehype-pretty-code-fragment":"",children:(0,l.jsx)(n.pre,{"data-language":"tsx","data-theme":"default",__rawString__:`Button `,children:(0,l.jsx)(n.code,{"data-language":"tsx","data-theme":"default","data-line-numbers":"",children:(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#E4F0FB"},children:"<"}),(0,l.jsx)(n.span,{style:{color:"#5DE4C7"},children:"ShinyButton"}),(0,l.jsx)(n.span,{style:{color:"#E4F0FB"},children:">Button"})]})})})})]}),(0,l.jsxs)(a,{value:"HTML",children:[(0,l.jsxs)(n.p,{children:["Define your button with ",(0,l.jsx)(n.code,{"data-line-numbers":"",children:'class="shiny-button"'}),". Add the text in the span with ",(0,l.jsx)(n.code,{"data-line-numbers":"",children:'class="button-content"'}),". Add the overlay using the span with ",(0,l.jsx)(n.code,{"data-line-numbers":"",children:'class="shiny-overlay"'}),"."]}),(0,l.jsx)(n.div,{"data-rehype-pretty-code-fragment":"",children:(0,l.jsx)(n.pre,{"data-language":"html","data-theme":"default",__rawString__:` `,children:(0,l.jsxs)(n.code,{"data-language":"html","data-theme":"default","data-line-numbers":"",children:[(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#E4F0FB"},children:"<"}),(0,l.jsx)(n.span,{style:{color:"#5DE4C7"},children:"button"}),(0,l.jsx)(n.span,{style:{color:"#5FB3A1",fontStyle:"italic"},children:" class"}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:'"'}),(0,l.jsx)(n.span,{style:{color:"#5DE4C7"},children:"shiny-button"}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:'"'}),(0,l.jsx)(n.span,{style:{color:"#E4F0FB"},children:">"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#E4F0FB"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#5DE4C7"},children:"span"}),(0,l.jsx)(n.span,{style:{color:"#5FB3A1",fontStyle:"italic"},children:" class"}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:'"'}),(0,l.jsx)(n.span,{style:{color:"#5DE4C7"},children:"button-content"}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:'"'}),(0,l.jsx)(n.span,{style:{color:"#E4F0FB"},children:">"}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:"Button"}),(0,l.jsx)(n.span,{style:{color:"#E4F0FB"},children:""})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#E4F0FB"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#5DE4C7"},children:"span"}),(0,l.jsx)(n.span,{style:{color:"#5FB3A1",fontStyle:"italic"},children:" class"}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:'"'}),(0,l.jsx)(n.span,{style:{color:"#5DE4C7"},children:"shiny-overlay"}),(0,l.jsx)(n.span,{style:{color:"#A6ACCD"},children:'"'}),(0,l.jsx)(n.span,{style:{color:"#E4F0FB"},children:">"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#E4F0FB"},children:""})]})]})})})]})]})]})}function D(e={}){let{wrapper:n}=e.components||{};return n?(0,l.jsx)(n,{...e,children:(0,l.jsx)(A,{...e})}):A(e)}function o(e,n){throw new Error("Expected "+(n?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}return f(v);})(); ;return Component;