Motion and materials
18. Animation, transitions and temporal behavior
HLD — Arrows show causal cues and bounded local effects. Visibility, lifetime and reduced motion constrain frame work. Open the diagram for full size.
18.1 Animation describes change over time
An animation changes a presentation value over time. A button face moves down. A highlight fades. A progress indicator advances. A transition coordinates a change between interface configurations, such as opening a dialog or moving from a list into a detail screen.
These mechanisms are related but not identical. A component can animate without changing its logical structure. A structural transition may involve two views, focus transfer, resource retention and input admission. Treating both as a duration attached to a style misses the lifecycle decisions involved.
Core motion belongs to Surface. Basic press feedback, enter and exit behavior, navigation transitions and layout changes must work without the richer field and shader systems. Tactile adds material relationships and sensory expression; it does not own the only way to move a component.
18.2 Duration-based motion and spring-based motion answer different questions
A duration-based animation answers: how should the value move from one state to another over a chosen interval? An easing function controls the progress. This is useful when a coordinated sequence needs a known timing relationship.
A spring-based animation answers: how should the value respond as it approaches a target under a chosen physical response? Stiffness and damping affect the trajectory. The system can retarget while preserving current motion rather than always restarting from a fixed origin. Compose exposes duration-based and spring-based animation mechanisms with different controls. 31
Neither model is universally better. A progress value tied to actual work should not be faked by a spring that implies completion. A press response may feel more coherent when it reverses from its current velocity. A carefully timed crossfade may be appropriate for a mode change.
Surface's motion contract therefore describes intent and interruption policy, not only a universal duration. A renderer chooses a qualified implementation that preserves the required behavior.
18.3 A motion channel has one owner
Several systems can affect a component. Layout assigns its base position. A drag changes its content transform. A press changes the local face. A field contributes a small expressive offset. These values must be combined in a defined order.
Figure 32. Different transform channels can contribute to one visible result, but each channel has one owner. Composition order is explicit so an animation driver, a drag controller and a recipe do not overwrite the same property independently. See the illustrated PDF for the diagram.
Without channel ownership, an update from one system can erase the others. A React style update may replace a transform controlled by a native animation. A field response may fight a drag controller. A theme swap may reset the animated value while the gesture is still active.
The renderer's final transform is a composition of these channels, not a race between unrelated writers. The same principle applies to color, opacity and clipping. An implementation can optimize the combination while retaining a clear source for each value.
18.4 Interruptions are normal input
A person can press again before a release animation settles. A sheet can be dragged upward and then reversed. A navigation action can occur while the previous transition is still visible. A window can resize during a shared-element transition.
The contract must define these cases. A response can retarget from its current presentation. A structural transition can complete or cancel under a policy. A new layout can rebase the animation geometry. The framework must not assume that every animation runs uninterrupted to its planned end.
A simple local value interface exposes the required boundary:
The owning driver supplies a monotonic clock. Its internal state retains current position and velocity where required by the response model. A sample is presentation data, not a graph mutation. Once settled, the driver stops requesting frames unless another change requires them.
18.5 Visibility during a transition is not permission to act
When screen A exits and screen B enters, both may be drawn temporarily. That does not mean both should continue admitting operations. The transition identifies which semantic control owns focus and when the incoming content becomes interactive.
Figure 33. The outgoing screen can remain as a visual layer during the transition. Input and application authority move according to the transition policy, so a decorative copy does not become a second active control. See the illustrated PDF for the diagram.
Shared-element transitions require the same distinction. A photograph can appear to move from a card into a detail view, but the transition copies are drawing artifacts. They should not create duplicate accessibility targets or expose private content across unrelated scopes. CMP's shared-element APIs provide implementation mechanisms; the application still supplies appropriate identity and ownership. 32
Business completion must remain independent. A route result cannot rely exclusively on an animation callback that might be cancelled. A purchase does not succeed because a confirmation panel finished sliding into view.
18.6 Reduced motion is an alternate presentation, not a broken state
A reduced-motion policy can shorten, simplify or remove designated movement while preserving useful feedback. The control still needs a clear pressed, selected or focused state. A navigation operation still reaches its correct destination.
The policy also affects active animation. Switching preferences should not leave a component halfway between two semantic states. The driver can settle to the required result or use a simpler transition while preserving input and ownership.
Testing uses a deterministic clock. A test can advance to the middle of a transition, reverse it, resize the host and verify the resulting state. This exposes lifecycle errors more reliably than waiting for a screenshot captured after every animation has already finished.
19. Tactile interaction as a system of material relationships
19.1 A material response starts with a believable relationship
A tactile interface suggests that its elements have weight, support and resistance. A button does not merely become smaller. Its face moves toward a support. A card can respond to the contact of a child control. A surrounding field can reveal the origin and spread of an interaction.
The purpose is not to simulate the physical world perfectly. It is to make response intelligible. The visible movement should agree with the interaction that caused it, remain within usable bounds and stop when it has conveyed its meaning.
Figure 34. A conceptual tactile cutaway separates the moving face from its stationary contact plate. Contact produces local visual and optional haptic feedback. A bounded response can also affect nearby surfaces; none of these effects establishes application success. See the illustrated PDF for the diagram.
A quiet interface can use the same model with almost no movement. The architecture remains the same because material response is selected by recipes and user policy rather than embedded in application workflows.
19.2 A spring is a model of response, not just a curve name
Let $x$ be displacement from a target, $\dot{x}$ velocity and $\ddot{x}$ acceleration. A simple driven spring satisfies:
$$m\ddot{x}+c\dot{x}+kx=F.$$
The mass $m$ controls resistance to acceleration. The stiffness $k$ controls the restoring force for a displacement. The damping coefficient $c$ removes motion. The external force $F$ represents an applied drive. These quantities play different roles even if a design tool exposes them as nearby sliders.
For ordinary control animation, normalized parameters are often more convenient:
$$\omega_0=\sqrt{k/m},\qquad \zeta=\frac{c}{2\sqrt{km}}.$$
The natural angular frequency $\omega_0$ controls the characteristic speed of response. The damping ratio $\zeta$ describes the amount of damping relative to the system's critical value. A backend expecting a damping ratio must not receive the raw damping coefficient unchanged.
Figure 35. Illustrative normalized spring responses to a changed target. Lower damping permits more oscillation. The curves are generated from a mathematical response model, not measured performance or device-calibrated material data. See the illustrated PDF for the diagram.
The graph makes the distinction visible. A spring that oscillates less is not necessarily stiffer; damping can change overshoot without expressing the same change as stiffness. Named profiles such as Rubber or Steel are useful experience presets, but they should not be presented as experimentally accurate models of those materials.
19.3 Ordinary controls use bounded response profiles
Most components do not need raw physical parameters. A small set of profiles can express a quick contact, a soft selection response or a restrained panel transition. A recipe selects a profile and an amplitude appropriate to the component.
The driver retargets from the current state when supported. It settles once displacement and velocity are sufficiently small. It then stops idle work. After backgrounding, a large elapsed interval is handled through a defined resume policy rather than thousands of catch-up steps.
Fling behavior needs its own model. Velocity-proportional drag and constant opposing friction are different dynamics. A field named friction is insufficient unless its units and equation are stated. A shared API should describe the behavior expected by the component rather than letting each renderer guess at a similarly named parameter.
The simplest satisfactory model is preferred. A single control can use the platform's spring implementation. Shared simulation becomes valuable when several participants need to respond to one local field or a coordinated physical relationship.
19.4 Explicit coupling and spatial coupling
Explicit coupling describes a named relationship. The Send button can affect the composer plate that supports it. The relationship exists even if the two visual elements are not near each other according to a generic distance rule.
Spatial coupling describes participation in a local field. An impulse spreads from a location, and visible participants respond according to their position and material policy. Each receiver need not know every possible emitter in advance.
These relationships are inspectable, but they are not application service edges. A data dependency does not mean that two components should shake together. A navigation edge does not define a physical neighborhood. The effect scope has its own meaning within the graph-owned presentation boundary.
19.5 The field is the decoupling point
A button emits an impulse. A card samples the field. A procedural background consumes field parameters. The button does not call either receiver's implementation directly.
An impulse identifies its scope, source instance and interaction sequence. Its origin is expressed in the field's logical coordinate system. It includes a monotonic time, bounded amplitude and maximum lifetime. Optional directional information can support a fling or impact response.
The field validates those inputs. A source outside the scope cannot create an unrelated cross-window effect. Duplicate cues are not re-emitted indefinitely. Expired impulses leave the active set, allowing the owner to stop frame work when no response remains.
Figure 36. A local impulse expands and decays. Participants respond while its influence reaches them. The field is bounded in space, time and magnitude rather than being an application-wide broadcast of perpetual motion. See the illustrated PDF for the diagram.
19.6 A useful field does not require a fluid solver
A first implementation can evaluate a bounded set of analytic impulses. For a point $p$ at time $t$, one visual displacement model is:
$$d(p,t)=\operatorname{clamp}\left(\sum_i A_i,a(r_i),q(\tau_i),w(r_i,\tau_i)\right).$$
Here $A_i$ is an impulse's amplitude. The distance $r_i$ measures how far the point is from its origin. Its age is $\tau_i$. The function $a$ attenuates distance, $q$ decays time, and $w$ supplies the visible wave shape.
Each term has an understandable job. Attenuation prevents a small press from affecting the entire interface. Decay makes the response disappear. The wave function can create an outward-moving ring. Clamping prevents a combination of impulses from producing an excessive displacement.
This is a visual kernel, not a physically calibrated water model. A learning application that teaches fluid dynamics must not treat it as a substitute for its scientific simulation. The UI field exists to communicate interaction, not to redefine domain calculations.
With $k$ active impulses and $n$ visible participants, direct sampling takes $O(kn)$ evaluations. Bounding both counts provides a simple initial performance model. Spatial indexes or GPU buffers are optimizations to introduce only when a measured workload justifies them.
19.7 Prevent accidental feedback loops
The motion of a receiver must not automatically become a new input impulse. Otherwise a pressed button moves a card, the card emits another impulse, and the resulting movement repeatedly excites the original button.
Secondary effects can be designed deliberately, but need attenuation, depth limits and event identity. The default is one admitted interaction cue followed by bounded downstream response. This makes the effect explainable in the inspector and reproducible in tests.
Figure 37. Separate mounts and previews have separate effect scopes unless coupling is explicitly declared. Shared business data is not permission for one window's interaction to disturb another. See the illustrated PDF for the diagram.
Coordinates also need ownership. Scrolling changes the relationship between a component and its field. Reparenting can change its scope. Device pixels are not interchangeable with logical field coordinates. The renderer supplies transforms and updates them when layout changes.
19.8 Material response must preserve usability
Decorative motion should not make controls difficult to acquire. A hit target can remain stable while a face moves a small amount within it. Actual draggable content, by contrast, needs input geometry that follows the intended document or viewport transformation.
A field should not distort the meaning of text, move a destructive action unpredictably or create a visual duplicate that can also activate. Accessibility bounds and focus remain associated with the semantic control.
The reusable mechanics of BestBuds' SignalTile provide a concrete implementation seed: a fixed support, a moving face and local observations of press, hover and focus. Product-specific shapes and social color roles remain in the product's design package. 33
The system is successful when the relationship feels coherent and can still be turned down. Rich expression should be a selected capability, not a mandatory cost imposed on a quiet form or a low-power host.
20. Procedural materials, shader backends and sensory output
20.1 Appearance and interaction are different inputs
A procedural material is an image generated from functions rather than only a stored bitmap. Noise can supply texture. Time can vary that texture. Color ramps and lighting approximations can suggest a material.
Fractal Brownian motion combines noise at several scales. It is useful for layered variation, but it does not by itself describe the wave caused by a button press. The interaction field supplies that causal information. The shader combines the material's appearance function with the field's bounded influence. 34
Figure 38. Procedural texture describes how a material looks. The field describes the effect of admitted interactions. Separating them allows the background treatment to change without rewriting every input component. See the illustrated PDF for the diagram.
For example, the field can offset texture coordinates around an impulse. A different shader can use the same signal to alter normal direction or color. A nearby card can use it as a small translation. All consume one causal model without sharing one rendering implementation.
20.2 Shader support is qualified per backend
Android AGSL and Skia runtime-effect facilities are related choices, but they are not one universal runtime class. A shader package identifies its backend language, uniforms, texture inputs, color and coordinate conventions, and fallback. Each supported realization is compiled and tested separately. 3536
WasmGC support is only one condition for a CMP web-canvas path. It does not establish that a device has enough graphics capacity for an arbitrary effect, or that a shader backend exposes every expected feature. Capability detection and the renderer profile determine what can be loaded.
A React web interface can use a qualified browser effect or a static material fallback. A specialized browser canvas island must not steal focus or pointer input from foreground controls. Its clipping and coordinate transforms must follow the host. A CMP-in-web bridge is outside the current delivery plan; ordinary Surface controls do not require one.
20.3 Cache programs, update uniforms
A shader program and the current time have different lifetimes. The program is compiled and cached using its source and backend fingerprint. Time and field parameters change during drawing. Updating those uniforms should not recreate the compiled program every frame.
The same distinction applies to cached drawing resources. Stable geometry or textures can remain in a resource scope. Values that vary per frame are supplied through the local draw path. A convenient cache wrapper can still be misused if its dependencies include a changing time value that causes repeated reconstruction.
Effects have explicit cost limits. A profile can restrict noise octaves, texture samples, resolution scale, off-screen layers and blur. Hidden decorative work pauses. Graphics-context loss selects a readable fallback while resources are recreated according to the host's policy.
Foreground text remains independently readable. Reducing the resolution of a background effect must not lower the quality of the text or interfere with its semantic representation.
20.4 Sensory feedback is event-driven
The sensory adapter maps an admitted cue to haptics or optional sound. Reaktor's existing semantic haptic interface uses named cues rather than assuming the same duration and amplitude have the same meaning on every device. 37
The adapter applies capability checks, user preferences, rate limits and lifecycle policy. An unavailable vibrator does not make the application action fail. Audio should coexist with media and accessibility output, and it must not be the only indication of an important result.
A physical impact can help select a bounded intensity profile. It does not prove perceptual equivalence across devices. Device qualification is still needed before describing two responses as equivalent experiences.
Figure 39. A contact cue acknowledges input. A result cue reflects application state. Both are one-shot events; neither is replayed simply because the same visual state is rendered again. See the illustrated PDF for the diagram.
20.5 Coordinate the channels without conflating their purpose
Visual, haptic and audio outputs can share the same cause while following different preferences. Reduced visual motion does not automatically mean sound should be enabled. A silent device does not require disabling a focus indicator. A component's semantic state remains available even when every optional sensory channel is off.
The effect system therefore coordinates events, not compulsory output. The recipe describes eligible responses. The host filters them through capabilities and preferences. The renderer and sensory adapters execute only the permitted channels.
A deterministic test can verify that one cue produces at most one request to each enabled adapter. It cannot by itself establish that the result feels comfortable. Perceptual review and actual device tests remain part of the component's conformance process.