Animated HUD Targeting UI

Component 114

About

The HUD targeting UI is a sophisticated animated component featuring intricate SVG crosshairs with animated targeting patterns, center reticle system, and coordinated motion effects. It supports theme-aware color customization for both light and dark modes, allowing seamless integration across different visual environments. This component is ideal for gaming interfaces, military simulation dashboards, sci-fi themed applications, or any interactive system requiring a high-tech targeting display.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Animated HUD Targeting UI to your project and fits it to your theme.

Code

How Animated HUD Targeting UI is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

"use client";

import { useEffect, useState } from "react";
import { motion } from "framer-motion";
import { HudFrame, TargetingUI } from "@/components/ui/animated-hud-targeting-ui";

export default function Page() {
  const [mounted, setMounted] = useState(false);
  const [showTargeting, setShowTargeting] = useState(true);
  const [targetingKey, setTargetingKey] = useState(0);

  useEffect(() => {
    setMounted(true);
  }, []);

  const svgAnimation = {
    hidden: { opacity: 0, scale: 0.95 },
    show: {
      opacity: 1,
      scale: 1,
      transition: {
        duration: 0.8,
        ease: [0.22, 1, 0.36, 1],
      },
    },
    hide: {
      opacity: 0,
      scale: 0.95,
      transition: {
        duration: 0.5,
        ease: [0.22, 1, 0.36, 1],
      },
    },
  };

  return (
    <div className="min-h-screen overflow-hidden">
      <HudFrame>
        <div className="flex flex-col w-full h-screen relative overflow-hidden">
            <TargetingUI className="w-128 h-full" />
        </div>
      </HudFrame>
    </div>
  );
}