Shiny Button

A button with a shimmering effect that animates horizontally. It changes styles based on light or dark mode. Use it for interactive elements that need visual emphasis.

byMagic UI

Installation

terminal

pnpm dlx layro-cli add @magicuidesign/shiny-button

npx layro-cli add @magicuidesign/shiny-button

npx layro-cli add @magicuidesign/shiny-button

bunx layro-cli add @magicuidesign/shiny-button

New project? Start with init. Writes third-party code and installs packages with scripts off.

Code

Demo

"use client"

import React from "react"
import { motion, type MotionProps } from "motion/react"

import { cn } from "@/lib/utils"

const animationProps: MotionProps = {
  initial: { "--x": "100%", scale: 0.8 },
  animate: { "--x": "-100%", scale: 1 },
  whileTap: { scale: 0.95 },
  transition: {
    repeat: Infinity,
    repeatType: "loop",