Motion recordK–INSP–007 · Inspiration
Cursor Lattice Pulse Field
A canvas lattice that drifts, yields to the pointer, and carries coloured signals that leave a decaying trail.
View studyBack to Explore SynCraft
K–INSP–025 · Inspiration · Animation
SynCraft
One-Line Town
A whole town drawn without lifting the pen, while three little residents run along behind the ink, hop the pit, the box and the steps, slide down the bridge, and jump together whenever the town is tapped.
- Authorship
- Third-party inspiration
- Techniques
- Single-path continuous line · Path-length dash mask · Sampled pressure strokes · Ink-frontier pacing · Parabolic obstacle jumps · Tap-to-jump playground · Eased follow camera with parallax
- Creator
- SynCraft
- Observed method
- Inline SVG inside a button / one route in <defs> revealed by a 14-unit mask dashed to getTotalLength() / generated pressure strokes / requestAnimationFrame residents driven by a jump table and a cubic bridge surface / ResizeObserver viewBox, IntersectionObserver and visibilitychange gating
One-to-one recreation / Live
A town in one line,
and three who live there.
The pen draws the whole town in eighteen seconds while the residents follow the ink, hop each obstacle and slide down the bridge. Tap the town to make them jump, draw it again from the start, or pause it.
Tap the town to jump
One-to-one recreation from the supplied archive: hero markup, stylesheet, story.js and town-model.mjs · element lookups by ref instead of document id · scroll arrow shown without its link · Manrope not loaded
Observed system / 03
A level the pen
builds as they walk.
These diagrams separate the continuous route, the pacing that keeps the residents behind the ink, and the jumps.
Why it is here
The drawing
is the ground.
Nothing in the town is revealed piece by piece. One white stroke fourteen units wide, dashed to the route's own length, masks all of the ink, and moving its dash offset is the whole drawing. The width is the quiet decision: wider than the heaviest ink, which tops out under six units, and narrower than the thirteen units between a trunk's two sides, so climbing one side never uncovers the other. Beneath the mask, the route is redrawn as short overlapping pieces thickened by how horizontally they run, so ground lines and roofs read heavier than walls, the way a broad nib behaves.
The residents never read the drawing. Their height comes from a plain function — flat ground at 254, and on the bridge the same cubic curves the ink uses, solved by bisection — and their hops from a table of six obstacles. On the bridge's far side they get a burst of speed downhill and sit down to slide, legs forward, tilted to the slope. Each pose is scaled by the inverse of the resident's size, so the smallest one still clears the same box.
It behaves well when nobody is watching. The frame loop is not idled off screen or in a background tab; it is not scheduled at all. Under reduced motion the town is painted finished, the residents stand still in the middle, the controls disappear and the button that makes them jump is disabled.
Most drawn-line heroes stop at the drawing. This one gives the line a reason to exist: the residents can only walk where the ink has already reached, so they trot along a step behind the pen, and every bump in the drawing — a box, a pit, a flight of steps, a bridge — becomes something they have to clear. The town is a level, and the pen is building it in front of them.
- Origin
- SynCraft homepage hero, the one-line town beneath the headline
- Creator
- SynCraft
- Source evidence
- User-supplied Safari web archive of syncraft.dev/en/, including the rendered hero markup, the site stylesheet, story.js and town-model.mjs at version 20260923-1; the same version was confirmed on the live page on October 18, 2026
- Observed construction
- The whole SVG sits inside one button labelled to make the residents jump. A distant layer of three birds and two clouds, then the town layer: the masked ink, the pen tip, and three residents — black with a flat hat, white with a pointed hat, yellow with a leaf — each built from a shadow, legs, arms, body, hat, eyes and landing dust
- Observed motion
- The route is revealed linearly over 18 seconds with a pen tip riding it. The residents run at 78 units a second, 36 units apart at scales of 1, 0.86 and 0.78, held 25 units behind the drawn ground. The camera eases toward 38 percent across the view at a rate of 1 − e^(−5Δt), and the distant layer moves at 0.35 of it. Frame deltas are capped at 50ms. Past the world's end the whole sequence restarts
- Observed interaction
- A tap anywhere on the town starts a 62-unit hop lasting 0.82 seconds, staggered 0.13 seconds per resident, ignored while paused, under reduced motion, or within 0.9 seconds of the last one. Draw it again restarts from the beginning; pause toggles a pressed state and swaps its label and icon
- Kaki treatment
- One-to-one recreation of SynCraft's homepage town at the owner's direction, quoting the archived hero markup, story.js and town-model.mjs (version 20260923-1): the 10,568-unit route and its 14-unit path-length mask revealed over 18 seconds, the generated pressure strokes, the pen tip, the distant birds and clouds at 0.35 parallax, the three residents with their bodies, hats, limbs, shadows and landing dust, the 78-unit-a-second run held 25 units behind the ink's frontier on the ground, the six-obstacle jump table with take-off and landing squash, the cubic bridge surface with its downhill burst and seated slide, the 0.82-second, 62-unit tap jump staggered 0.13 seconds per resident with a 0.9-second cooldown, the eased camera, the loop reset past the world's end, the viewBox sized from the stage, the off-screen and hidden-tab stop, the reduced-motion still frame with controls hidden and the town disabled, and the Tap the town to jump, Draw it again and pause controls with their labels and icons. Element lookups use refs instead of document ids so two copies can share a page; the homepage preview hides the controls; the scroll arrow is shown without its link; Manrope is not loaded.
- Accessibility
- Kept as the source has it: a labelled button for the jump, a titled and described image, a pause control with pressed state, a stop when off screen, and a finished still frame under reduced motion. The homepage preview hides the controls and is removed from the tab order.
- Rights boundary
- No redistribution license identified. Kaki quotes the source markup, drawing and code verbatim for study under its attributed one-to-one recreation default, and will remove or replace them on a takedown request from SynCraft.
- Reviewed
- October 18, 2026