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