# Isometric delivery drone

> A hand-faceted quadcopter that carries a glowing seal, with soft motion-blurred rotor discs and a gentle idle hover — a self-contained SVG hero prop you drop into any dark surface. Ships in three cuts: a high-facet isometric Classic, a lighter low-poly Raptor, and an overhead Courier view.

- **Category:** Decoration
- **Source (best-in-class):** [edison.watch](https://edison.watch)
- **Tags:** drone, quadcopter, isometric, svg, illustration, hero, delivery, seal, faceted, 3d, animation, decoration, raptor, courier, low-poly, top-down, variant
- **Dependencies:** react
- **Status:** stable
- **Live demo:** https://eito.me/ui/delivery-drone

## Problem

A landing hero or empty state wants one memorable object rather than a generic stock render. This is a single inline SVG: the airframe is built from shaded facets so it reads as a real 3D-lit body, four radial-gradient discs stand in for spinning rotors, and the payload is a cyan seal lit by its own radial glow. It ships as a static asset (no WebGL, no 3D runtime, no per-frame work) wrapped by a tiny component that scales it to any width and adds an optional CSS hover-float which idles at 6s and switches itself off under prefers-reduced-motion. Three cuts are bundled — a ~1,300-facet isometric Classic, a ~40-facet low-poly Raptor at a fraction of the file size, and a top-down Courier with four spinning rotor discs — so you can trade fidelity, weight, and camera angle without leaving the pattern.

## When to use

- A dark landing hero, 404, or empty state needs one characterful focal object instead of a stock illustration.
- You want a lightweight 'agent delivers the payload' motif — swap the carried seal for your own mark.
- The graphic must stay cheap and portable: one SVG asset, no 3D library, animation that respects reduced-motion.

## Code — snippet.tsx

```tsx
/**
 * DeliveryDrone — a self-contained isometric quadcopter illustration.
 *
 * The artwork itself is a single SVG file kept next to your other static
 * assets (default `/images/delivery-drone.svg`). This component is only the
 * thin wrapper around it: it scales the SVG to whatever width the parent
 * gives it, and adds an optional idle hover-float.
 *
 * Bring your own asset: drop the SVG into your `public/` (or point `src` at
 * wherever it lives). If you serve under a base path, prefix the URL with
 * `import.meta.env.BASE_URL`, e.g. `src={`${import.meta.env.BASE_URL}images/delivery-drone.svg`}`.
 *
 * Three airframes ship as separate assets. `delivery-drone.svg` and
 * `delivery-drone-raptor.svg` are the isometric "Classic" (high-facet) and
 * "Raptor" (low-poly) cuts; `delivery-drone-courier.svg` is an overhead
 * three-quarter view with four motion-blurred rotor discs. Point `src` at
 * whichever one suits the surface — the wrapper is identical for all three.
 *
 * The float is pure CSS so it costs nothing, and it silences itself under
 * `prefers-reduced-motion`. Sizing is driven entirely by the wrapper's
 * `className` (the image is `width:100%`), so `className="w-64"` — or any
 * width — just works.
 */

type DeliveryDroneProps = {
  /** URL of the drone SVG. Prefix with BASE_URL if you serve under a subpath. */
  src?: string;
  /** Alt text. Leave empty (default) to mark it decorative / aria-hidden. */
  alt?: string;
  /** Wrapper classes — this is where you set the width, e.g. "w-64". */
  className?: string;
  /** Gentle idle hover-float. Respects prefers-reduced-motion. Default: true. */
  float?: boolean;
};

export default function DeliveryDrone({
  src = "/images/delivery-drone.svg",
  alt = "",
  className,
  float = true,
}: DeliveryDroneProps) {
  const decorative = alt === "";
  return (
    <span className={className} style={{ display: "inline-block", lineHeight: 0 }}>
      {float && (
        <style>{`
          @keyframes eito-drone-hover {
            0%, 100% { transform: translateY(0); }
            50%      { transform: translateY(-5%); }
          }
          @media (prefers-reduced-motion: reduce) {
            .eito-drone--float { animation: none !important; }
          }
        `}</style>
      )}
      <img
        src={src}
        alt={alt}
        aria-hidden={decorative || undefined}
        draggable={false}
        className={float ? "eito-drone--float" : undefined}
        style={{
          display: "block",
          width: "100%",
          height: "auto",
          userSelect: "none",
          ...(float
            ? { animation: "eito-drone-hover 6s ease-in-out infinite", willChange: "transform" }
            : null),
        }}
      />
    </span>
  );
}
```

## Related

- Machine-readable index (all patterns, with code): https://eito.me/ui/manifest.json
- Plain-HTML mirror: https://eito.me/ui/all.html
- Interactive gallery: https://eito.me/ui