Sign in

Motions / @iamsuosi/field-atlas

A frame of a film in Field Atlas

Plays live in your browser, drawn by web code rather than a video, so it can use your computer's processor and graphics while it runs. The sound is on.

Field Atlas

An editorial atlas map that the narration moves across.

Also 地图志

Make a film in this look

Read https://motionhub.dev/llms.txt, then make a film about "<your topic>" in the motion https://motionhub.dev/m/@iamsuosi/field-atlas/

Put in your topic and paste it into any agent that can open a URL.

Or install the skill for every agent, then use /motionhub
npx skills add motionhub-dev/motions -g
Works in
RemotionHyperFramesand any engine, from MOTION.md
Version
1.1.0
Format
motion/0.3
Licence
CC-BY-4.0 for the look · MIT for the code
Looks
flat-vectorprintmodernlight
Package
273 KB, sha256:174db84ea46d

Use it

  1. Copy the prompt, put in your topic and paste it into your agent
    Read https://motionhub.dev/llms.txt, then make a film about "<your topic>" in the motion https://motionhub.dev/m/@iamsuosi/field-atlas/

    Any agent that can open a URL: it reads llms.txt, fetches the motion, checks it against its SHA-256 and makes your film in whatever engine it uses.

  2. Or install the motionhub skill once, for every agent on your computer
    npx skills add motionhub-dev/motions -g

    Claude Code, Codex and the other agents skills knows; without -g, for this project only.

  3. Then call it by name
    /motionhub make a film about <your topic> in @iamsuosi/field-atlas
  4. Made a look of your own? Share it the same way
    /motionhub share this project's look as a motion

    Your agent writes the motion under your GitHub name, runs the checks and opens the pull request when you say yes.

MOTION.md

Raw · GitHub

An editorial atlas map the narration moves across: a journey as one red line the camera rides, regions filled in ochre with their key, names set by an atlas's rules, and one camera from the globe down to a town and back.

Essence, and what it is not

  • A real map from public-domain geography: cream land, grey-blue water, coasts lined with water, a fine graticule.
  • One camera, never a cut: the globe turns and zooms in log space to a town; the scale bar and locator answer it.
  • The subject is one red line in a paper casing; what is not the subject is ink or paper.
  • Data is a fill: regions in one ochre, darker for more, with a key in the corner.
  • Atlas lettering: towns in the serif with a dot, countries and states in spaced capitals, water in blue italic.

Not a satellite photo (nothing photographic), not a metro diagram (geography is never straightened), not Depth Stage (silhouettes in depth; here a flat map from above), not Iso Works, not a dashboard (the map is the chart).

Ground and material

atlas.tsx draws through geo.ts: one orthographic projection at every zoom. Land panel, water panel2, the page around the globe bg. Coasts carry two wide pale op strokes under the land, as an engraved atlas rules the sea. Borders solid border, states dashed. Below zoom 2 the globe has a soft light, a rim and a shadow; closer it is flat. Geography is assets/world.json (Natural Earth 1:50m, public domain, about 10 km): countries, lakes, major rivers, and states of the USA, Canada, Australia, Brazil, India and China. A close view adds the work's finer data with Layer and raises detail.

