║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║

---

title: Shine description: An animated light sweep effect with configurable timing, colors, and triggers (hover, tap, or continuous). author: name: imskyleen url: https://github.com/imskyleen releaseDate: 2025-09-22

<ComponentPreview name="demo-primitives-effects-shine" />

Installation

<ComponentInstallation name="primitives-effects-shine" />

Usage

<Shine>Shine</Shine>

API Reference

Shine

<TypeTable type={{ asChild: { description: 'Change the default rendered element for the one passed as a child, merging their props and behavior.', type: 'boolean', required: false, default: 'false', }, color: { description: 'The color of the shine', type: 'string', required: false, default: 'currentColor', }, opacity: { description: 'The opacity of the shine', type: 'number', required: false, default: '0.3', }, delay: { description: 'The delay of the animation', type: 'number', required: false, default: '0', }, duration: { description: 'The duration of the animation', type: 'number', required: false, default: '1200', }, loop: { description: 'The loop of the animation', type: 'boolean', required: false, default: 'false', }, loopDelay: { description: 'The loop delay of the animation', type: 'number', required: false, default: '0', }, deg: { description: 'The deg of the animation', type: 'number', required: false, default: '-15', }, enable: { description: 'The enable of the animation', type: 'boolean', required: false, default: 'true', }, enableOnHover: { description: 'The enable on hover of the animation', type: 'boolean', required: false, default: 'false', }, enableOnTap: { description: 'The enable on tap of the animation', type: 'boolean', required: false, default: 'false', }, '...props': { description: 'The props of the shine element', type: 'React.ComponentProps<"div">', required: false, }, }} />

║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║