Glare Hover
Send a soft band of light across content on hover, focus, click, or a timer.
Satin aluminium
Brushed along the long edge, then clear anodised after machining.
- Sample
- A-17
- Grain
- Longitudinal
- Alloy
- 6061-T6
Implementation
1"use client";2 3import {4 useEffect,5 useRef,6 type CSSProperties,7 type HTMLAttributes,8 type ReactNode,9} from "react";10 11export type GlareHoverMode = "hover" | "follow" | "loop" | "click";12export type GlareHoverVariant = "streak" | "twin" | "sheen";13 14export interface GlareHoverProps extends Omit<15 HTMLAttributes<HTMLDivElement>,16 "children"17> {18 children?: ReactNode;19 width?: string;20 height?: string;21 background?: string;22 borderRadius?: string;23 borderColor?: string;24 glareColor?: string;25 glareOpacity?: number;26 glareAngle?: number;27 glareSize?: number;28 transitionDuration?: number;