Colour roles

  • data red: the line being told, its head and corridor, the one place that matters (a point, the accent note, the locator's footprint).
  • text ink: a line already told, names, the scale bar, the plate.
  • grad ochre: fills only, from panel (none) to full (max); the Legend uses the same scale.
  • op blue: water, coasts, rivers, graticule, water names. border: borders. muted: state names, notes.

No decorative fill, no two hues in one fill, no red but for the subject; borders, not tints, tell countries apart.

Type and captions

Hanken Grotesk for spaced capitals (countries, states, kickers, keys), the scale bar and small lines; Newsreader for towns, water (italic) and titles. Chinese: Noto Sans SC with Hanken Grotesk, Noto Serif SC with Newsreader. Towns 34 to 40 px, countries and states 30 to 32, figures 100+, titles 80 to 96. Names carry a thin paper halo. The caption is a paper label with an ink rule on its left, like a legend box, legible on land and water.

Motion

The camera is the motion: zoom (already logarithmic), lon, lat with easeInOutSine; five steps of zoom take three seconds or more. A route's draw is the Atlas's followAt; followMix picks it up. The frame drifts, so a held map lives. Lines grow from their start, regions fill as reached, names fade in on their word and with their zoom range, figures count up. Never moves: north up; scale bar, credit, locator.

Composition and framing

The subject in the middle third; plates, keys and notes on paper cards in the corners. A continent fills the width; a close view shows a town with its river and a neighbour so the scale reads. Between ideas the camera travels: pull back, turn, come down. Scale bar bottom left, credit bottom right, nothing under the caption.

Sound

None required; a quiet bed at most, and never a tick per region.

Components

  • data — Legend (react/parts/legend.tsx): The key to a Regions fill: a small-capitals title, swatches on the same ochre scale with their meaning, and the source; each step arrives when it is said. Fits: beside every filled map; a count or a share in a few steps
  • data — Margin note (react/parts/note.tsx): A figure in the margin: a large serif number counting up, its unit and what it measures, with a leader to its place. Fits: a distance, a duration, a population or a date about a place; a pair that contrasts (usual against this one)
  • data — Regions (react/parts/regions.tsx): Countries, states or provinces filled in one ochre by a value, darker for more, filling one after another or as a route reaches each; read with a Legend. Fits: a value by country or state (a share, a count, a rate); the places an event touched
  • ground — Atlas (react/parts/atlas.tsx): An editorial map under one camera that turns the globe and zooms in log space from the Earth to a town, its scale bar following; everything else is drawn on it. Fits: the whole film, one map behind every scene, so the camera never cuts; tween lon, lat and zoom, or follow a route
  • link — Route (react/parts/route.tsx): A journey as one red line drawn across the map from its first point, led by its head, with its corridor when the path has a width; it turns to ink once it has been told. Fits: a journey or a migration; a shadow, a storm or a flight crossing the land; a trade route; the path the camera rides (Atlas follow)
  • mark — Locator (react/parts/locator.tsx): A small globe in a corner, turned to where the camera is, with the frame's footprint in red; it shows once the camera is close. Fits: every close view (a town, a valley, a coast); the moment a zoom lands
  • mark — Place (react/parts/place.tsx): A name set by kind: a town as a dot and serif name, a country or state in spaced capitals, water in blue italic, the place that matters in a red ring; shown in a range of zoom. Fits: every name the narration says, on its word; towns along a route; the point where two things meet
  • steps — Stops (react/parts/stops.tsx): A journey's stops numbered on the map and down a timetable card in the margin, each with its note; they land in order or as a route reaches them, the latest in red. Fits: the stations of a line, the stages of an expedition or a migration, the steps of anything told as places in order
  • term — Gloss (react/parts/gloss.tsx): A gazetteer entry on a paper card: a name in italic serif, its origin in spaced capitals, then its meaning on its own beat, with a leader to the place. Fits: what a place name means (a desert, a river, a strait); a term of geography the narration defines (watershed, isthmus, monsoon)
  • title — Plate title (react/parts/plate.tsx): The title as an atlas plate: region and dates in spaced capitals between hairlines, the title in the serif, on a paper card in a corner. Fits: the opening over the globe; a new region; the closing card

Native moves

  • Ride the route. The line draws while the camera follows its head, then pulls back; a Route's shade sweeps a real-scale shadow over the land with it. Fits content like: a migration; an expedition; an eclipse or a storm crossing a continent.
  • Count the stops. Stops lands each station as the line reaches it, numbered on the map and down the timetable card, the latest in red. Fits content like: a railway coast to coast; the camps of an expedition; a river's towns from source to sea.
  • Say what the name means. Come down to a place and set its Gloss: the name, where the word comes from, then what it means. Fits content like: a desert named for having no trees; a strait named for its winds; a river's name in the language of the people who named it.
  • Fill by value, with the key. Regions fill as a route reaches them, each key step on its word; the top class lifts off like cut paper. Fits content like: the states a law reached; countries over a threshold; where a language spread.
  • From continent to town. Four to six steps of zoom; towns stream past, the scale bar steps down, the locator comes in, the point lands with a ripple. Fits content like: where two journeys cross; the town a story starts in; a valley a statistic hides.
  • Climb back to the globe. Pull out to the turning Earth, the place still in red. Fits content like: one village's record; a crash site in an ocean; the source of a river.

Avoid: pitfalls

  • A close view inside a fill or a corridor is one colour: raise the Regions' dim and lower the Route's corridor to its dashed limits.
  • Two red lines read as two subjects: turn the earlier to ink (told) unless they meet.
  • Coarse borders at town scale: raise detail, draw finer data with Layer.
  • Names at the wrong zoom pile up: give each a zoomIn and zoomOut.
  • A fill that appears at once is a slide: fill as it is said.
  • A provider's tiles or a published map's layout: use Natural Earth or licensed data, credited.
  • Natural Earth draws disputed borders as held on the ground: a work for an audience with its own official map (China, India) checks them and draws its own.

Freedom in each work

Each film chooses its places, routes, fills, camera path, moves, opening and ending. Three structures: one journey ridden end to end with stops named; a regional comparison that fills, then dives into the region that breaks the pattern; a mystery that starts at a town and climbs out to the continent that explains it.

Colours tokens.json

  • bg#ECE7DC
  • panel#FAF7EF
  • panel2#D3E1E3
  • border#A99D8B
  • text#22262B
  • muted#646A70
  • faint#DCD5C7
  • data#C23B26
  • grad#B98432
  • op#5F8A99
  • good#5E8A57
  • bad#B33A2B
  • warn#C98A2E

Faces

sans
Hanken Grotesk, Noto Sans SC, sans-serif
mono
JetBrains Mono, monospace
display
Newsreader, Noto Serif SC, serif

Credits

Field Atlas is an original motion by SuoSi.

Fonts

  • Hanken Grotesk: SIL Open Font License 1.1
  • Noto Sans SC: SIL Open Font License 1.1
  • JetBrains Mono: SIL Open Font License 1.1
  • Newsreader: SIL Open Font License 1.1
  • Noto Serif SC: SIL Open Font License 1.1

Assets

  • react/assets/world.json: its source and licence are given in MOTION.md

More by SuoSi See all