@rafaelaugusto/jolt 0.1.0-beta.9 → 0.1.0-rc.2

package/README.md

@@ -16,7 +16,7 @@
 </p>
 
 <p align="center">
-  <a href="https://jolt.rafaelaugusto.dev">Documentation</a> · <a href="https://jolt.rafaelaugusto.dev/pt-BR/">Documentação em português</a>
+  <a href="https://jolt.rafaelaugusto.dev">English</a> · <a href="https://jolt.rafaelaugusto.dev/pt-BR/">Português</a> · <a href="https://jolt.rafaelaugusto.dev/es/">Español</a> · <a href="https://jolt.rafaelaugusto.dev/zh-Hans/">简体中文</a>
 </p>
 
 ```ts
@@ -29,7 +29,9 @@ animate(rows, 'fadeInUp', { stagger: 40 })
 
 NativeScript's `view.animate()` covers the basics and stops there: one curve for every property, a `spring` curve with no settings, no keyframes, and a promise that rejects when the animation is cancelled. Anything richer ends up as platform code.
 
-Jolt computes the motion once, in JavaScript, when the animation starts, and hands it to the platform as keyframes: Core Animation on iOS, `ObjectAnimator` on Android. Nothing runs in JavaScript while it plays. Springs follow real physics, and an animation that interrupts another one starts from where the view is, at the speed it was going.
+Jolt computes the motion once, in JavaScript, when the animation starts, and hands it to the platform as keyframes: Core Animation on iOS, `ObjectAnimator` on Android. Those default view tracks play without per-frame JavaScript. Real-size layout, opt-in subscribers, gesture input and timeline step activation retain their documented [execution limits](https://jolt.rafaelaugusto.dev/guide/how-it-works). Springs follow real physics, and an animation that interrupts another one starts from where the view is, at the speed it was going.
+
+The [0.1.0-rc.2 release candidate](https://github.com/rafaelaugustos/jolt/releases/tag/v0.1.0-rc.2) fixes scroll anchors through resize/reload, iOS interactive navigation after backgrounding, layered press release and native composition timing. It includes opt-in native pointer springs and Android gallery lifecycle validation. The preview has **74 examples in English, Portuguese, Spanish and Simplified Chinese**, with light/dark themes. The RC phase continues with compatibility and [physical-device acceptance](https://jolt.rafaelaugusto.dev/guide/not-there-yet). Install `@rafaelaugusto/jolt@0.1.0-rc.2` and rebuild the native app. For external native properties, also install matching `@rafaelaugusto/jolt-native@0.1.0-rc.2`.
 
 ## Features
 
@@ -38,15 +40,39 @@ Jolt computes the motion once, in JavaScript, when the animation starts, and han
 - [Corners, borders and shadows](#corners-borders-and-shadows) with native playback and selective stopping.
 - [Motion paths](#motion-along-a-path) with optional tangent orientation on iOS and Android.
 - [Colors](#colors) for backgrounds, borders and text, interpolated in OKLab on iOS and Android.
-- [Motion scopes and states](https://jolt.rafaelaugusto.dev/guide/motion-controllers) for component cleanup and coordinated visual states.
+- [Motion values](#motion-values): one value driving several properties and views, mapped like `interpolate`.
+- [Live springs](https://jolt.rafaelaugusto.dev/guide/live-springs): retained native followers with position and velocity that continue through target changes.
+- [Native gestures](https://jolt.rafaelaugusto.dev/guide/gestures): simultaneous pan/pinch/rotation, tap arbitration, axis competition and vertical Core ScrollView handoff.
+- [Bottom sheet](https://jolt.rafaelaugusto.dev/guide/bottom-sheet): native drag/scroll handoff, content and percentage stops, keyboard following and dismissal.
+- [List reordering](https://jolt.rafaelaugusto.dev/guide/reorder): stable keys, native drag snapshots, neighbour springs and edge scrolling through recycled cells.
+- [Shared layouts](https://jolt.rafaelaugusto.dev/guide/shared-layout): stable identities, native snapshots and interruptible transitions within one page.
+- [Shared navigation](https://jolt.rafaelaugusto.dev/guide/shared-navigation) and a [connected gallery](https://jolt.rafaelaugusto.dev/guide/gallery): photo/card transitions, interactive return and current-cell resolution within the documented Frame/ListView combinations.
+- [Interactive iOS navigation](https://jolt.rafaelaugusto.dev/guide/interactive-navigation) and [Android predictive back](https://jolt.rafaelaugusto.dev/guide/predictive-back), with cancellation and guarded route commits.
+- [Native scroll composition](https://jolt.rafaelaugusto.dev/guide/scroll-header): measured collapsing headers, parallax and pinning with a Core ListView adapter.
+- [Device sensors](https://jolt.rafaelaugusto.dev/guide/device-sensors): rotation and gravity sources feeding native motion values and live springs.
+- [Gravity and bounce](https://jolt.rafaelaugusto.dev/guide/gravity) plus [circle physics](https://jolt.rafaelaugusto.dev/guide/circle-physics) with [attachments and snap points](https://jolt.rafaelaugusto.dev/guide/physics-attachments).
+- [Vector drawing and morphing](https://jolt.rafaelaugusto.dev/guide/shapes): animated strokes and compatible path interpolation on iOS and Android.
+- [Animated blur](https://jolt.rafaelaugusto.dev/guide/blur): iOS backdrop materials and Android content blur, with explicit platform limits.
+- [Liquid Glass](https://jolt.rafaelaugusto.dev/guide/glass): native glass containers and surfaces on iOS 26+, ordinary blur on older iOS, and classic layouts on Android.
+- [Interaction replay](https://jolt.rafaelaugusto.dev/guide/interaction-replay): optional development traces and controlled-clock regression checks, including scroll-to-sheet handoff.
+- [Motion inspector](https://jolt.rafaelaugusto.dev/guide/motion-inspector): development-only ownership/timing diagnostics, native observation batches and reproducible spring tuning.
+- [Adaptive curve sampling](https://jolt.rafaelaugusto.dev/guide/transitions): spend native keyframes where they improve precision, within bounded setup budgets.
+- [SceneKit environment and shaders](https://jolt.rafaelaugusto.dev/guide/scene-shaders): native environment intensity and typed scalar/vector shader inputs on iOS.
+- [Layered motion](#layered-motion): several animations on one property, added or multiplied.
+- [Gradients](#gradients): native linear, radial and conic gradients with animated colors, angle, center and radius.
+- [Motion scopes and states](https://jolt.rafaelaugusto.dev/guide/motion-controllers) for component cleanup and coordinated visual states, with a transition per target.
 - [Animated touch targets](https://jolt.rafaelaugusto.dev/guide/interaction-surface) with an opt-in native interaction surface.
 - [Layout changes](https://jolt.rafaelaugusto.dev/guide/layout): insertion, removal, reorder and resize of container children.
-- [Drag](https://jolt.rafaelaugusto.dev/guide/drag) with bounds, snap points, rubberband and native release physics.
+- [Real dimensions](https://jolt.rafaelaugusto.dev/guide/size): animate width, height and auto with text reflow and moving siblings.
+- [Drag](https://jolt.rafaelaugusto.dev/guide/drag) with bounds, snap points, rubberband and native release physics, moving the view or a motion value.
 - [Decay](#decay) from a release velocity, with optional snap points.
 - [Keyframes and tweens](#tweens) with an easing per segment and exact keyframe times.
 - [Stagger](#several-views) across several views, from the first, the last or the center.
 - [List rows](#list-rows) that play an entrance as they scroll into view, every time or once per item.
 - [Sequences](#sequences) with overlapping arrivals, shared starts and absolute timeline positions.
+- [Controlled timelines](https://jolt.rafaelaugusto.dev/guide/sequences) pause and resume views, motion values and image effects together.
+- [Observable playback progress](https://jolt.rafaelaugusto.dev/guide/playback) feeds native bindings and opt-in subscribers from the original clock.
+- [Native property adapters](https://jolt.rafaelaugusto.dev/guide/native-properties) for maps and SceneKit camera pose/[field of view](https://jolt.rafaelaugusto.dev/guide/scene-camera), lights and solid-color materials, through the optional `@rafaelaugusto/jolt-native` plugin.
 - [Press effects](#press) that follow the finger and let go when a scroll takes over.
 - [Vue directives and a transition component](#vue) from the optional `@rafaelaugusto/jolt/vue` entry.
 - [Text entrances](#text) by letter or word on iOS and Android, preserving the Label’s layout and accessibility.
@@ -58,14 +84,14 @@ Jolt computes the motion once, in JavaScript, when the animation starts, and han
 - [Photo zoom and pan](https://jolt.rafaelaugusto.dev/guide/photo-zoom): native pinch, double tap, bounds and vertical dismissal intents.
 - [Loaders](#loaders) with dots, bars and ring styles on iOS.
 - [Circular reveal](#circular-reveal) to show or hide content from a point on iOS.
-- [Haptics](#haptics) at arrival or at marked points in an animation on iOS.
-- [Particles and confetti](#particles-and-confetti) on iOS.
+- [Haptics](#haptics) at arrival or at marked points in an animation on iOS and Android.
+- [Particles and confetti](#particles-and-confetti) on iOS and Android.
 - [Scroll-linked animations](#scroll-linked-animations) for parallax and collapsing headers.
 - [Keyboard following](#follow-the-keyboard) for composers that rise with the keyboard, at its speed and curve.
 - [Playback controls](#pause-play-and-scrub) to pause, continue and scrub a finite timeline.
 - [Time scale and reduced motion](#time-scale-and-reduced-motion): slow everything down while tuning, and follow the platform's reduced-motion setting by default.
 - [Interruptions](#interrupting-and-stopping) that pick up the value and velocity on screen, with no jump.
-- [Native playback](#how-it-works): Core Animation on iOS, `ObjectAnimator` on Android, nothing in JavaScript while it plays.
+- [Native playback](#how-it-works): default view tracks run through Core Animation on iOS and `ObjectAnimator` on Android without per-frame JavaScript; layout, input and subscriptions have their own execution costs.
 
 ## Install
 
@@ -73,7 +99,7 @@ Jolt computes the motion once, in JavaScript, when the animation starts, and han
 npm install @rafaelaugusto/jolt@next
 ```
 
