Satellite operations

Build with Vlak
European Observation Network
Illustrative true colour observation of Western Europe
Asteria-3
52.37° N · 4.90° E
Simulated pass · 10 m / px
100%
Asteria-3

North Sea pass

Acquisition window
11:42–11:49 CET

Altitude

612 km

Velocity

7.54 km/s

Downlink

94 Mbps
Cloud cover18%
Telemetry nominal

Select an asset → compare display layers → queue a capture

View source

Inside the interface

A fictional European satellite operations console. The observation image holds the center, flanked by an asset list and pass details. Selecting an asset updates its telemetry, while layer controls and animated markers keep the map and its context connected.

Asset selection, display layers, and the capture queue work locally. Satellites and telemetry are fictional; the map uses an illustrative image.

Components used

Use this as a starting point

Build with Vlak

Install the components, add the stylesheet, and bring your own content. The study’s source shows how the pieces fit together.

React componentsCSS includedMIT licensed
Install the package
npm install @noorddev/vlak-react
import "@noorddev/vlak-react/css";
Installation guide View study source

Start with your coding agent

A ready-to-use brief with this study, Vlak’s components, and the design guide.

Component modifications

  • Button supplies the capture action and asset selection. Selected assets use a full-surface fill, never a leading bar or inset edge stripe.
  • Card, Card label, Card title, Item, Progress, and Badge compose the pass inspector. Compact Item rows align telemetry labels and values; Progress shows cloud cover; Badge reports queue state.
  • Toggle group switches map layers and Canvas controls zooms or resets the observation image. Track lines and target markers remain custom overlays, with their motion disabled when the visitor requests reduced animation.
  • On mobile, Map, Assets, and Pass details replace the side rails. The observation fills the map view, assets become full-width selection rows, and all telemetry remains available in a separate scrollable inspector.