From a recorded route
to a moving story.

TrailViz turns a timed GPX or FIT activity into an animated route and telemetry overlay. You can preview it, inspect the activity and render the overlay directly in your browser.

1. Import a recorded activity

Export a GPX or FIT recording from your watch, bike computer or activity service. In the editor, choose “Import activity” or drop the file into the workspace. A recording needs at least two valid GPS positions with timestamps. Untimed planned routes cannot provide a faithful video timeline.

GPX typically provides location, timestamps and elevation. Heart rate, cadence and other fields may be included in extensions. FIT may also include recorded speed and power. Unavailable readings display as a dash. Track breaks and recording gaps are preserved.

2. Choose a route perspective

• Heading-up: your arrow stays centered and points toward the top. The route rotates with the direction of travel. The compass indicates north.
• North-up: geographic north stays at the top. The route moves beneath the centered arrow, which rotates to show direction.
• Overview: the whole route stays in view while the arrow moves along it.

Travel heading is calculated from nearby GPS positions and smoothed to reduce jitter. It cannot establish the direction your device is facing while you are stationary.

3. Preview and synchronize

Play or scrub through the activity, adjust the route zoom and choose the telemetry widgets. Use the scene background, the transparency checkerboard or your own local video. Preview footage is not included in the exported overlay.

The video and activity use the same playhead. Use the activity sync offset to align them: a positive offset shows a later activity sample at the same video time. Open Export to set the sync offset and select the output range. Longer clips take more time and memory.

Arrange the overlay

Drag the route, compass, metrics or timecode to place them anywhere inside the frame. Select an element to enter its X and Y position as a percentage, or use arrow keys for one-pixel adjustments (Shift for ten). The element selector also lets you reach overlapping layers. Reset restores an element's original position.

Open Layers & style to choose metrics, route perspective and color. Save style stores the arrangement on this device. These same positions are used for PNG and video exports.

Resize, relabel and choose your frame

Choose 16:9 landscape, 9:16 vertical or 1:1 square from the canvas menu. The preview, PNG and full-frame video use that shape. Export resolution sets the short edge: a vertical 1080 export is 1080 × 1920.

Select any overlay element, then drag its corner or use the size slider. Metrics also have a custom label, a unit selector and a unit-label field. Selecting mph, feet, miles or kilowatts converts the numeric reading; editing the unit label only changes its wording. Empty labels hide that text. Saved styles include the frame shape, sizes and metric formatting.

4. Export a transparent overlay

Choose transparent WebM to render VP9 video with an alpha channel. Import the result above your footage in an editor that supports VP9 alpha. Test a short clip first: playback support and transparent import support vary between applications.

Solid MP4 exports H.264 video with a green or dark background. Use chroma key green to remove the background in your editor. A transparent PNG frame is also available from the preview.

Start with 720p on a phone. Export support is checked on the device, and rendering happens in a worker with a bounded frame queue. The output video itself is held in memory, so shorter clips are recommended. Keep the page in the foreground until the export finishes.

Crop to overlay

Enable Crop to overlay in Export to remove empty space around visible elements. The dialog shows the output dimensions. This can make compact overlays much faster to export. Full-frame export is the default.

Keep the cropped video at its original pixel size in your editor. Turn off automatic scaling to fit the project frame. Download the timing and placement JSON for the original frame size, crop position and any edge padding. Place the video's top-left corner at the listed X and Y pixel coordinates on the original frame. These coordinates start at the top-left, with X increasing right and Y increasing down. Placement is manual; the JSON is not an editor project file. If your project uses a different resolution, scale the video and its placement by the same factor.

Timecode and timing data

Visible timecode is optional and uses the selected integer frame rate. It starts at 00:00:00:00 in the export and is drawn into the pixels. It is separate from the optional embedded track. For MP4, open Advanced settings and select “Embed activity timecode (UTC)”. Its start comes from the recording timestamp, selected start and sync offset, rounded down to a video frame. It uses non-drop-frame timecode and wraps at midnight. The timing JSON keeps the full UTC date. WebM uses the JSON sidecar. Automatic alignment requires matching camera clocks; editor support can differ.

Understand the activity

The analysis workflow provides a summary, linked elevation/speed/heart-rate/power charts and heart-rate zones. Set your maximum heart rate before interpreting zones. Distances are derived from GPS positions, gaps are excluded from distance calculations, and elevation gain is smoothed. These values may differ from your device's totals.

Your files stay local

TrailViz does not upload your activity or footage. Save a style to remember overlay settings on the same browser. Activity data is held locally when moving between the editor and analysis. Clear workspace removes the saved project. If you have not switched pages, a reload may require you to import it again. See the privacy page for details.