-It's in beta for now, published under the `next` tag. Requires `@nativescript/core` 8.9 or later. It doesn't depend on a framework: it takes a view, or an element that holds one.
+The current release candidate is **0.1.0-rc.2**, published under the `next` tag. Requires `@nativescript/core` 8.9 or later. It doesn't depend on a framework: it takes a view, or an element that holds one. Rebuild the native app after installing or upgrading Jolt. See [release status and limits](https://jolt.rafaelaugusto.dev/guide/not-there-yet) for the remaining stable-release acceptance work.
 
 On iOS 15+, Jolt requests up to 120 Hz on ProMotion displays. Set `CADisableMinimumFrameDurationOnPhone` to `true` in the app's `App_Resources/iOS/Info.plist` and rebuild to enable higher rates on iPhone. See the [iOS setup](https://jolt.rafaelaugusto.dev/guide/install#promotion-on-ios); the system still chooses the actual refresh rate.
 
@@ -186,6 +212,43 @@ Color strings and NativeScript `Color` objects work as targets or keyframes; `nu
 
 Android includes a Java animation target; rebuild the native app after installing or upgrading Jolt.
 
+## Motion values
+
+```ts
+import { animate, bind, motionValue } from '@rafaelaugusto/jolt'
+
+const progress = motionValue(0)
+bind(backdrop, { opacity: progress.to([0, 1], [0, 0.45]) })
+bind(sheet, { y: progress.to([0, 1], [200, 0]) })
+animate(progress, 1, 'snappy')
+```
+
+One value drives several properties and views on one native clock, mapped with `to()` like React Native's `interpolate`, to numbers or colors. Interruptions carry the value and its velocity to every bound view, `set()` and `stop()` take a value, and a value outlives its views. `scrollValue(scrollView)` turns a scroll offset into a value that bindings follow, and `drag(view, { axis, value })` writes a gesture and its release into one. In Vue, `useMotionValue()`, `useScrollValue()` and `useBinding()` handle the lifecycle. See the [guide](https://jolt.rafaelaugusto.dev/guide/motion-values).
+
+## Layered motion
+
+```ts
+animate(card, { x: 120 }, 'snappy') // the base
+animate(card, 'shake', { layer: 'feedback' }) // on top of it
+```
+
+A layer plays next to a property's other animations instead of replacing them: translations and rotations add, scale and opacity multiply. A shake rides on a drag, a pulse keeps breathing while the card moves, and `stop(card, ['x'], { layer: 'feedback' })` takes one layer away. While a property has layers, they play as one composite native track, sampled again only when something changes. See the [guide](https://jolt.rafaelaugusto.dev/guide/layers).
+
+## Gradients
+
+```ts
+import { gradient } from '@rafaelaugusto/jolt'
+
+const glow = gradient(card, {
+  type: 'radial',
+  colors: ['#A78BFA', '#0F172A'],
+  radius: 0.45,
+})
+glow.animate({ center: { x: 0.7, y: 0.7 }, radius: 0.9 }, { duration: 1400 })
+```
+
+Native linear, radial and conic gradients behind a layout's children, which NativeScript's CSS doesn't have beyond a static `linear-gradient`. Colors, stops, angle, center and radius animate with springs, tweens and repeats: a `CAGradientLayer` with Core Animation keyframes on iOS, a native drawable and animator on Android. Pass motion/derived values directly, or use `glow.bind(...)`, to share a source with view properties without a JS observer loop. `motionScope().gradient()` owns lifecycle and suspension, and `v-gradient` supports the same bindings in Vue. Native binding windows are sampled in JS at preparation/control boundaries; gesture updates still enter JS. Rebuild Android after upgrading. See the [guide and native interaction videos](https://jolt.rafaelaugusto.dev/guide/gradients#following-motion-values).
+
 ## Transitions
 
 The third argument says how to get there. Without one, transforms move with a spring and opacity and colors ease over 300ms. Keyframes tween.
@@ -206,6 +269,8 @@ animate(card, { y: 0 }, { stiffness: 300, damping: 20, mass: 1 })
 
 `bounce` goes from -1 to 1: 0 settles without overshooting, higher values bounce more, negative values settle more slowly. `duration` is how long the spring feels, the same model as SwiftUI. Or describe it with `stiffness`, `damping` and `mass`. A spring starts with the velocity of the animation it interrupts, unless you pass `velocity` (units per second).
 
+Coming from React Native, `origamiSpring({ friction: 7, tension: 40 })` gives the spring `Animated.spring` plays for `friction` and `tension`. See [From React Native Animated](https://jolt.rafaelaugusto.dev/guide/react-native) for the rest of the mapping.
+
 ### Tweens
 
 ```ts
