← DOCS
effects

FlashEffect

Full-screen flash overlay with trigger modes (manual/scroll/click).

npx chaos add flash-effect

PREVIEW

FLASH

USAGE

case 'glass-button': return ; case 'neon-glow': return ; case 'floating-button': return ;
import { FlashEffect, useFlash } from '@oalacea/chaosui/effects/flash-effect';

function App() {
  const flashRef = useFlash();

  return (
    <>
      <FlashEffect trigger="scroll" color="#ff0000" />
      <button onClick={() => flashRef.current?.flash()}>FLASH</button>
    </>
  );
}

PROPS

PropTypeDefault
triggerTrigger mode
"manual" | "scroll" | "click""manual"
colorFlash color
string"#fff"
durationDuration in ms
number150
opacityFlash opacity (0-1)
number0.4
blendModeCSS blend mode
"normal" | "overlay" | "screen" | "difference""normal"