Components
Warning Graphic
This component renders an animated SVG warning graphic with a triangle, exclamation mark, stripes, and path outlines, using framer-motion for a layered entrance sequence with configurable animation speed and color. It supports motion-reduction detection, progressive draw effects, and modular fade/scale transitions for accessibility and customization. Perfect for alert banners, system status messages, onboarding visuals, HUD, sci-fi or gaming themes, or any UI needing a bold, animated warning indicator.
"use client";
import { WarningGraphic } from "@/components/ui/warning-graphic";
const settings = {
width: 600,
height: 230,
enableAnimations: true,
animationSpeed: 1.5,
};
export default function Demo(props: Partial<typeof settings>) {
const s = { ...settings, ...props };
return (
<div className="h-screen w-screen">
<WarningGraphic
width={s.width}
height={s.height}
enableAnimations={s.enableAnimations}
animationSpeed={s.animationSpeed}
className="drop-shadow-lg"
/>
</div>
);
}