# Comet

Source: https://www.pitchkitjs.com/docs/overlays/comet

> A tapered, optionally fading trail — good for carries and off-ball runs.

```tsx
import { Comet, Pitch } from "@pitchkit/react";

// StatsBomb coordinates (120 x 80). A single dribble, tapering as it moves.
const carries = [
  { from: { x: 40, y: 60 }, to: { x: 58, y: 52 } },
  { from: { x: 58, y: 52 }, to: { x: 76, y: 44 } },
  { from: { x: 76, y: 44 }, to: { x: 94, y: 38 } },
];

/** `<Comet>` draws a tapered, optionally fading trail — good for carries and runs. */
export function CometBasic() {
  return (
    <Pitch type="statsbomb">
      <Comet
        data={carries}
        x={(c) => c.from.x}
        y={(c) => c.from.y}
        x2={(c) => c.to.x}
        y2={(c) => c.to.y}
        gradient
      />
    </Pitch>
  );
}
```

## Usage

Like `<Arrows>`, `<Comet>` takes start (`x`/`y`) and end (`x2`/`y2`) accessors, plus
`startWidth`/`endWidth` to control the taper and `gradient` to fade opacity along its length.

```tsx
<Comet data={carries} x={(c) => c.from.x} y={(c) => c.from.y} x2={(c) => c.to.x} y2={(c) => c.to.y} gradient />
```