Shine

A light that sweeps across an element, once, in a loop, on hover or on tap.

"use client"

import { Shine } from "@animate-ui/react/primitives/effects/shine"

import { Button } from "@/components/ui/button"

export default function ShineDemo({
  delay = 0,
  duration = 1200,
  loop = true,
  loopDelay = 500,
  deg = -15,
  enable = true,
  enableOnHover = false,
  enableOnTap = false,
}: {
  delay?: number
  duration?: number
  loop?: boolean
  loopDelay?: number
  deg?: number
  enable?: boolean
  enableOnHover?: boolean
  enableOnTap?: boolean
}) {
  return (
    <Shine
      asChild
      delay={delay}
      duration={duration}
      loop={loop}
      loopDelay={loopDelay}
      deg={deg}
      enable={enable}
      enableOnHover={enableOnHover}
      enableOnTap={enableOnTap}
    >
      <Button size="lg">Get started</Button>
    </Shine>
  )
}

Installation

npm install @animate-ui/react motion
pnpm add @animate-ui/react motion
yarn add @animate-ui/react motion
bun add @animate-ui/react motion

Usage

import { Shine } from '@animate-ui/react/primitives/effects/shine';

export function GetStarted() {
  return (
    <Shine asChild loop loopDelay={500}>
      <button>Get started</button>
    </Shine>
  );
}

enableOnHover and enableOnTap play the shine on interaction instead of right away.

Animation

  • A skewed gradient of color (the text color by default) sweeps from left to right over duration (1.2s, cubic-bezier(0.4, 0, 0.2, 1)), clipped to the element. It never catches the pointer.
  • With loop, it sweeps again after loopDelay. With enableOnHover and loop, it keeps sweeping while hovered.
  • It moves with a hardware-accelerated transform.
  • Under reduced motion, there is no shine: it's decorative.

API Reference

Shine

PropTypeDefault
asChild?
booleanfalse
color?
string'currentColor'
opacity?
number0.3
duration?
number1200
delay?
number0
loop?
booleanfalse
loopDelay?
number0
deg?
number-15
enable?
booleantrue
enableOnHover?
booleanfalse
enableOnTap?
booleanfalse
...props?
React.ComponentProps<'div'>-

Built by Skyleen. The source code is available on GitHub.

Last updated: 10/18/2026

On this page