Journey lets you compose multiple cards on a freeform canvas, sequence them into numbered steps, and export the whole thing as a polished animated GIF or MP4 — camera pans, entrance animations, transitions, and all.
What you can make:
Open Journey Creator from the homepage. The interface has a canvas on the right and a sidebar on the left with four tabs: Cards, Journey, Theme, and Edit.
Open the Cards tab. Browse the palette and click any card type to add it to your canvas. Cards can be repositioned by dragging and resized by dragging their handles.
| Category | Cards |
|---|---|
| Social | Tweet, LinkedIn, Bluesky, Discord, Slack, Reddit |
| Code | Code Snippet, Terminal, Code Compare, Error Card |
| GitHub | Commit, PR Card, Stats, Changelog, Release |
| DevOps | Jira, GitLab MR |
| Design | Browser Card, Screenshot, Phone Mockup, Tech Stack |
| Data | Metric, Chart, Progress Ring, KPI Grid, Leaderboard, Comparison, Gauge, Score Card, Poll, Rating, Funnel, Timeline, Radar Chart, Heatmap |
| Text | Text Element |
Click a card on the canvas to select it, then open the Edit tab. Every card type has its own fields — text, numbers, colors, data values, and so on.
Open the Journey tab. Cards are automatically assigned to steps — each step is a "scene" in your journey. When the animation plays, the camera travels from step to step.
| Action | How |
|---|---|
| Reorder a step | Arrow buttons (↑ ↓) next to the step name |
| Delete a step | Trash icon next to the step name (only when 2+ steps exist) |
| Move a card to a different step | Step selector dropdown (S1, S2…) on the card row |
| Add a connector label | Edit the text field between steps — e.g. "then", "triggers", "leads to" |
Each card in a step has its own entrance animation. Use the dropdown on the card row to choose one (fade-in, slide, zoom, etc.).
Data cards (Metric, Chart, Progress Ring, and similar) can play an internal count-up or fill animation during export. The clapperboard icon on the card row toggles this. When lit, the card's data animates during the hold phase of that step.
| Setting | What it does |
|---|---|
| Stagger (ms) | Gap between cards entering within the same step. 0 = all at once; higher values create a cascade. |
| Hold (ms) | How long the camera lingers on a step after all entrance animations finish. |
| Transition | The visual style used when moving between steps (see below). |
| Option | Effect |
|---|---|
| Cross-fade | Outgoing cards fade out while incoming cards fade in. Smooth and versatile. |
| Cut | Instant snap to the next step — no pan, no fade. Fast and punchy. |
| Zoom-through | Camera dollies in on the outgoing step then dollies out to reveal the next. Cinematic. |
| Fade to black | A black overlay rises and falls between steps, like a film cut. |
| Setting | Range | What it does |
|---|---|---|
| Pan (ms) | 400–3000 | How long the camera takes to travel between steps. |
| Overlap (ms) | 0–600 | How early the next step's cards start entering before the pan finishes. |
| Easing | — | Acceleration curve of the camera pan (see below). |
| Camera zoom | 0.8×–1.3× | Global zoom level. Above 1× crops in; below 1× pulls out. |
| Zoom dip | 0–0.35 | How much the camera pulls back mid-pan before settling. 0 = no dip. |
| Option | Feel |
|---|---|
| Ease out (expo) | Fast start, very gradual settle. Energetic and crisp. Default. |
| Ease in-out (cubic) | Gentle ramp up and down. Smooth and balanced. |
| Ease out (back) | Slight overshoot and bounce-back at the end. Playful. |
| Linear | Constant speed throughout. Mechanical. |
Click the Advanced toggle at the bottom of the Motion section to reveal the Export FPS selector.
| Option | Use when |
|---|---|
| 24 fps | Cinematic look; smallest file size |
| 30 fps | General-purpose; good balance of quality and size |
| 60 fps | Smoothest motion; largest file size |
FPS only affects exported files. The in-browser preview runs at your display's native refresh rate.
| Key | Action |
|---|---|
| A | Add a card |
| E | Edit mode — select and customize a card |
| R | Reposition mode — drag cards around the canvas |
| X | Delete the selected card |
Click Preview Journey to play the animation directly in the browser — no rendering, no file created. Use it to check timing and motion before exporting. Click Stop Preview to end early. Requires at least two steps.
Both export options require at least two steps and are disabled while a preview is running.
Click Export GIF. Progress shows as a percentage in the button. When complete, a Download Journey GIF link appears — click to save journey.gif. GIFs work everywhere — social feeds, Slack, Notion, GitHub issues.
Click Export Video. Progress shows during rendering, then a download link appears for the MP4. Video gives higher quality and smoother motion than GIF, especially at 60 fps, but requires a video player to view.
Exporting large journeys with many steps can take a minute. FPS has the biggest impact on render time and file size.