This note organizes how I handle change on web screens while referring to natural motion and light. Together with the question of whether it is needed at all it looks at how light, form, user input, and time spent looking at the screen change.
I do not refer to nature because natural motion is correct. I do so because cause and effect can be observed as a continuous sequence. On screens where speed of operation comes first I choose linear cuts and immediate response. What I deal with here are cases where motion and light convey space, state, and shifts of gaze. I do not generalize specific values. I write about what was kept and what was cut during production.
- ※ This article is an AI translation of the Japanese original.
On a web screen you can freely change form, color, and position but weight and resistance as they exist in nature are not there from the start. If you add motion without any influence each element can look as if it is changing on its own. So you need to keep in mind why motion begins, where it travels, and how it settles. When making that judgment I sometimes recall natural motion and light I have seen before.
When the direction of light changes shadows move and when the viewing position changes reflections change. In nature one change does not happen alone. It appears through relations with the surroundings. I use how clearly that causality can be seen as a cue for judgment.
As an entry point the first thing that came to mind was looking up at the water surface from underwater. I have liked free diving since I was young and often go to Izu. Just entering the water is fine but what I especially like is diving deep and looking up at the surface. On a hot day the surface seen from underwater refracts light and scatters it in a busy glitter while my body underwater and the scenery around it feel somehow quiet. Little sound reaches the ear and only the motion of floating bubbles and the intervals of my breath feel close. The light is busy yet the whole feels quiet and I am drawn to both being there at once.
At night the look of the surface changes completely as daytime transparency becomes hard to see and faint light reflects on a dark plane. Looking only at that undulation it can look not like water but like mountain ranges stretching far or like barren land, making the same surface feel as if it takes you somewhere else.
Seeing the same surface become light, a mirror, or a landscape depending on time and viewing position, I think what I take from nature is less form than this way of grasping change.
Water surface
From land the water surface looks like a flat boundary dividing water and air. Looking up from underwater that boundary becomes a single surface covering overhead. The sky seems close but it is actually beyond that surface.
The surface transmits light while reflecting and each time it wavers it breaks apart and reconnects the underwater and above-water views in fine pieces. It looks as if it has form yet there is no line fixing that form. While you look the boundary itself is moving so it is hard to remember as a still picture.
If you photograph it the surface stops as a single texture but the impression you actually had includes the time before and after. Places where light gathered quickly break apart and a form that is similar yet a little different appears elsewhere. The same pattern seems to repeat yet it never returns to the same arrangement even once.
This experience also connects to Gibson’s The Ecological Approach to Visual Perception, which I touched on in a previous note. Texture as Gibson treats it is not a pattern decorating a surface but information for knowing the tilt and depth of a surface and distance from the surroundings through changes in density and continuity. When the viewer moves the array of light also changes and you can tell which way you yourself are moving.
I am not drawn to texture only because I like fine patterns. Even when the visible form does not settle you can sense surface and depth from its change and I am drawn to seeing texture not as the surface of an object but as information between the environment and myself. In web 3D as well placing a single-color surface alone can make orientation and distance hard to read and texture density, distortion of reflected images, and lowered contrast from fog become cues for reading depth. On aircord’s About page discussed later as well, when the viewpoint moves with scroll the relation between the logo and its reflection and the look of the water surface change. From that continuity you can tell whether you are above water or underwater.
In UI too spacing and overlap among elements are not only decoration but information for knowing how far the same group extends and what sits in front. I think of using texture not as adding a pattern but as conveying the relation between a surface and a viewpoint.
Change
Water’s motion has a cause and what follows: wind touches the surface and near the shore the terrain affects it. The motion that is born travels outward, overlaps with other waves, breaks its form, and fades. Not everything on the surface moves the same distance or at the same speed, and nearby waves arrive sooner and larger while distant motion arrives later and smaller.
When trying to make motion on the web look natural people sometimes add random values or noise, which can reduce uniformity to a degree but irregularity alone does not mean it looks natural. What matters is what started the motion, where it traveled, what resisted it, and how it settled.
For example after one element moves the surroundings react a little late, the same change weakens as it moves away, and something that began with force meets resistance before finally stopping with a small sway. Naturalness appears less in individual forms than in this before-and-after relation. On the web user input and state change become the cause, and passing that value to multiple elements lets change travel. Placing delay or damping along the way creates resistance and moving toward a target value after input stops lets the motion settle.
Physical calculation does not by itself make things natural and bringing actual water onto the screen as is may be too fine as information. You need to keep relations and organize change according to what you want to show.
When creating change for the web performance cost as well as appearance becomes a factor in making a choice. Fine calculations and additional texture lookups increase the information, but if that difference does not contribute to the role of the expression only the processing remains. This is not to say that heavy expressions should be avoided. I judge how much processing to use for what needs to be conveyed together with the appearance.
How far to build a water surface
I made this judgment as well when producing aircord’s About page. The first view places a 3D logo and a water surface and the viewpoint moves underwater with scroll. What was prioritized here was the presence of the logo and the body text that follows after scrolling, while the water surface is a background that indicates space rather than a standalone showcase. I judged the information and processing to retain in the water surface from both appearance and performance cost.
In prototype 1 I pushed the surface quality hard. Layering normal textures four times at different scales and speeds and adding refraction, Fresnel, and specular makes it easier to tell that it is a water surface. But fine ripple keeps breaking the logo’s reflection so the motion of the surface starts to be seen before the logo. After scrolling body text also overlaps and if fine motion keeps remaining it competes with what is being read.
In terms of performance cost the prototype looks up the normal texture at every water-surface pixel four times to combine normals and twice to determine the sparkle of specular light. Fresnel and specular calculations add further processing so it places more work on the GPU than the current version. The surface covers a large part of the screen and continues moving after operation stops. On a page that presents the water surface itself there could be reason to keep this processing, but on this About page I judged that it was not necessary to keep spending processing on fine background texture. I did not compare frame rates across actual devices, so what can be confirmed here is limited to the greater amount of processing in the implementation.
In current version 2 I removed the normal-texture lookups and Fresnel and specular calculations while keeping large distortion and reflection. I chose to reduce processing while preserving the priority of logo, reflection, and body text rather than showing water accurately.
Here I line up the two versions and look at whether the gaze goes to the surface before the logo is recognized and whether body text and motion both claim attention after scrolling. At the same time I check whether the information and processing used to convey the water surface fit its role. The cut line is where the surface still reads as water without drawing the eye before the logo or body text and without using more processing than necessary. Appearance and performance cost are considered together when deciding what expression remains as the background.
This judgment was not confirmed by user testing of which version was better. It was a production judgment made by lining up the visual priorities of the About page with actual scroll states. The same result does not necessarily follow with another purpose or amount of information and differences in sensitivity to motion and accessibility also cannot be evaluated from this comparison alone and need separate checks.
Scroll input is mapped to a dive amount from 0 to 1 and that value is passed to camera angle, logo position, rotation, scale, and opacity. Strength and speed of change can be checked and adjusted from the demo GUI but the values themselves change with display area and information density.
When scrolling stops the camera and logo settle to their target positions and after that only the water surface continues a small repetition. Here I separate change that responds to scroll from change that continues even without operation. The former conveys state change from operation and the latter keeps the surface not as a still background but as an environment that has time. Moving things while there is no operation is limited to cases where that continuity conveys space and if it has no role I stop it.
What I cut when moving to the current version was not the sense of water itself. I kept only the sense of water needed to convey scroll input and change on the screen.
Keeping looking at water
Thinking about the water surface brings back a Roni Horn exhibition I saw at the Pola Museum of Art in Hakone. Titled “When You See Your Reflection in Water, Do You Recognize the Water in You?”, it included photographs of the River Thames surface, glass sculptures like water mirrors, and portraits shot at hot springs in Iceland.
Among them Still Water (The River Thames, for Example) is a work of fifteen photographs and words that repeatedly photograph the Thames surface. It follows the same river surface yet color, reflection, and flow differ in each print, and although each image depicts water they do not all look like the same water. What stayed with me was the attitude of remaining with one subject and looking at the differences that appear on its surface, following how far the same thing can become another appearance rather than moving to a new motif.
What stays especially in memory is Saying Water, in which Roni Horn herself reads a prose poem about water. The video begins while it is still light and the surroundings gradually darken as the reading continues. No large event occurs but by listening to the voice in the same place you find it has become night. The reading is matter-of-fact without being weak and instead I feel force in the way she continues to stack words at the same strength. The poem does not gather water into one meaning but moves among color and form, darkness, fear, and attraction. Words that feel as if they have left water return to it after a while, and from that repetition I felt something like the tide coming in and going out.
There is no large movement inside the frame but the whole span in which light changes, the voice continues, and words leave and return had become the motion of water.
Feeling that the night surface looked like mountain ranges may also be why I recalled this exhibition. The Pola Museum commentary also explains that the surface of Gold Field evokes both a rippling water surface and a mountain-like landscape. Water may spend more time looking like light, mirror, glass, or terrain than looking like water. Still from how it moves you can tell it is water, and even when form and color change the way it changes preserves the identity of the subject.
What becomes visible through light
I have looked at water so far but what was also making its expression was light. Light too has no form and becomes knowable only when it hits something, reflects, or is blocked.
Light seen from underwater changes form finely with small tilts of the surface. On a night surface limited light is stretched and brings out the undulation of a dark plane. With fog or particles in the air even the path of light that would normally be invisible takes form. In a dark place it is not that the amount of light is small. The difference between surfaces that are hit and surfaces that are not becomes clear.
I am more interested in what becomes visible through light than in placing light itself as decoration. Even the same object looks different in surface hardness, depth, and distance from the surroundings when light changes. Handling light on the web is not a matter of adding glow to make light. A bright place is accompanied by darkness and a reflecting surface by one that does not receive light, and through that difference space and material become clear.
The range for adding light
This may be a little off the main point but what I recall about light is KAMUY LUMINA, which I experienced in the forest at Lake Akan. You walk about 1.2 km through lakeside forest in Akan-Mashu National Park and follow a story rooted in Akan Ainu culture across eight zones of light, sound, projection, and interaction with rhythm sticks.
Because you walk through an actual forest the experience does not end only inside video but includes time advancing along dark paths and the distance before the next scene. The feel underfoot, the white of breath, and faint light leaking between trees are included as scenes switch. Time advances not only by looking but through bodily motion—walking, stopping, returning a rhythm.
When light hits, trunks and leaves appear and surrounding darkness makes distance clear while sound comes from the depth of the forest. After projection disappears the forest remains and you walk a dark path until the next scene. Trees and ground are not sets built for the production but things that were already there, and the production does not replace the forest with something else.
Moment Factory explains that it collaborated with the Ainu community at Lake Akan and the Ministry of the Environment and considered technology that reduces impact on plants and animals. It places Akan Ainu culture at the center of the story and light and sound also act on trees, ground, and distance that belong to that place.
What left a particular impression was the rhythm stick, which plays the voice of the story from your hand and works both as a guide tool and as a UI for taking part in it. In scenes where strangers wave sticks in the same place a shared time appears even without strong demands for cooperation, allowing one tool to carry guidance, participation, and synchronization with others. What matters here is not how much expression was added to the forest but that places to cast light and places to project nothing are separated while darkness and walking time are left.
In an exhibition you place yourself in time made by the work side but on the web the user decides the speed of progress. On aircord I did not reproduce exhibition time. I tied the progress of change to scroll. Experiences of Roni Horn or KAMUY LUMINA do not connect directly to design but they are one reference for thinking not only in travel distance of change but also in what remains. Actual judgment returns to the purpose of each screen.
What to keep
From nature we refer to many things—form, color, texture. What this note focused on is how those change in time: what begins change and where it travels, what resists it and how it settles, and what becomes visible and remains afterward.
When placing this change onto a screen the following five become one set of indicators.
- What begins the change
- How far among elements it is conveyed
- Where to place delay or resistance
- In what state it settles
- Whether that change competes with information being read or with operation
If intermediate time is needed to understand a state change I keep the before-and-after relation and if the destination is clear and intermediate change holds no information I switch immediately. Whether to make it continuous is centered less on comfort than on whether that time is information. Motion becomes part of design through the judgment of keeping needed relations and cutting change without a role.
UI becomes a cue for conveying which state scroll or input changes and when it has settled. In web 3D changes in reflection, light and dark, and viewpoint movement become cues for understanding surface orientation and distance. I think I will consider these two in future notes.
References
- Architecture and Vision
- aircord
- Roni Horn: When You See Your Reflection in Water, Do You Recognize the Water in You? – Pola Museum of Art
- Roni Horn, Still Water – Pola Museum of Art
- Roni Horn, Saying Water – Pola Museum of Art
- Bouquet of Emily / Gold Field commentary – Pola Museum of Art
- ABOUT – KAMUY LUMINA
- KAMUY LUMINA – Moment Factory