{/* Atmospheric darkening for legibility */}
{/* Live sensor overlays — each ticks on its own cadence so the page reads as
real telemetry rather than a synced loop. SVG re-renders cheaply. */}
{/* UAS contact with sonar — left side, original height */}
{/* UAS contact with sonar — lower-right (swapped with BUOY) */}
{/* Buoy contact — mid-left (swapped with UAS) */}
8°45′ N · 104°55′ E
CÀ MAU PROVINCE
GEOSPATIAL SYSTEMS, TERRESTRIAL · MARITIME · SPACE · CYBER
Augmented awareness.
Tailored geospatial platforms that integrate satellite, sensor, and mobile telemetry into one operational picture, built for national programs, deployed in the field, refined in austere environments.
);
}
function DWStrip() {
// Live operating-picture marquee with simulated jitter.
// Each metric ticks at its own cadence so the row reads as live telemetry,
// not a synchronized loop. Coords drift in seconds; counts walk by small deltas;
// link latency wobbles around a baseline; mesh status flips occasionally.
const [tick, setTick] = React.useState(0);
React.useEffect(() => {
const id = setInterval(() => setTick(t => t + 1), 600);
return () => clearInterval(id);
}, []);
// Use refs so values walk continuously instead of jumping each render.
const stateRef = React.useRef({
latSec: 12,
lonSec: 47,
sensors: 12,
nets: 3,
link: 0.4,
contacts: 1247,
meshIdx: 0,
blink: true,
});
const meshStates = ['MESH NOMINAL', 'MESH SYNC', 'MESH NOMINAL', 'MESH NOMINAL', 'MESH RELAY'];
const s = stateRef.current;
// Walk values on each tick. Small, asymmetric deltas read as organic.
s.latSec = Math.max(0, Math.min(59, s.latSec + (Math.random() < 0.5 ? -1 : 1)));
s.lonSec = Math.max(0, Math.min(59, s.lonSec + (Math.random() < 0.5 ? -1 : 1)));
if (tick % 3 === 0) s.sensors = 11 + Math.floor(Math.random() * 3); // 11–13
if (tick % 5 === 0) s.nets = 2 + Math.floor(Math.random() * 3); // 2–4
s.link = Math.max(0.2, Math.min(0.9, s.link + (Math.random() - 0.5) * 0.15));
s.contacts = Math.max(1100, Math.min(1400, s.contacts + Math.floor((Math.random() - 0.5) * 14)));
if (tick % 4 === 0) s.meshIdx = Math.floor(Math.random() * meshStates.length);
s.blink = !s.blink;
const pad = (n) => String(n).padStart(2, '0');
const items = [
{ k: 'live', t: '● LIVE', color: DW_BRAND2, opacity: s.blink ? 1 : 0.55 },
{ k: 'coord', t: `8°45′${pad(s.latSec)}″ N · 104°55′${pad(s.lonSec)}″ E` },
{ k: 'sensors', t: `${s.sensors} SENSORS ONLINE` },
{ k: 'nets', t: `${s.nets} NETS` },
{ k: 'link', t: `LINK ${s.link.toFixed(1)}s` },
{ k: 'contacts', t: `AIS · ${s.contacts.toLocaleString()} CONTACTS` },
{ k: 'mesh', t: meshStates[s.meshIdx] },
];
return (
{items.map((it) => (
{it.t}
))}
);
}
function DWSectionHead({ kicker, title, eyebrow, id }) {
return (
{kicker}
{title}
{eyebrow &&
{eyebrow}
}
);
}
function DWPlatformGrid() {
const items = [
{ num: 'I', t: 'Sensor Fusion', d: 'Satellite, AIS, ADS-B, NMEA, LoRa, collapsed into one normalized feed.' },
{ num: 'II', t: 'Edge Resilience', d: 'Operates without backhaul. Mesh and local persistence keep teams synced.' },
{ num: 'III', t: 'TAK Interop', d: 'Native Cursor on Target. Bidirectional with ATAK, iTAK, WinTAK.' },
{ num: 'IV', t: 'Custom Programs', d: 'Air-gapped deployments, mission networks, bespoke sensor packages.' },
];
return (
{items.map((it, i) => (
0 ? 28 : 0,
}}>
CAPABILITY {it.num}
{it.t}
{it.d}
))}
);
}
function DWLiveCaption() {
// Live AIS-feel caption under the Marine description. Vessel count walks +/-a few,
// message rate breathes around 1.0 msg/s, and a small "● LIVE" dot blinks.
const [tick, setTick] = React.useState(0);
React.useEffect(() => {
const id = setInterval(() => setTick(t => t + 1), 700);
return () => clearInterval(id);
}, []);
const stateRef = React.useRef({ vessels: 166, rate: 1.0, blink: true });
const s = stateRef.current;
s.vessels = Math.max(140, Math.min(190, s.vessels + Math.floor((Math.random() - 0.5) * 5)));
s.rate = Math.max(0.6, Math.min(1.6, s.rate + (Math.random() - 0.5) * 0.18));
s.blink = !s.blink;
return (
●CHESAPEAKE BAY · {s.vessels} VESSELS TRACKED · {s.rate.toFixed(1)} MSG/S
);
}
function DWPlatformShowcase() {
return (
{/* Copy column */}
OVERWATCH · LIVE
Every vessel. Every channel. One screen.
Marine Overwatch fuses live AIS, NOAA charts, currents, weather, and your own sensor feeds into a single tactical picture. Tracking thousands of contacts at sub-second update rates, afloat, ashore, or at the watch desk.
AIS
Live vessel tracking with track history up to 3 hours.
CHARTS
NOAA ENC + raster, 3D bathymetry, official soundings.
ENVIRONMENT
Currents, wind, tides, overlaid on the map you're working.
PLANNER
Routes, waypoints, anchorages, synced across the fleet.
{/* Tablet device frame with the real Overwatch screenshot */}
{/* The screenshot already includes its own iPad chassis. Use a soft ambient floor-shadow + faint glow underneath. */}
);
}
function DWHelicopterTelemetry() {
// Live overlay for the helicopter photo: altitude drifts around 8,400 ft,
// SAT-LINK latency wobbles around 184 ms, blinking ● to read as live.
const [tick, setTick] = React.useState(0);
React.useEffect(() => {
const id = setInterval(() => setTick(t => t + 1), 700);
return () => clearInterval(id);
}, []);
const stateRef = React.useRef({ alt: 8400, link: 184, blink: true });
const s = stateRef.current;
s.alt = Math.max(8200, Math.min(8600, s.alt + Math.round((Math.random() - 0.5) * 30)));
s.link = Math.max(160, Math.min(220, s.link + Math.round((Math.random() - 0.5) * 6)));
s.blink = !s.blink;
const fmtAlt = s.alt.toLocaleString('en-US');
return (
●
UH-60 · {fmtAlt} FT MSL
SAT-LINK · {s.link}ms
);
}
function DWFeatureSpread() {
return (
{/* Full-bleed operator photo */}
{/* Side gradient for text legibility — right-anchored to balance flipped photo */}
{/* Top + bottom darkening */}
{/* Photo metadata corners — swapped to left so they don't collide with right-justified copy */}
RIDGELINE RESCUE · ALPHA-7
{/* Content column on right half, right-justified */}
BUILT FOR THE OPERATOR
Custom solutions, designed for geospatial dominance.
Every program is different. We build to fit the mission, the platform, the environment, and the team, not the other way around. The work spans scoping through sustainment, with the operator at the center of every decision.
CAPABILITY I
Sensor Fusion
Satellite, AIS, ADS-B, NMEA, LoRa, collapsed into one normalized feed.
CAPABILITY II
Edge Resilience
Operates without backhaul. Mesh and local persistence keep teams synced.
CAPABILITY III
TAK Interop
Native Cursor on Target. Bidirectional with ATAK and iTAK.
);
}
// iPhone Pro Max frame — built from the screen outward.
// Screenshot is 460×996 (1:2.165); we lock the screen to that ratio and add a uniform bezel.
function DWPhone({ src, badge, accent = DW_CYAN }) {
const SCREEN_MAX_W = 304; // px, the screen's max width
const BEZEL = 8; // px, uniform bezel thickness
const SCREEN_RADIUS = 44; // px, screen corner radius
const DEVICE_RADIUS = SCREEN_RADIUS + BEZEL; // 52
return (
{/* Screen, locked to the screenshot's aspect ratio */}
{/* Dynamic Island — sits over the screen, near top center */}
);
}
function DWResponsiveStyles() {
// One stylesheet, two breakpoints. Targets the classes added to each section
// and uses !important to override the inline styles the design ships with.
return (
);
}
function DeepWater() {
return (
One operating picture for a complex global environment.}
eyebrow="A custom-built geospatial system that fuses sensors, maps the operating environment, and runs the mission from one screen."
/>
);
}
const DW_NAV_LINK_STYLE = {
fontSize: 13, color: DW_INK, textDecoration: 'none',
};
function DWNav() {
const items = [
['Platform', '#platform'],
['Programs', '#programs'],
['Marine', '#marine'],
['Field Apps', '#field-apps'],
['Contact', '#contact'],
];
return (
{/* Atmospheric darkening for legibility */}
{/* Live sensor overlays — each ticks on its own cadence so the page reads as
real telemetry rather than a synced loop. SVG 
{/* Side gradient for text legibility — right-anchored to balance flipped photo */}
{/* Top + bottom darkening */}
{/* Photo metadata corners — swapped to left so they don't collide with right-justified copy */}
