Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/apursley2012/sys-core/llms.txt

Use this file to discover all available pages before exploring further.

RadarSweep renders a circular radar display — the kind found on a ship’s navigation bridge or an air-traffic-control tower — as a purely decorative animated element. It features four concentric range rings, orthogonal crosshair lines, and a rotating sweep quadrant that fans out from the centre with a gradient fade from mint-comms green to transparent. A glowing sweep arm traces the leading edge of the quadrant. The component is self-contained, zero-config, and sized to fill whatever container it is placed in.

​
Visual Role

The radar sweep provides kinetic energy to otherwise static areas of the interface. Its slow, continuous rotation communicates the idea of active scanning — of systems online and monitoring — which fits naturally in the Skills section (scanning for signals) or as a decorative accent alongside contact or status indicators. The mint-comms green palette (rgba(110, 231, 183, ...)) is used throughout at varying opacities: the outermost ring is the most visible, inner geometry fades to near-invisible, and the sweep arm glows brightly with a CSS box-shadow at rgba(110, 231, 183, 0.8). The animate-radar-sweep Tailwind keyframe class drives the rotation — a continuous 360° spin applied to the top-right quadrant wrapper, with the gradient sweep and glowing arm rotating together as a unit.

​
Usage

RadarSweep fills its parent container, so control its size through the wrapper element. A square container is expected — the component uses rounded-full internally to clip itself to a circle. 
import RadarSweep from "../../components/cosmic/RadarSweep.js";

// Small decorative accent in a sidebar or card
export default function SkillsPanel() {
  return (
    <div className="w-48 h-48">
      <RadarSweep />
    </div>
  );
}

// Larger hero-style display
import RadarSweep from "../../components/cosmic/RadarSweep.js";

export default function ContactSection() {
  return (
    <div className="flex items-center gap-12">
      <div className="w-64 h-64 flex-shrink-0">
        <RadarSweep />
      </div>
      <div>
        <h2 className="text-off-white font-mono text-2xl">COMMS ARRAY</h2>
        <p className="text-cyan-signal/70 font-mono text-sm mt-2">
          Open channel — ready to receive transmissions.
        </p>
      </div>
    </div>
  );
}

​
Props

RadarSweep is a zero-configuration component and accepts no props. All visual parameters — ring count, ring opacity, sweep gradient, arm glow, and animation speed — are defined internally.
The component uses overflow-hidden and rounded-full on its outermost wrapper to clip the rotating sweep quadrant to the circle boundary. If you need a non-circular radar, you would need to modify the component — the current implementation is specifically designed for a circular display.

​
Implementation Notes

​
Structure: rings, crosshairs, and sweep

The component renders five layers inside a relative rounded-full container:
  1. Three inner range rings — absolute circles at w-3/4, w-1/2, and w-1/4 of the container, all using border-mint-comms/10 for a near-invisible concentric pattern.
  2. Crosshair lines — a full-width horizontal rule (h-px) and a full-height vertical rule (w-px), both bg-mint-comms/10.
  3. Rotating sweep assembly — a w-1/2 h-1/2 top-0 right-0 origin-bottom-left wrapper spanning the top-right quadrant. The origin-bottom-left transform origin places the pivot at the circle’s centre, so the quadrant rotates around the origin point.
The sweep assembly contains:
  • A bg-gradient-to-br from-mint-comms/40 to-transparent rounded-tr-full fill for the swept quadrant area.
  • A w-px h-full bg-mint-comms/80 shadow-[0_0_10px_rgba(110,231,183,0.8)] arm for the glowing leading edge.

​
animate-radar-sweep keyframe

The rotation is driven by the animate-radar-sweep class, a custom Tailwind animation defined in the project config. It applies a full rotate(0deg) → rotate(360deg) transform on the sweep wrapper, running as a linear infinite loop. The speed is configured in the Tailwind keyframes — typically around 4–6 seconds per revolution for a convincing slow scan effect.

​
Sizing behaviour

RadarSweep uses only relative/percentage sizing internally (w-full, h-full, w-3/4, etc.), so it scales to any square container without any internal pixel values. This makes it reusable at any size from a small 48 × 48 px icon-scale accent to a full-panel 300 × 300 px display.
Pair RadarSweep with SignalBars for a cohesive scanning/signal visual cluster. Place the radar on the left as the “receiver” and the signal bars on the right as the “signal strength” readout to create a self-contained comms-panel widget.

Build docs developers (and LLMs) love

Get started for freeTalk to us