@@ -217,13 +282,32 @@ animate(
 )
 ```
 
-Tweens take 300ms and `easeOut` unless told otherwise. `ease` takes `linear`, `ease`, `easeIn`, `easeOut`, `easeInOut`, `circIn`, `circOut`, `circInOut`, `backIn`, `backOut`, `backInOut`, `anticipate`, a cubic bezier (`[0.2, 0, 0, 1]`) or any function from 0..1 to a value. With keyframes, pass one per segment. `times` places each keyframe between 0 and 1.
+**A tween takes 300 ms with `easeOut` unless told otherwise.** That's shorter than React Native's `Animated.timing` (500 ms, ease in and out) and starts faster than CSS's `ease`, so pass both when a port has to match.
+
+`ease` takes `linear`, `ease`, `easeIn`, `easeOut`, `easeInOut`, `circIn`, `circOut`, `circInOut`, `backIn`, `backOut`, `backInOut`, `anticipate`, the `quad`, `cubic`, `quart`, `quint`, `sine` and `expo` curves with `In`, `Out` or `InOut` (`'cubicOut'`), a cubic bezier (`[0.2, 0, 0, 1]`) or any function from 0..1 to a value. With keyframes, pass one per segment. `times` places each keyframe between 0 and 1.
+
+With `easeTrack: true`, one `ease` runs over the whole track instead, and the value moves in straight lines between keyframes, the way React Native's `interpolate` places its output range on an eased value:
+
+```ts
+animate(
+  spark,
+  { y: [0, -30, -12, 0] },
+  { duration: 900, ease: 'easeOut', easeTrack: true, times: [0, 0.4, 0.7, 1] },
+)
+```
+
+An easing that overshoots, like `backOut`, extends the first or last segment, as `interpolate` does with `extrapolate: 'extend'`. `easeTrack` takes a single `ease` and applies to tweens only.
 
 Custom easing functions run once, when the animation starts, like springs do. They don't cost anything per frame.
 
 ### Per property
 
 ```ts
