ISHIKAWA.CO

media / open source / services

Return to the Living Atlas

[ MAKING OF / WALKABLE ATLAS ]

How a walkable world was made.

Not a portfolio that displays work, but an official site where work and life are discovered by walking.

ishikawa.co — Walkable Atlas transforms six operated publications, development, and writing into a horizontal Act I and a vertical Act II. This record includes not only the finished work, but the discarded direction, constraints that stayed, and failures corrected through measurement.

The abandoned 3D cyber-city concept beside the early Walkable Atlas made from dots and one ground line
Left: the abandoned 3D direction. Right: the first world after returning to dots and one ground line.
2 acts
exploration and information joined in one DOM
6 worlds
real activities expressed through distinct verbs
1,400
the particle ceiling without evidence for more
14.2ms
frame p95 in the Awwwards baseline

01

[ DECISION ]

A working 3D world was not the right world.

Technical success and personal identity were not the same thing.

The first direction was a 3D cyber city. It looked complete, yet it placed the work inside a borrowed image of the future. It could not explain why more than twenty years of practice and six publications belonged together. The concept was withdrawn. The work returned to one falling particle, a ground line, and a traveler beginning to walk. Dots stopped being a performance shortcut and became the smallest unit that could connect different activities.

02

[ SIX WORLDS ]

Walk with one grammar, discover six verbs.

Walking left and right, pausing, and investigating remain consistent. On top of that grammar, moss catches, taupe connects, isLog records, Ojicra builds, Monoomoi unwraps, and Monoerabi chooses. Each verb changes particles, sound, timing, and discovery. Signs and articles are not decoration; they return the imagined world to publications operated in reality.

The six particle worlds of moss, taupe, isLog, Ojicra, Monoomoi, and Monoerabi Editorial
Six activities unfold from the same dots into different physics and landscapes.
An article caught and discovered while fishing in the moss world
A discovery does not end as an effect; it opens into a real article.

03

[ ONE DOM / TWO ACTS ]

Exploration and information are not maintained twice.

Act I draws experience with Canvas 2D. Act II lets people read the person, publications, open source, services, and recognition as semantic HTML. They are not separate sites. Important server-rendered HTML exists in the same DOM from the beginning, and JavaScript promotes it into the Living Atlas when available. Initialization failure, missing Canvas, or no JavaScript never removes the information.

  • Important information is server-rendered in PHP
  • Experience and SEO fallback share the same DOM
  • Vanilla JavaScript and Canvas 2D without a build step
  • Failure opens into ordinary information instead of a dead screen
The Living Atlas carrying the memory of Act I along its left rail
The HTML built to be read becomes the second act of the journey.

04

[ SIGNATURE MOMENT ]

The walked world breaks apart and reforms as a map.

The largest motion budget is concentrated in one transition from Act I to Act II. The particle languages of six worlds loosen, fall with the traveler, and reform as a vertical map carrying the memory of the journey. Reduced motion removes the long fall and communicates the same cause through a short state change.

Three stages in which Act I fractures, the traveler falls with particles, and the Living Atlas reforms
fracture / freefall / reform. The largest motion budget belongs to the moment that joins both acts.

05

[ CONSTRAINTS ]

Constraints define the shape of quality.

The particle ceiling is 1,400. Retina Canvas backing-store pixels are capped. Rendering changes between active, idle, and background states, while callback work can lower adaptive quality. On lower quality, forms simplify to circles without losing meaning or interaction. The baseline measured frame p95 at 14.2ms, JavaScript p95 at 1.6ms, and Canvas p95 at 2.2ms. These are pre-release browser engineering samples, not field Core Web Vitals.

Development performance HUD showing frame, JavaScript, Canvas, and particle measurements for Walkable Atlas
Callback work, not appearance alone, drives adaptive quality.

06

[ ACCESS / INPUT / PRIVACY ]

The meaning of the journey survives a change of device.

Keyboard, touch, and optional Tilt Walk resolve to the same left and right movement. Touch remains after motion permission is denied, and sound begins only after a user gesture. Reduced motion reaches the same information and result through a shorter path. Discovery order stays within the session; raw tilt angles, detailed movement history, and constellations are not sent to the server.

  • A / D, arrows, touch, and Tilt share the same movement model
  • Touch fallback remains after Tilt denial or lack of support
  • Reduced motion preserves both acts and the result
  • The constellation is generated locally and saved only by choice
Touch and optional Tilt Walk controls moving the traveler on a smartphone
Mobile is not a reduced desktop; the device can become an optional movement instrument.

07

[ TEST / REVISE ]

Walk in real browsers, then turn failures into contracts.

Testing starts from a fresh visit and uses ordinary controls to walk through Act I, discovery, transition, Act II, and information pages. Desktop, mobile portrait and landscape, keyboard, touch, Tilt granted, denied and unsupported, reduced motion, no JavaScript, and repeat visits are recorded separately. Sign vibration, landscape article takeover, a narrow Act II swipe area, autoplay warnings, and transition input races were found on real screens, corrected, and fixed in regression tests.

08

[ TIMELINE ]

The finished work is a sequence of decisions.

  1. The site moved from a structured corporate presentation toward a world where real activity is discovered by walking.

  2. A 3D cyber-city direction was built, then withdrawn because it felt like a borrowed future rather than the work’s identity.

  3. A visual grammar of one particle, a ground line, a traveler, and six worlds was established.

  4. The SEO fallback HTML was promoted into Act II as the Living Atlas itself.

  5. Mobile, Tilt, reduced motion, no JavaScript, and performance budgets became one experience contract.

  6. CSS Design Awards recognized the site with Special Kudos and three public-vote awards. The next focus became first-visit clarity and global comprehension.

[ SOURCES / CONTINUE ]

Continue into the world and its evidence.

The experience, public code, award evidence, and a longer Japanese production record remain available.