+animate(
+  logo,
+  { scale: [0.6, 1.08, 1], opacity: [0, 1, 1] },
+  { duration: 900, ease: 'easeInOut', opacity: { times: [0, 0.3, 1] } },
+)
 animate(
   card,
   { y: 0, opacity: 1 },
@@ -231,7 +315,7 @@ animate(
 )
 ```
 
-A property's transition replaces the curve, and keeps the timing (`delay`, `repeat`) of the main one unless it sets its own.
+Over a tween, a property's transition changes only what it sets: the logo's opacity keeps the 900 ms `easeInOut` and only places its keyframes. Over a spring, or when it is a spring itself, it replaces the curve, so the card's opacity gets a 150 ms tween. Either way, it keeps the timing (`delay`, `repeat`) of the main one unless it sets its own. `times` and per-segment easings taken from the main transition are left out when they don't fit the property's keyframes. Options passed to a [preset](https://jolt.rafaelaugusto.dev/guide/presets) merge the same way, so `animate(card, 'heartbeat', { duration: 1600 })` keeps the beat's rhythm.
 
 ### Timing
 
@@ -245,6 +329,18 @@ animate(
 
 `delay` is in milliseconds, and the view takes the first keyframe during it. `repeat` is how many more times to play, `Infinity` until stopped. `repeatType: 'reverse'` plays every other repeat backwards. Repeats play natively too.
 
+`repeatDelay` holds the end value for that many milliseconds before each repeat. The first play doesn't wait, and neither does the end of the last one. With `'reverse'` it waits at both ends:
+
+```ts
+animate(
+  z,
+  { y: [0, -40], opacity: [0, 1] },
+  { duration: 1200, repeat: Infinity, repeatDelay: 1800 },
+)
+```
+
+The wait is part of the native keyframes, so it costs no JavaScript while it plays. Stopping during the wait leaves the view at the held value. A range, `repeatDelay: [1000, 4000]`, draws a new wait before each repeat; an endless loop draws sixteen and loops them natively.
+
 ## Decay
 
 ```ts
@@ -451,7 +547,7 @@ animate(card, { y: 0 }, { type: 'spring', haptic: 'light' })
 animate(button, 'bounce', { haptic: { style: 'light', times: [0.6, 1] } })
 ```
 
-Choose `light`, `medium` or `heavy`. By default, one impact fires when the animation visually arrives. Explicit points can mark each landing of a bounce. Delays and stagger follow the animation; interruptions, stopping and unloading cancel pending feedback. iOS only for now. See the [haptics guide](https://jolt.rafaelaugusto.dev/guide/haptics) for timing and device behavior.
+Choose `light`, `medium` or `heavy`. By default, one impact fires when the animation visually arrives. Explicit points can mark each landing of a bounce. Delays and stagger follow the animation; interruptions, stopping and unloading cancel pending feedback. Supported on iOS and Android, respecting device settings. See the [haptics guide](https://jolt.rafaelaugusto.dev/guide/haptics) for timing, platform mappings and physical-device behavior.
 
 ## Particles and confetti
 
@@ -463,7 +559,7 @@ const stopSnow = particles(scene, { source: 'top', angle: 90, velocity: 45 })
 stopSnow() // remove the emitter and its particles
 ```
 
-Confetti bursts into the target's window and cleans itself up. `particles()` adds an emitter to the view for snow, sparks, bubbles or other effects. Both use Core Animation without JavaScript per frame, respect Reduce Motion and stop on unload. iOS only for now. See the [particles guide](https://jolt.rafaelaugusto.dev/guide/particles).
+Confetti bursts into the target's window and cleans itself up. `particles()` adds an emitter for snow, sparks, bubbles or finite effects. Both use native playback without JS simulation/painting per frame: Core Animation on iOS, a bounded Java simulation and Canvas drawable on Android. They respect reduced motion and cancel on unload/backgrounding. Android drawing shares the UI thread; rebuild the app after upgrading. See the [guide and native videos](https://jolt.rafaelaugusto.dev/guide/particles).
 
 ## Scroll-linked animations
 
@@ -488,7 +584,17 @@ import { followKeyboard } from '@rafaelaugusto/jolt'
 const release = followKeyboard(composer)
 ```
 
-The view rises by exactly the distance the keyboard would cover it, with the keyboard's own duration and curve, and settles back when it hides. On iOS the keyboard notifications drive a `UIView` animation; on Android 11+ a native `WindowInsetsAnimation` callback moves the view on every frame, with and without `adjustResize`. The view's `translateY` is written so later animations start from the position on screen. Rebuild Android after upgrading. See the [guide](https://jolt.rafaelaugusto.dev/guide/keyboard).
+The view rises by exactly the distance the keyboard would cover it, with the keyboard's own duration and curve, and settles back when it hides. On iOS the keyboard notifications drive a `UIView` animation; on Android 11+ a native `WindowInsetsAnimation` callback moves the view on every frame, with and without `adjustResize`. Android 7 to 10 read the keyboard from the window's visible frame and animate the view with the keyboard's measured timing. The view's `translateY` is written so later animations start from the position on screen. Rebuild Android after upgrading. See the [guide](https://jolt.rafaelaugusto.dev/guide/keyboard).
+
+To react in other ways, `onKeyboard()` reports how much of the window the keyboard covers, with a transition that moves in step with it:
+
+```ts
+const off = onKeyboard(({ visible, transition }) => {
+  animate(header, { scale: visible ? 0.8 : 1 }, transition)
+})
+```
+
+`useKeyboard()` from `/vue` keeps a ref in sync until unmount.
 
 ## Pause, play and scrub
 
@@ -512,7 +618,7 @@ configure({ reducedMotion: 'always' }) // transforms jump, opacity still fades
 
 Tuning a spring at full speed is guesswork. The scale applies to every engine animation started after the call, on iOS and Android alike: durations, delays, stagger, sequence positions and spring time stretch together, keyframes stay dense, and an interruption still picks up the value and velocity on screen. Native loops such as shimmer and loaders keep their own timing.
 
-With Reduce Motion on iOS or Remove animations on Android, translations, scale, rotation, paths, decorations and decay jump to their end values while opacity and colors still animate. `'user'` is the default; `'always'` and `'never'` override the platform for the whole library. See the [guide](https://jolt.rafaelaugusto.dev/guide/configure).
+With Reduce Motion on iOS or Remove animations on Android, translations, scale, rotation, paths, decorations and decay jump to their end values while opacity and colors still animate. `'user'` is the default; `'always'` and `'never'` override the platform for the whole library. `reducedMotion()` reads the result, `onReducedMotion(callback)` watches it, and `useReducedMotion()` from `/vue` keeps a ref in sync. See the [guide](https://jolt.rafaelaugusto.dev/guide/configure).
 
 ## Interrupting and stopping
 
@@ -532,9 +638,17 @@ Selected properties stay at their current values; the others keep animating. `sc
 
 If part of an animation is stopped, its `finished` promise resolves with `false` once its remaining properties finish.
 
+`set()` places a view without animating it, and stops whatever animates those properties:
+
+```ts
+set(logo, { opacity: 1, scale: 1, y: 0 })
+```
+
+It takes one value per property, the same properties as `animate()`. The next animation starts from there. See [setting values](https://jolt.rafaelaugusto.dev/guide/interrupting#setting-values-without-animating).
+
 ## How it works
 
-When an animation starts, Jolt resolves where each property starts from (the value on screen, or the keyframes you gave), and computes the whole curve: easing, keyframes, spring physics and exponential decay. It samples the curve 60 times per second of motion, and keeps keyframe times exact. Linear numeric segments use only their endpoints. Long tween segments and free decays cap sampling at 6,001 keyframes. Color tracks add intermediate OKLab samples even with linear timing.
+When a sampled animation starts, Jolt resolves its starting values and computes the source curve. Numeric springs, decays and tweens use [adaptive keyframes](https://jolt.rafaelaugusto.dev/guide/transitions#adaptive-keyframes), concentrating detail where linear interpolation needs it. Authored keyframe times stay exact and straight numeric segments keep only their endpoints. Sampling has bounded refinement budgets and a capped uniform fallback. Color mixing, composed motion-value mappings and retained live springs use their own sampling or execution paths.
 
 The samples go to the platform in one go:
 
@@ -545,17 +659,21 @@ Solid [colors](#colors) use CGColor keyframes on iOS and int keyframes through a
 
 Before playing, the final values are set on the NativeScript view, like `view.animate()` does, so `view.translateX` already holds the target while the animation runs. Stopping writes back the values on screen.
 
+`animateSize()` performs NativeScript measurement/layout in JavaScript each frame so content can reflow. Opt-in subscribers, gesture input and timeline step activation retain their documented JS costs. `springValue()` uses retained native spring state and shared display callbacks, rather than rebuilding sampled tracks on each target change. See the [execution paths](https://jolt.rafaelaugusto.dev/guide/how-it-works).
+
 Native playback does not isolate Android View animations from a blocked UI thread. Main-runtime JavaScript shares that thread, and `withLayer()` only caches drawing. Move suitable CPU work to a Worker and keep view updates small. See the [busy JavaScript guide](https://jolt.rafaelaugusto.dev/guide/android-performance) and [Android diagnostic](./benchmarks/android-busy.md).
 
 On Android, opacity animations temporarily cache hardware-accelerated containers with children in a hardware layer. Jolt waits for the fade to start and restores the layer on completion, stop, replacement or unload. Existing app-configured layers are preserved; empty, unmeasured and larger-than-screen containers are skipped. See the [fade-layer benchmark](./benchmarks/android-fade.md) for measurement and memory tradeoffs.
 
 Each running property remembers its curve and start time. On Android, interruptions read the displayed value and the animator's current play time, so inherited velocity follows the system's animator duration scale. Early spring arrivals use a native timing marker with completion callbacks only; other sequences advance on native completion. Delays, repeats and disabled animations follow the same platform clock, without JavaScript running per frame.
 
-## Not there yet
+## Release status and limits
+
+<a id="not-there-yet"></a>
+
+RC.1 already includes [gesture composition and vertical Core ScrollView handoff](https://jolt.rafaelaugusto.dev/guide/gestures), [shared navigation](https://jolt.rafaelaugusto.dev/guide/shared-navigation), the [connected gallery](https://jolt.rafaelaugusto.dev/guide/gallery), [scroll composition](https://jolt.rafaelaugusto.dev/guide/scroll-header) and [rotation/gravity sensors](https://jolt.rafaelaugusto.dev/guide/device-sensors), within their documented platform/container combinations.
 
-- `animate()` supports transforms, opacity, colors, uniform corners and borders, and platform shadows. Size and layout changes ([#21](https://github.com/rafaelaugustos/jolt/issues/21)) aren't animated yet.
-- Gesture composition and nested-scroll handoff remain separate work ([#51](https://github.com/rafaelaugustos/jolt/issues/51)).
-- No layout or shared element transitions ([#21](https://github.com/rafaelaugustos/jolt/issues/21), [#24](https://github.com/rafaelaugustos/jolt/issues/24)).
+The 0.1.0 feature scope is frozen. Physical-device acceptance for the gallery ([#117](https://github.com/rafaelaugustos/jolt/issues/117)), scroll composition ([#116](https://github.com/rafaelaugustos/jolt/issues/116)) and sensors ([#114](https://github.com/rafaelaugustos/jolt/issues/114)) remains open. These APIs are shipped; their remaining acceptance checks still matter before stable. Other adapters and broader feature milestones remain later work. See [release status and limits](https://jolt.rafaelaugusto.dev/guide/not-there-yet) for the current scope, execution costs and validation requirements.
 
 ## API
 
@@ -563,6 +681,8 @@ Each running property remembers its curve and start time. On Android, interrupti
 
 `animateLayout(container, change?, options?)` animates the next layout of direct children; `motionScope().animateLayout()` owns it through component lifecycle. Cancellation settles temporary offsets into the final layout.
 
+`animateSize(view, dimensions, change?, options?)` animates actual width/height/auto in StackLayout/GridLayout, including inside ScrollView. Its `SizeAnimation` supports pause/resume, stop and restoring the original declarations. It runs JS measurement/layout each frame. `motionScope().animateSize()` owns its lifecycle. See the [guide and native videos](https://jolt.rafaelaugusto.dev/guide/size).
+
 `interactionSurface(target)` opts a view/subtree into native touch geometry during animation; returns `{ disposed, dispose() }`. Register before playback; rebuild iOS after upgrading.
 
 `drag()` returns a controller with `position`, `dragging`, `settling`, `cancel()`, `pause()`, `play()` and `dispose()`. `motionScope().drag()` owns it through component lifecycle.
@@ -573,9 +693,27 @@ Each running property remembers its curve and start time. On Android, interrupti
 
 **Helpers**: `definePreset`, `presets`, `springs`, `cubicBezier`, plus the types (`Keyframes`, `Transition`, `Spring`, `Tween`, `Preset`, `Presets`, `PresetName`, `SpringName`, `Easing`, `Animation`, `Target`...).
 
+The core also exports [`scrollHeader()`](https://jolt.rafaelaugusto.dev/guide/scroll-header). Optional modules are included in the core package and imported through their own entry points:
+
+| Entry point                                  | API and guide                                                                                                                                                                                                                                   |
+| -------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `@rafaelaugusto/jolt/gestures`               | [`gestures()`, `GestureSurface`](https://jolt.rafaelaugusto.dev/guide/gestures)                                                                                                                                                                 |
+| `@rafaelaugusto/jolt/shared-navigation`      | [`sharedNavigation()`](https://jolt.rafaelaugusto.dev/guide/shared-navigation), [`sharedNavigationEntry()`](https://jolt.rafaelaugusto.dev/guide/shared-gestures), [`resolveListTarget()`](https://jolt.rafaelaugusto.dev/guide/return-targets) |
+| `@rafaelaugusto/jolt/interactive-navigation` | [`interactiveNavigation()`](https://jolt.rafaelaugusto.dev/guide/interactive-navigation)                                                                                                                                                        |
+| `@rafaelaugusto/jolt/predictive-back`        | [`predictiveBack()`](https://jolt.rafaelaugusto.dev/guide/predictive-back)                                                                                                                                                                      |
+| `@rafaelaugusto/jolt/sensors`                | [`sensor('rotation')`, `sensor('gravity')`](https://jolt.rafaelaugusto.dev/guide/device-sensors)                                                                                                                                                |
+| `@rafaelaugusto/jolt/physics`                | [`physicsWorld()`](https://jolt.rafaelaugusto.dev/guide/physics-attachments)                                                                                                                                                                    |
+| `@rafaelaugusto/jolt/shapes`                 | [`shape()`](https://jolt.rafaelaugusto.dev/guide/shapes)                                                                                                                                                                                        |
+| `@rafaelaugusto/jolt/blur`                   | [`blur()`](https://jolt.rafaelaugusto.dev/guide/blur)                                                                                                                                                                                           |
+| `@rafaelaugusto/jolt/glass`                  | [`GlassContainer`, `GlassView`, `supportsLiquidGlass()`](https://jolt.rafaelaugusto.dev/guide/glass)                                                                                                                                            |
+
+External map/SceneKit property adapters additionally require the separate matching `@rafaelaugusto/jolt-native` package. See the [complete API reference](https://jolt.rafaelaugusto.dev/guide/api) for the remaining entries and lifecycle contracts.
+
 ## Demo
 
-[`demo/`](./demo) opens an interactive assistant on iOS and Android: a fan of document tools, a voice screen with letter-by-letter text, and a staged conversation with document previews and a rolling countdown, with the screens cross-fading through the Vue entry. Open **Help → Watch demo** to replay the flow. The orb is an animated illustration; speech, documents and audio are sample data.
+[`demo/`](./demo) now opens **Jolt Motion Studio**: a branded animated splash, a moving home, and 74 searchable experiments with category filters and native page navigation through Vue Router NS. The iOS preview includes the Jolt name and icon; launching normally always opens the collection. See the [native walkthrough](./docs/guide/demo.md).
+
+The assistant remains available through `--screen=home` on iOS or `--es screen home` on Android: a fan of document tools, a voice screen with letter-by-letter text, and a staged conversation with document previews and a rolling countdown, with the screens cross-fading through the Vue entry. Open **Help → Watch demo** to replay the flow. The orb is an animated illustration; speech, documents and audio are sample data.
 
 |                                                                             Assistant                                                                              |                                                                      Presets                                                                       |                                                                                       Springs                                                                                       |                                                                        Stagger                                                                        |
 | :----------------------------------------------------------------------------------------------------------------------------------------------------------------: | :------------------------------------------------------------------------------------------------------------------------------------------------: | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: | :---------------------------------------------------------------------------------------------------------------------------------------------------: |
@@ -585,7 +723,11 @@ Each running property remembers its curve and start time. On Android, interrupti
 | :-------------------------------------------------------------------------------------------------------------------------------------------------------------: | :------------------------------------------------------------------------------------------------------------------------------------------------: | :-------------------------------------------------------------------------------------------------------------------------------------------------: | :-----------------------------------------------------------------------------------------------------------------------------------------------------: |
 | <img src="https://raw.githubusercontent.com/rafaelaugustos/jolt/main/.github/assets/demo-sequences.gif" width="200" alt="Overlapping steps and steps in order"> | <img src="https://raw.githubusercontent.com/rafaelaugustos/jolt/main/.github/assets/demo-press-android.gif" width="200" alt="Three press effects"> | <img src="https://raw.githubusercontent.com/rafaelaugustos/jolt/main/.github/assets/demo-rolling.gif" width="200" alt="Digits rolling up and down"> | <img src="https://raw.githubusercontent.com/rafaelaugustos/jolt/main/.github/assets/demo-text-android.gif" width="200" alt="Letter and word entrances"> |
 
-The animation playground opens with `--playground` on iOS and `--es playground true` on Android, with presets, interruptible springs, decay, text, press effects, list rows, the keyboard composer and the native iOS helpers. See the [demo guide](./docs/guide/demo.md) for preview arguments and implementation notes. Each page of the [documentation](https://jolt.rafaelaugusto.dev) opens with a clip of its feature.
+|                                                                            Layout (iOS)                                                                             |                                                                                  Drag and snap (iOS)                                                                                  |                                                                                    Image effects (iOS)                                                                                     |                                                                               Photo zoom (iOS)                                                                                |
+| :-----------------------------------------------------------------------------------------------------------------------------------------------------------------: | :-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: | :----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------: |
+| <img src="https://raw.githubusercontent.com/rafaelaugustos/jolt/main/.github/assets/demo-layout-ios.gif" width="200" alt="Native cards insert, reorder and expand"> | <img src="https://raw.githubusercontent.com/rafaelaugustos/jolt/main/.github/assets/demo-drag-ios.gif" width="200" alt="A card and panel follow real drags and settle within bounds"> | <img src="https://raw.githubusercontent.com/rafaelaugustos/jolt/main/.github/assets/demo-image-effects-ios.gif" width="200" alt="Ripple, touch distortion and dissolve on a raster image"> | <img src="https://raw.githubusercontent.com/rafaelaugustos/jolt/main/.github/assets/demo-photo-zoom-ios.gif" width="200" alt="A photo responds to pinch, pan and double tap"> |
+
+The animation playground opens with `--playground` on iOS and `--es playground true` on Android, with presets, interruptible springs, decay, text, press effects, list rows, the keyboard composer and the native iOS helpers. See the [demo guide](./docs/guide/demo.md) for preview arguments and implementation notes. The [documentation](https://jolt.rafaelaugusto.dev) is available in English, Brazilian Portuguese, Spanish and Simplified Chinese. Every visual feature guide embeds reviewed recordings of the real native demo, with captions in the selected language and the recording's platform and limits identified.
 
 With the [NativeScript CLI](https://docs.nativescript.org/setup/) installed:
 
@@ -604,8 +746,12 @@ ns run ios         # or: ns run android
 npm test           # unit tests
 npm run typecheck  # including the iOS and Android drivers, against the platform typings
 npm run build
+npm run docs:check-media
+npm run docs:build
 ```
 
+Visual changes require reviewed recordings before completion or release. See [Contributing](./CONTRIBUTING.md).
+
 The tests run the engine against a fake platform driver ([`test/helpers.ts`](./test/helpers.ts)) with its own clock: it records the keyframes it would play and ends them when the clock passes their end.
 
 For on-device measurements, see the [iOS animation startup benchmark](./benchmarks/README.md).

package/dist/animate.d.ts

@@ -2,26 +2,47 @@ import type { PlaybackAnimation } from './playback.js';
 import { View } from '@nativescript/core';
 import { type Animation } from './engine.js';
 import { type PresetName } from './presets.js';
+import { type MotionValue, type ValueAnimationOptions } from './motion-value.js';
 import { type Property } from './properties.js';
 import { type SpringName } from './transition.js';
-import type { AnimateOptions, DecayOptions, DecayVelocity, Keyframes, KeyframeProperty, Target } from './types.js';
+import type { AnimateOptions, DecayOptions, DecayVelocity, Keyframes, KeyframeProperty, Target, Values } from './types.js';
 /**
  * Animates one view, or several. Takes keyframes or the name of a preset,
- * and a transition or the name of a spring.
+ * and a transition or the name of a spring. A motion value animates to a number.
  *
  * ```ts
  * animate(card, 'fadeInUp')
  * animate(card, { scale: 1.1, rotate: [0, 90] }, 'bouncy')
  * animate(rows, 'fadeInUp', { stagger: 40 })
+ * animate(progress, 1, 'snappy')
  * ```
  */
+export declare function animate(value: MotionValue, to: number | readonly (number | null)[], transition?: ValueAnimationOptions | SpringName): PlaybackAnimation;
 export declare function animate(target: Target | readonly Target[], animation: Keyframes | PresetName, options?: AnimateOptions | SpringName): PlaybackAnimation;
 /** Validate and snapshot a complete animation before changing any view ownership. */
 export declare function prepareAnimation(target: Target | readonly Target[], animation: Keyframes | PresetName, options?: AnimateOptions | SpringName): () => PlaybackAnimation;
 /** Starts at the current translation and slows down from a velocity in DIPs per second. */
 export declare function decay(target: Target | readonly Target[], velocity: DecayVelocity, options?: DecayOptions): PlaybackAnimation;
-/** Stops all or selected properties at their current values. `scale` stops both axes. */
-export declare function stop(target: Target | readonly Target[], properties?: readonly KeyframeProperty[]): void;
+/**
+ * Stops all or selected properties at their current values. `scale` stops both axes.
+ * A motion value stops where it is, and so do the views bound to it.
+ */
+export declare function stop(value: MotionValue, options?: {
+    layer?: string;
+}): void;
+export declare function stop(target: Target | readonly Target[], properties?: readonly KeyframeProperty[], options?: {
+    layer?: string;
+}): void;
+/**
+ * Applies values at once, stopping whatever animates those properties.
+ * `scale` sets both axes. A view that isn't loaded yet gets them right away.
+ *
+ * ```ts
+ * set(logo, { opacity: 1, scale: 1, y: 0 })
+ * ```
+ */
+export declare function set(value: MotionValue, to: number): void;
+export declare function set(target: Target | readonly Target[], values: Values): void;
 /** Plays several animations as one: finished once they all are, and stopped together. */
 export declare function group(animations: readonly Animation[]): Animation;
 export declare function toView(target: Target): View;

package/dist/animate.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"animate.d.ts","sourceRoot":"","sources":["../src/animate.ts"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,eAAe,CAAA;AAEtD,OAAO,EAAE,IAAI,EAAE,MAAM,oBAAoB,CAAA;AAQzC,OAAO,EAKL,KAAK,SAAS,EAEf,MAAM,aAAa,CAAA;AACpB,OAAO,EAAa,KAAK,UAAU,EAAE,MAAM,cAAc,CAAA;AAEzD,OAAO,EAAyB,KAAK,QAAQ,EAAE,MAAM,iBAAiB,CAAA;AACtE,OAAO,EAKL,KAAK,UAAU,EAEhB,MAAM,iBAAiB,CAAA;AACxB,OAAO,KAAK,EACV,cAAc,EACd,YAAY,EACZ,aAAa,EACb,SAAS,EAET,gBAAgB,EAEhB,MAAM,EACP,MAAM,YAAY,CAAA;AAUnB;;;;;;;;;GASG;AACH,wBAAgB,OAAO,CACrB,MAAM,EAAE,MAAM,GAAG,SAAS,MAAM,EAAE,EAClC,SAAS,EAAE,SAAS,GAAG,UAAU,EACjC,OAAO,CAAC,EAAE,cAAc,GAAG,UAAU,GACpC,iBAAiB,CAEnB;AAED,qFAAqF;AACrF,wBAAgB,gBAAgB,CAC9B,MAAM,EAAE,MAAM,GAAG,SAAS,MAAM,EAAE,EAClC,SAAS,EAAE,SAAS,GAAG,UAAU,EACjC,OAAO,CAAC,EAAE,cAAc,GAAG,UAAU,GACpC,MAAM,iBAAiB,CAmCzB;AAED,2FAA2F;AAC3F,wBAAgB,KAAK,CACnB,MAAM,EAAE,MAAM,GAAG,SAAS,MAAM,EAAE,EAClC,QAAQ,EAAE,aAAa,EACvB,OAAO,GAAE,YAAiB,GACzB,iBAAiB,CAkEnB;AAED,yFAAyF;AACzF,wBAAgB,IAAI,CAClB,MAAM,EAAE,MAAM,GAAG,SAAS,MAAM,EAAE,EAClC,UAAU,CAAC,EAAE,SAAS,gBAAgB,EAAE,QAMzC;AAED,yFAAyF;AACzF,wBAAgB,KAAK,CAAC,UAAU,EAAE,SAAS,SAAS,EAAE,GAAG,SAAS,CAWjE;AAED,wBAAgB,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,IAAI,CAO3C;AAED,wBAAgB,OAAO,CAAC,MAAM,EAAE,MAAM,GAAG,SAAS,MAAM,EAAE,GAAG,IAAI,EAAE,CAElE;AA8GD,2FAA2F;AAC3F,wBAAgB,cAAc,CAC5B,SAAS,EAAE,SAAS,GAAG,UAAU,EACjC,OAAO,CAAC,EAAE,cAAc,GAAG,UAAU,gCAUtC;AAED,wGAAwG;AACxG,wBAAgB,YAAY,CAC1B,SAAS,EAAE,SAAS,GAAG,UAAU,EACjC,OAAO,CAAC,EAAE,cAAc,GAAG,UAAU,gCActC"}
+{"version":3,"file":"animate.d.ts","sourceRoot":"","sources":["../src/animate.ts"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,eAAe,CAAA;AAEtD,OAAO,EAAE,IAAI,EAAE,MAAM,oBAAoB,CAAA;AAQzC,OAAO,EAML,KAAK,SAAS,EAEf,MAAM,aAAa,CAAA;AACpB,OAAO,EAAa,KAAK,UAAU,EAAE,MAAM,cAAc,CAAA;AACzD,OAAO,EAIL,KAAK,WAAW,EAChB,KAAK,qBAAqB,EAC3B,MAAM,mBAAmB,CAAA;AAG1B,OAAO,EAAyB,KAAK,QAAQ,EAAE,MAAM,iBAAiB,CAAA;AACtE,OAAO,EAML,KAAK,UAAU,EAEhB,MAAM,iBAAiB,CAAA;AACxB,OAAO,KAAK,EACV,cAAc,EACd,YAAY,EACZ,aAAa,EACb,SAAS,EAET,gBAAgB,EAEhB,MAAM,EACN,MAAM,EACP,MAAM,YAAY,CAAA;AAWnB;;;;;;;;;;GAUG;AACH,wBAAgB,OAAO,CACrB,KAAK,EAAE,WAAW,EAClB,EAAE,EAAE,MAAM,GAAG,SAAS,CAAC,MAAM,GAAG,IAAI,CAAC,EAAE,EACvC,UAAU,CAAC,EAAE,qBAAqB,GAAG,UAAU,GAC9C,iBAAiB,CAAA;AACpB,wBAAgB,OAAO,CACrB,MAAM,EAAE,MAAM,GAAG,SAAS,MAAM,EAAE,EAClC,SAAS,EAAE,SAAS,GAAG,UAAU,EACjC,OAAO,CAAC,EAAE,cAAc,GAAG,UAAU,GACpC,iBAAiB,CAAA;AAkBpB,qFAAqF;AACrF,wBAAgB,gBAAgB,CAC9B,MAAM,EAAE,MAAM,GAAG,SAAS,MAAM,EAAE,EAClC,SAAS,EAAE,SAAS,GAAG,UAAU,EACjC,OAAO,CAAC,EAAE,cAAc,GAAG,UAAU,GACpC,MAAM,iBAAiB,CAoDzB;AAED,2FAA2F;AAC3F,wBAAgB,KAAK,CACnB,MAAM,EAAE,MAAM,GAAG,SAAS,MAAM,EAAE,EAClC,QAAQ,EAAE,aAAa,EACvB,OAAO,GAAE,YAAiB,GACzB,iBAAiB,CAkEnB;AAED;;;GAGG;AACH,wBAAgB,IAAI,CAAC,KAAK,EAAE,WAAW,EAAE,OAAO,CAAC,EAAE;IAAE,KAAK,CAAC,EAAE,MAAM,CAAA;CAAE,GAAG,IAAI,CAAA;AAC5E,wBAAgB,IAAI,CAClB,MAAM,EAAE,MAAM,GAAG,SAAS,MAAM,EAAE,EAClC,UAAU,CAAC,EAAE,SAAS,gBAAgB,EAAE,EACxC,OAAO,CAAC,EAAE;IAAE,KAAK,CAAC,EAAE,MAAM,CAAA;CAAE,GAC3B,IAAI,CAAA;AAoBP;;;;;;;GAOG;AACH,wBAAgB,GAAG,CAAC,KAAK,EAAE,WAAW,EAAE,EAAE,EAAE,MAAM,GAAG,IAAI,CAAA;AACzD,wBAAgB,GAAG,CAAC,MAAM,EAAE,MAAM,GAAG,SAAS,MAAM,EAAE,EAAE,MAAM,EAAE,MAAM,GAAG,IAAI,CAAA;AAqB7E,yFAAyF;AACzF,wBAAgB,KAAK,CAAC,UAAU,EAAE,SAAS,SAAS,EAAE,GAAG,SAAS,CAWjE;AAED,wBAAgB,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,IAAI,CAO3C;AAED,wBAAgB,OAAO,CAAC,MAAM,EAAE,MAAM,GAAG,SAAS,MAAM,EAAE,GAAG,IAAI,EAAE,CAElE;AA6HD,2FAA2F;AAC3F,wBAAgB,cAAc,CAC5B,SAAS,EAAE,SAAS,GAAG,UAAU,EACjC,OAAO,CAAC,EAAE,cAAc,GAAG,UAAU,gCAYtC;AAED,wGAAwG;AACxG,wBAAgB,YAAY,CAC1B,SAAS,EAAE,SAAS,GAAG,UAAU,EACjC,OAAO,CAAC,EAAE,cAAc,GAAG,UAAU,gCActC"}

package/dist/animate.js

@@ -4,27 +4,21 @@ import { preparePath } from './path.js';
 import { View } from '@nativescript/core';
 import { isColorProperty, parseColor, validateColorTarget, } from './color.js';
 import { DEFAULT_FRICTION, solveDecay } from './decay.js';
-import { arrivalOf, setArrival, stopView, ViewAnimation, } from './engine.js';
+import { arrivalOf, setArrival, stopLayer, stopView, ViewAnimation, } from './engine.js';
 import { getPreset } from './presets.js';
+import { asRoot, detachBindings, isMotionValue, } from './motion-value.js';
 import { resolveHaptic } from './haptics.js';
+import { layerable } from './mixer.js';
 import { isProperty, precision } from './properties.js';
-import { hasCurve, mergeTransitions, resolveTransition, springs, } from './transition.js';
-/**
- * Animates one view, or several. Takes keyframes or the name of a preset,
- * and a transition or the name of a spring.
- *
- * ```ts
- * animate(card, 'fadeInUp')
- * animate(card, { scale: 1.1, rotate: [0, 90] }, 'bouncy')
- * animate(rows, 'fadeInUp', { stagger: 40 })
- * ```
- */
+import { hasCurve, fitTransition, mergeTransitions, resolveTransition, springs, } from './transition.js';
 export function animate(target, animation, options) {
+    if (isMotionValue(target))
+        return asRoot(target).animate(animation, options);
     return prepareAnimation(target, animation, options)();
 }
 /** Validate and snapshot a complete animation before changing any view ownership. */
 export function prepareAnimation(target, animation, options) {
-    const { keyframes, base, overrides, stagger, relative, haptic, path } = prepare(animation, options);
+    const { keyframes, base, overrides, stagger, relative, haptic, path, layer } = prepare(animation, options);
     const feedback = resolveHaptic(haptic);
     if (!isList(target)) {
         const view = toView(target);
@@ -33,8 +27,12 @@ export function prepareAnimation(target, animation, options) {
                 validateColorTarget(view, property);
             else if (isDecorationProperty(property))
                 validateDecorationTarget(view, property);
-        const plans = plan(keyframes, base, overrides, 0, relative, path);
-        return () => new ViewAnimation(view, plans, feedback);
+        const plans = plan(keyframes, base, overrides, 0, relative, path, layer);
+        return () => {
+            if (layer === undefined)
+                detachBindings(view, plans.map(({ property }) => property));
+            return new ViewAnimation(view, plans, feedback);
+        };
     }
     const views = target.map(toView);
     for (const view of views)
@@ -43,8 +41,13 @@ export function prepareAnimation(target, animation, options) {
                 validateColorTarget(view, property);
             else if (isDecorationProperty(property))
                 validateDecorationTarget(view, property);
-    const plans = views.map((_, index) => plan(keyframes, base, overrides, staggerDelay(stagger, index, views.length), relative, path));
-    return () => playbackGroup(views.map((view, index) => new ViewAnimation(view, plans[index], feedback, true)));
+    const seed = Math.random();
+    const plans = views.map((_, index) => plan(keyframes, base, overrides, staggerDelay(stagger, index, views.length), relative, path, layer, seed));
+    return () => playbackGroup(views.map((view, index) => {
+        if (layer === undefined)
+            detachBindings(view, plans[index].map(({ property }) => property));
+        return new ViewAnimation(view, plans[index], feedback, true);
+    }));
 }
 /** Starts at the current translation and slows down from a velocity in DIPs per second. */
 export function decay(target, velocity, options = {}) {
@@ -109,11 +112,34 @@ export function decay(target, velocity, options = {}) {
         return playbackGroup([]);
     return playbackGroup(views.map((view) => new ViewAnimation(view, plans, undefined, true)));
 }
-/** Stops all or selected properties at their current values. `scale` stops both axes. */
-export function stop(target, properties) {
+export function stop(target, properties, options) {
+    if (isMotionValue(target))
+        return asRoot(target).stop(properties?.layer);
+    if (properties && !Array.isArray(properties))
+        throw new TypeError('View properties must be an array.');
     const expanded = properties?.flatMap((property) => property === 'scale' ? ['scaleX', 'scaleY'] : [property]);
     for (const view of toViews(target))
-        stopView(view, expanded);
+        if (options?.layer !== undefined)
+            stopLayer(view, options.layer, expanded);
+        else
+            stopView(view, expanded);
+}
+export function set(target, values) {
+    if (isMotionValue(target))
+        return asRoot(target).set(values);
+    if (values === null || typeof values !== 'object' || Array.isArray(values))
+        throw new TypeError('set() takes an object of values.');
+    const keyframes = {};
+    for (const [key, value] of Object.entries(values)) {
+        if (value === undefined)
+            continue;
+        if (key !== 'scale' && !isProperty(key))
+            throw new Error(`Can't set "${key}".`);
+        if (value === null || Array.isArray(value))
+            throw new TypeError(`set() takes one value per property, got ${String(value)} for "${key}".`);
+        keyframes[key] = [value, value];
+    }
+    animate(target, keyframes, { duration: 0 });
 }
 /** Plays several animations as one: finished once they all are, and stopped together. */
 export function group(animations) {
@@ -163,6 +189,7 @@ function resolveAnimation(animation, options) {
         stagger: user.stagger ?? own.stagger,
         relative: user.relative ?? own.relative,
         haptic: user.haptic ?? own.haptic,
+        layer: user.layer,
     };
 }
 function normalize(options) {
@@ -187,10 +214,16 @@ function normalize(options) {
     let stagger;
     let relative;
     let haptic;
+    let layer;
     for (const [key, value] of Object.entries(options)) {
         if (value === undefined)
             continue;
-        if (key === 'stagger')
+        if (key === 'layer') {
+            if (typeof value !== 'string' || !value)
+                throw new TypeError('A layer is named by a nonempty string.');
+            layer = value;
+        }
+        else if (key === 'stagger')
             stagger = value;
         else if (key === 'relative')
             relative = value;
@@ -202,10 +235,14 @@ function normalize(options) {
         else
             base[key] = value;
     }
-    return { base, overrides, stagger, relative, haptic };
+    return { base, overrides, stagger, relative, haptic, layer };
 }
-function plan(keyframes, base, overrides, offset, relative = false, path) {
+function plan(keyframes, base, overrides, offset, relative = false, path, layer, seed = Math.random()) {
+    if (layer !== undefined && path)
+        throw new Error("A path owns x and y; it can't play on a layer.");
     return expand(keyframes, path).map(([property, frames]) => {
+        if (layer !== undefined && !layerable(property))
+            throw new Error(`Layers apply to x, y, scale, rotation and opacity; "${property}" has a single owner.`);
         if (path?.properties.includes(property)) {
             if (!Number.isFinite(path.transition.delay + offset) ||
                 path.transition.delay + offset < 0)
@@ -219,16 +256,20 @@ function plan(keyframes, base, overrides, offset, relative = false, path) {
             };
         }
         const override = overrides[property] ?? (property.startsWith('scale') ? overrides.scale : undefined);
-        const transition = resolveTransition(override ? mergeTransitions(base, override) : base, property, frames.length);
+        const transition = resolveTransition(fitTransition(override ? mergeTransitions(base, override) : base, frames.length), property, frames.length);
         transition.delay += offset;
-        return { property, keyframes: frames, transition, relative };
+        if (transition.seed !== undefined)
+            transition.seed = seed;
+        return { property, keyframes: frames, transition, relative, layer };
     });
 }
 /** Each property the animation touches, with the value it starts from when it sets one. */
 export function startingValues(animation, options) {
-    const { keyframes, relative, path } = prepare(animation, options);
+    const { keyframes, relative, path, layer } = prepare(animation, options);
     if (!keyframes)
         throw new Error(`Unknown preset "${animation}".`);
+    if (layer !== undefined)
+        return new Map(expand(keyframes, path).map(([property]) => [property, null]));
     return new Map(expand(keyframes, path).map(([property, [first]]) => [
         property,
         relative && !isColorProperty(property) ? null : first,