react-native-smooth-clip-view 0.4.6 → 0.5.1

package/ios/SmoothClipView.mm

@@ -136,6 +136,8 @@ static bool SmoothClipBuildPresentation(
     double shadowSpreadDistance,
     double rotation,
     double opacity,
+    double backdropTranslateX,
+    double backdropTranslateY,
     smoothclip::Presentation *result) {
   if (result == nullptr || !isfinite(x) || !isfinite(y) ||
       !isfinite(width) || !isfinite(height) ||
@@ -148,6 +150,7 @@ static bool SmoothClipBuildPresentation(
       !isfinite(shadowOffsetX) || !isfinite(shadowOffsetY) ||
       !isfinite(shadowBlurRadius) || !isfinite(shadowSpreadDistance) ||
       !isfinite(rotation) || !isfinite(opacity) ||
+      !isfinite(backdropTranslateX) || !isfinite(backdropTranslateY) ||
       contentScale <= 0 || shadowRed < 0 || shadowRed > 1 ||
       shadowGreen < 0 || shadowGreen > 1 ||
       shadowBlue < 0 || shadowBlue > 1 ||
@@ -179,7 +182,8 @@ static bool SmoothClipBuildPresentation(
       shadowSpreadDistance};
   *result = {
       geometry, contentTranslateX, contentTranslateY, contentScale, shadow,
-      rotation, smoothclip::clamp01(opacity)};
+      rotation, smoothclip::clamp01(opacity), backdropTranslateX,
+      backdropTranslateY};
   return true;
 }
 
@@ -381,6 +385,324 @@ static smoothclip::Presentation SmoothClipCanonicalSnapshot(
   return presentation;
 }
 
+// MARK: - Baked shadow tiles
+
+// A rounded-rect shadow's pixels depend only on corner radius, blur, spread
+// and colour, so one square tile holds every distinct pixel such a shadow can
+// show: four corners and a band between them that the compositor stretches
+// (`contentsCenter`) to any aperture, with no blur per frame. The margin on
+// each side of the shape is 3σ (1.5 × the CSS blur radius): it holds the tail
+// outside the shape and separates the band from the corners, so a stretched
+// edge is a true straight-edge profile.
+static const CGFloat kSmoothClipShadowTileBand = 2;
+// Tile radii round up to this step, so a drag ramping the radius bakes a
+// handful of tiles rather than one per frame, and a tile corner is never
+// tighter than the clip corner over it (that would read as a dark sliver).
+static const CGFloat kSmoothClipShadowTileRadiusStep = 4;
+
+@interface SmoothClipShadowTile : NSObject
+@property(nonatomic, readonly) CGImageRef image;
+/** Shape corner radius the tile was baked for, in points. */
+@property(nonatomic, readonly) CGFloat radius;
+/** Tile border beyond the shape rect on each side, in points. */
+@property(nonatomic, readonly) CGFloat margin;
+@property(nonatomic, readonly) CGFloat side;
+@property(nonatomic, readonly) CGFloat scale;
+@property(nonatomic, readonly) CGRect contentsCenter;
+@end
+
+@implementation SmoothClipShadowTile
+- (instancetype)initWithImage:(CGImageRef)image
+                       radius:(CGFloat)radius
+                       margin:(CGFloat)margin
+                         side:(CGFloat)side
+                        scale:(CGFloat)scale {
+  if (self = [super init]) {
+    _image = CGImageRetain(image);
+    _radius = radius;
+    _margin = margin;
+    _side = side;
+    _scale = scale;
+    const CGFloat corner = 2 * margin + radius;
+    _contentsCenter = CGRectMake(
+        corner / side, corner / side,
+        kSmoothClipShadowTileBand / side, kSmoothClipShadowTileBand / side);
+  }
+  return self;
+}
+- (void)dealloc {
+  CGImageRelease(_image);
+}
+@end
+
+static CGFloat SmoothClipBakedShadowTileRadius(CGFloat radius) {
+  return ceil(MAX(0, radius) / kSmoothClipShadowTileRadiusStep) *
+      kSmoothClipShadowTileRadiusStep;
+}
+
+static CGFloat SmoothClipBakedShadowMargin(const smoothclip::Shadow &shadow) {
+  return ceil(1.5 * MAX(0, shadow.blurRadius));
+}
+
+// Baked once per (radius step, curve, blur, colour, scale) and cached for the
+// process. The tile is the pure blurred shape the compositor draws for a
+// `shadowPath` layer, with nothing filled in on top of it; colour alpha is
+// applied as layer opacity. It is drawn with a Core Graphics shadow, not by
+// rendering a layer: `renderInContext:` draws a layer's shadow only where the
+// layer has content of its own, so a shadowPath-only layer renders nothing.
+// A Core Graphics shadow of `b` has sigma b / 2, the same sigma Core
+// Animation gives `shadowRadius` b / 2 (the blur path's setting), so the two
+// tails match sample for sample. The context comes from a UIKit image
+// renderer, whose base transform scales the blur with the tile's scale; a
+// hand-scaled CGBitmapContext leaves the shadow in pixel space.
+static NSCache<NSString *, SmoothClipShadowTile *> *SmoothClipShadowTileCache(void) {
+  static NSCache<NSString *, SmoothClipShadowTile *> *cache;
+  static dispatch_once_t once;
+  dispatch_once(&once, ^{
+    cache = [NSCache new];
+    cache.countLimit = 24;
+  });
+  return cache;
+}
+
+static NSString *SmoothClipShadowTileKey(
+    CGFloat tileRadius,
+    SmoothClipCornerCurve curve,
+    const smoothclip::Shadow &shadow,
+    CGFloat scale) {
+  return [NSString stringWithFormat:@"%g|%d|%g|%g|%g|%g|%g",
+      tileRadius, (int)curve, MAX(0, shadow.blurRadius),
+      smoothclip::clamp01(shadow.red), smoothclip::clamp01(shadow.green),
+      smoothclip::clamp01(shadow.blue), scale];
+}
+
+// The cached tile for this radius step, or nil. Never bakes.
+static SmoothClipShadowTile *SmoothClipCachedShadowTile(
+    CGFloat tileRadius,
+    SmoothClipCornerCurve curve,
+    const smoothclip::Shadow &shadow,
+    CGFloat scale) {
+  return [SmoothClipShadowTileCache()
+      objectForKey:SmoothClipShadowTileKey(tileRadius, curve, shadow, scale)];
+}
+
+// Radius steps searched on either side of a missing tile for one to show
+// while it bakes.
+static const int kSmoothClipShadowTileSearchSteps = 16;
+
+// The cached tile nearest to `tileRadius`: the exact one, else at each
+// distance the rounder neighbour before the tighter one (a tile corner
+// tighter than the clip corner over it reads as a dark sliver; a rounder one
+// only recedes under the clip). Never bakes.
+static SmoothClipShadowTile *SmoothClipNearestCachedShadowTile(
+    CGFloat tileRadius,
+    SmoothClipCornerCurve curve,
+    const smoothclip::Shadow &shadow,
+    CGFloat scale) {
+  for (int distance = 0; distance <= kSmoothClipShadowTileSearchSteps;
+       distance += 1) {
+    const CGFloat delta = distance * kSmoothClipShadowTileRadiusStep;
+    SmoothClipShadowTile *tile =
+        SmoothClipCachedShadowTile(tileRadius + delta, curve, shadow, scale);
+    if (tile != nil) return tile;
+    if (distance == 0 || tileRadius - delta < 0) continue;
+    tile = SmoothClipCachedShadowTile(tileRadius - delta, curve, shadow, scale);
+    if (tile != nil) return tile;
+  }
+  return nil;
+}
+
+// Bakes on the calling thread and caches the result: about a millisecond for
+// a 16 pt blur at 3x, growing with blur² × scale². The callers reach for it
+// only when nothing else can be shown (a cold cache, at mount) and for a
+// run's resting target, which must be exact from the run's last frame on;
+// every other tile bakes through SmoothClipRequestShadowTile, off the frame.
+static NSUInteger gSmoothClipShadowTileBakeCount = 0;
+static SmoothClipShadowTile *SmoothClipBakeShadowTile(
+    CGFloat tileRadius,
+    SmoothClipCornerCurve curve,
+    const smoothclip::Shadow &shadow,
+    CGFloat scale) {
+  NSString *key = SmoothClipShadowTileKey(tileRadius, curve, shadow, scale);
+  SmoothClipShadowTile *tile = [SmoothClipShadowTileCache() objectForKey:key];
+  if (tile != nil) return tile;
+  gSmoothClipShadowTileBakeCount += 1;
+  const CGFloat margin = SmoothClipBakedShadowMargin(shadow);
+
+  const CGFloat side = 2 * (2 * margin + tileRadius) + kSmoothClipShadowTileBand;
+  const CGRect shape = CGRectInset(CGRectMake(0, 0, side, side), margin, margin);
+  const SmoothClipCornerRadii radii = {
+      tileRadius, tileRadius, tileRadius, tileRadius};
+  CGPathRef path = SmoothClipCreateRoundedRectPath(shape, radii, curve);
+  CGColorRef color = [UIColor colorWithRed:smoothclip::clamp01(shadow.red)
+                                     green:smoothclip::clamp01(shadow.green)
+                                      blue:smoothclip::clamp01(shadow.blue)
+                                     alpha:1].CGColor;
+  const CGFloat blur = MAX(0, shadow.blurRadius);
+  UIGraphicsImageRendererFormat *format =
+      [UIGraphicsImageRendererFormat defaultFormat];
+  format.scale = scale;
+  format.opaque = NO;
+  format.preferredRange = UIGraphicsImageRendererFormatRangeStandard;
+  UIGraphicsImageRenderer *renderer = [[UIGraphicsImageRenderer alloc]
+      initWithSize:CGSizeMake(side, side) format:format];
+  UIImage *rendered = [renderer imageWithActions:^(
+      UIGraphicsImageRendererContext *rendererContext) {
+    CGContextRef context = rendererContext.CGContext;
+    // Only the shadow lands on the tile: the shape itself is filled far
+    // outside the bitmap and its shadow offset back by the same distance,
+    // so the interior keeps the blurred shape's own profile (0.5 at the
+    // edge) instead of a hard fill.
+    const CGFloat away = 4 * side;
+    CGContextSetShadowWithColor(context, CGSizeMake(0, -away), blur, color);
+    CGContextTranslateCTM(context, 0, away);
+    CGContextAddPath(context, path);
+    CGContextSetFillColorWithColor(context, color);
+    CGContextFillPath(context);
+  }];
+  CGPathRelease(path);
+  CGImageRef image = rendered.CGImage;
+  if (image == NULL) return nil;
+  tile = [[SmoothClipShadowTile alloc] initWithImage:image
+                                              radius:tileRadius
+                                              margin:margin
+                                                side:side
+                                               scale:scale];
+  [SmoothClipShadowTileCache() setObject:tile forKey:key];
+  return tile;
+}
+
+typedef void (^SmoothClipShadowTileCompletion)(SmoothClipShadowTile *tile);
+
+@interface SmoothClipShadowTileRequest : NSObject
+@property(nonatomic) CGFloat tileRadius;
+@property(nonatomic) SmoothClipCornerCurve curve;
+@property(nonatomic) smoothclip::Shadow shadow;
+@property(nonatomic) CGFloat scale;
+@property(nonatomic, readonly)
+    NSMutableArray<SmoothClipShadowTileCompletion> *completions;
+@end
+
+@implementation SmoothClipShadowTileRequest
+- (instancetype)init {
+  if (self = [super init]) {
+    _completions = [NSMutableArray array];
+  }
+  return self;
+}
+@end
+
+// Tiles requested off the frame's critical path, in request order, one per
+// main-queue drain: a block enqueued from inside a drain runs in the next
+// one, so a burst of missing steps costs one bake per run-loop turn rather
+// than all of them inside the transaction that asked for them.
+static NSMutableArray<SmoothClipShadowTileRequest *> *SmoothClipPendingShadowTiles(void) {
+  static NSMutableArray<SmoothClipShadowTileRequest *> *pending;
+  static dispatch_once_t once;
+  dispatch_once(&once, ^{
+    pending = [NSMutableArray array];
+  });
+  return pending;
+}
+
+static NSMutableDictionary<NSString *, SmoothClipShadowTileRequest *> *
+SmoothClipPendingShadowTilesByKey(void) {
+  static NSMutableDictionary<NSString *, SmoothClipShadowTileRequest *> *pending;
+  static dispatch_once_t once;
+  dispatch_once(&once, ^{
+    pending = [NSMutableDictionary dictionary];
+  });
+  return pending;
+}
+
+static BOOL gSmoothClipShadowTileBakeScheduled = NO;
+static void SmoothClipScheduleShadowTileBake(void);
+
+static void SmoothClipBakeNextShadowTile(void) {
+  gSmoothClipShadowTileBakeScheduled = NO;
+  NSMutableArray<SmoothClipShadowTileRequest *> *pending =
+      SmoothClipPendingShadowTiles();
+  SmoothClipShadowTileRequest *request = pending.firstObject;
+  if (request == nil) return;
+  [pending removeObjectAtIndex:0];
+  [SmoothClipPendingShadowTilesByKey() removeObjectForKey:SmoothClipShadowTileKey(
+      request.tileRadius, request.curve, request.shadow, request.scale)];
+  SmoothClipShadowTile *tile = SmoothClipBakeShadowTile(
+      request.tileRadius, request.curve, request.shadow, request.scale);
+  for (SmoothClipShadowTileCompletion completion in request.completions) {
+    completion(tile);
+  }
+  if (pending.count > 0) SmoothClipScheduleShadowTileBake();
+}
+
+static void SmoothClipScheduleShadowTileBake(void) {
+  if (gSmoothClipShadowTileBakeScheduled) return;
+  gSmoothClipShadowTileBakeScheduled = YES;
+  dispatch_async(dispatch_get_main_queue(), ^{
+    SmoothClipBakeNextShadowTile();
+  });
+}
+
+// Asks for the tile without baking it now. `completion` runs on the main
+// thread once the tile is cached, at once when it already is.
+static void SmoothClipRequestShadowTile(
+    CGFloat tileRadius,
+    SmoothClipCornerCurve curve,
+    const smoothclip::Shadow &shadow,
+    CGFloat scale,
+    SmoothClipShadowTileCompletion completion) {
+  SmoothClipShadowTile *cached =
+      SmoothClipCachedShadowTile(tileRadius, curve, shadow, scale);
+  if (cached != nil) {
+    if (completion != nil) completion(cached);
+    return;
+  }
+  NSString *key = SmoothClipShadowTileKey(tileRadius, curve, shadow, scale);
+  NSMutableDictionary<NSString *, SmoothClipShadowTileRequest *> *byKey =
+      SmoothClipPendingShadowTilesByKey();
+  SmoothClipShadowTileRequest *request = byKey[key];
+  if (request == nil) {
+    request = [SmoothClipShadowTileRequest new];
+    request.tileRadius = tileRadius;
+    request.curve = curve;
+    request.shadow = shadow;
+    request.scale = scale;
+    byKey[key] = request;
+    [SmoothClipPendingShadowTiles() addObject:request];
+  }
+  if (completion != nil) [request.completions addObject:[completion copy]];
+  SmoothClipScheduleShadowTileBake();
+}
+
+NSUInteger SmoothClipShadowTileBakeCountForTesting(void) {
+  return gSmoothClipShadowTileBakeCount;
+}
+
+NSUInteger SmoothClipPendingShadowTileCountForTesting(void) {
+  return SmoothClipPendingShadowTiles().count;
+}
+
+void SmoothClipBakePendingShadowTilesForTesting(void) {
+  while (SmoothClipPendingShadowTiles().count > 0) {
+    SmoothClipBakeNextShadowTile();
+  }
+}
+
+// The shadow layer's frame for a baked tile: the shape rect (aperture grown by
+// the spread, then offset) plus the tile margin on every side.
+static CGRect SmoothClipBakedShadowLayerRect(
+    SmoothClipCanonicalGeometry geometry,
+    const smoothclip::Shadow &shadow,
+    CGFloat margin) {
+  const CGFloat spread = shadow.spreadDistance;
+  CGRect rect = CGRectInset(geometry.rect, -spread, -spread);
+  if (CGRectGetWidth(rect) <= 0 || CGRectGetHeight(rect) <= 0) {
+    return CGRectZero;
+  }
+  rect = CGRectOffset(rect, shadow.offsetX, shadow.offsetY);
+  return CGRectInset(rect, -margin, -margin);
+}
+
 @implementation SmoothClipView {
   CALayer *_shadowLayer;
   SmoothClipPresentationContainerView *_presentationContainer;
@@ -395,6 +717,9 @@ static smoothclip::Presentation SmoothClipCanonicalSnapshot(
   BOOL _hasShadowModel;
   SmoothClipCanonicalGeometry _shadowModelGeometry;
   smoothclip::Shadow _shadowModel;
+  // `shadowRendering="baked"`: stretch one pre-blurred tile instead of
+  // blurring a path every frame. See SmoothClipBakedShadowTile.
+  BOOL _bakedShadows;
 
   SmoothClipContainerView *_clipContainer;
   SmoothClipContainerView *_contentContainer;
@@ -485,6 +810,7 @@ static smoothclip::Presentation SmoothClipCanonicalSnapshot(
 
     _shadowLayer = nil;
     // Created lazily so the common clipping-only path owns no shadow layer.
+    _bakedShadows = NO;
 
     _unequalCornerMask = [CAShapeLayer layer];
     _unequalCornerMask.actions = @{
@@ -600,31 +926,175 @@ static smoothclip::Presentation SmoothClipCanonicalSnapshot(
     @"shadowOffset": [NSNull null],
     @"bounds": [NSNull null],
     @"position": [NSNull null],
+    @"opacity": [NSNull null],
+    @"contents": [NSNull null],
+    @"contentsCenter": [NSNull null],
+    @"contentsScale": [NSNull null],
   };
   [_presentationContainer.layer insertSublayer:_shadowLayer below:_clipContainer.layer];
   return _shadowLayer;
 }
 
+- (CGFloat)bakedShadowScale {
+  const CGFloat scale = self.traitCollection.displayScale;
+  return scale > 0 ? scale : UIScreen.mainScreen.scale;
+}
+
+// Radius step of the tile a geometry's shadow draws from.
+- (CGFloat)bakedShadowTileRadiusForGeometry:(SmoothClipCanonicalGeometry)geometry
+                                     shadow:(const smoothclip::Shadow &)shadow {
+  return SmoothClipBakedShadowTileRadius(SmoothClipAdjustedShadowRadius(
+      geometry.radii.topLeft, shadow.spreadDistance));
+}
+
+- (BOOL)usesBakedShadowForGeometry:(SmoothClipCanonicalGeometry)geometry
+                            shadow:(const smoothclip::Shadow &)shadow {
+  // Unequal radii have no single tile; they keep the blur path. So does a
+  // shape too small for two corner slices on a side, 2 x (margin + radius):
+  // the compositor would squash the slices rather than overlap the blur
+  // tails the way the true shadow does.
+  if (!_bakedShadows || !SmoothClipCornerRadiiAreUniform(geometry.radii)) {
+    return NO;
+  }
+  const CGFloat minimumSide = 2 *
+      (SmoothClipBakedShadowMargin(shadow) +
+       [self bakedShadowTileRadiusForGeometry:geometry shadow:shadow]);
+  const CGFloat spread = 2 * shadow.spreadDistance;
+  return CGRectGetWidth(geometry.rect) + spread >= minimumSide &&
+      CGRectGetHeight(geometry.rect) + spread >= minimumSide;
+}
+
+// A requested tile is cached: draw it, if the model still wants it and
+// nothing else owns the layer (a run in flight swaps tiles from its own
+// keyframes, and its completion writes the model again).
+- (void)shadowTileDidLand:(SmoothClipShadowTile *)tile {
+  if (tile == nil || _activeAnimationId != 0 || !_hasShadowModel ||
+      _shadowLayer == nil ||
+      ![self usesBakedShadowForGeometry:_shadowModelGeometry
+                                 shadow:_shadowModel]) {
+    return;
+  }
+  const CGFloat wanted = [self bakedShadowTileRadiusForGeometry:_shadowModelGeometry
+                                                         shadow:_shadowModel];
+  if (SmoothClipCachedShadowTile(wanted, _shadowModelGeometry.curve,
+                                 _shadowModel, [self bakedShadowScale]) != tile ||
+      _shadowLayer.contents == (__bridge id)tile.image) {
+    return;
+  }
+  [CATransaction begin];
+  [CATransaction setDisableActions:YES];
+  [self writeBakedShadowModel:_shadowModel
+                     geometry:_shadowModelGeometry
+                      visible:SmoothBoxShadowVisible(_shadowModelGeometry, _shadowModel)
+                  nearestTile:NO
+                        layer:_shadowLayer];
+  [CATransaction commit];
+}
+
+// `allowNearest`: a missing tile may be stood in for by the nearest cached
+// step until the exact one lands (a drag crossing a step, a model write); a
+// run's resting target passes NO and bakes now, so its last frame is exact.
+- (void)writeBakedShadowModel:(const smoothclip::Shadow &)shadow
+                     geometry:(SmoothClipCanonicalGeometry)geometry
+                      visible:(BOOL)visible
+                  nearestTile:(BOOL)allowNearest
+                        layer:(CALayer *)shadowLayer {
+  SmoothClipShadowTile *tile = nil;
+  if (visible) {
+    const CGFloat tileRadius =
+        [self bakedShadowTileRadiusForGeometry:geometry shadow:shadow];
+    const CGFloat scale = [self bakedShadowScale];
+    tile = SmoothClipCachedShadowTile(tileRadius, geometry.curve, shadow, scale);
+    if (tile == nil && allowNearest) {
+      tile = SmoothClipNearestCachedShadowTile(
+          tileRadius, geometry.curve, shadow, scale);
+      if (tile != nil) {
+        // A neighbouring step for now (one step off is invisible under the
+        // blur the tile was made for); the exact tile lands off this frame.
+        __weak SmoothClipView *weakSelf = self;
+        SmoothClipRequestShadowTile(
+            tileRadius, geometry.curve, shadow, scale,
+            ^(SmoothClipShadowTile *exact) {
+              [weakSelf shadowTileDidLand:exact];
+            });
+      }
+    }
+    if (tile == nil) {
+      // Nothing near enough to show meanwhile (a cold cache, at mount), or a
+      // resting target that must be exact.
+      tile = SmoothClipBakeShadowTile(tileRadius, geometry.curve, shadow, scale);
+    }
+  }
+  // Leave no blur-path state behind: a tile layer that kept a shadowPath
+  // would draw both.
+  if (shadowLayer.shadowPath != NULL) shadowLayer.shadowPath = NULL;
+  shadowLayer.shadowOpacity = 0;
+  if (tile == nil) {
+    shadowLayer.opacity = 0;
+    return;
+  }
+  if (shadowLayer.contents != (__bridge id)tile.image) {
+    shadowLayer.contents = (__bridge id)tile.image;
+    shadowLayer.contentsCenter = tile.contentsCenter;
+    shadowLayer.contentsScale = tile.scale;
+    shadowLayer.contentsGravity = kCAGravityResize;
+  }
+  const CGRect rect =
+      SmoothClipBakedShadowLayerRect(geometry, shadow, tile.margin);
+  shadowLayer.bounds = CGRectMake(0, 0, rect.size.width, rect.size.height);
+  shadowLayer.position =
+      CGPointMake(CGRectGetMidX(rect), CGRectGetMidY(rect));
+  shadowLayer.opacity = smoothclip::clamp01(shadow.alpha);
+}
+
 - (void)writeShadowModel:(const smoothclip::Shadow &)shadow
                  geometry:(SmoothClipCanonicalGeometry)geometry {
+  [self writeShadowModel:shadow
+                geometry:geometry
+                   baked:[self usesBakedShadowForGeometry:geometry shadow:shadow]
+             nearestTile:YES];
+}
+
+- (void)writeShadowModel:(const smoothclip::Shadow &)shadow
+                 geometry:(SmoothClipCanonicalGeometry)geometry
+                    baked:(BOOL)baked
+              nearestTile:(BOOL)allowNearest {
   const smoothclip::Shadow effectiveShadow =
       SmoothBoxShadowWithEffectiveAlpha(geometry, shadow);
   const BOOL visible = SmoothBoxShadowVisible(geometry, effectiveShadow);
   if (_shadowLayer == nil && !visible) return;
 
   CALayer *shadowLayer = visible ? [self ensureShadowLayer] : _shadowLayer;
+  const BOOL pathInputChanged = !_hasShadowModel ||
+      !SmoothBoxShadowPathInputEqual(
+          _shadowModelGeometry, _shadowModel, geometry, effectiveShadow);
+  _hasShadowModel = YES;
+  _shadowModelGeometry = geometry;
+  _shadowModel = effectiveShadow;
+  if (baked) {
+    [self writeBakedShadowModel:effectiveShadow
+                       geometry:geometry
+                        visible:visible
+                    nearestTile:allowNearest
+                          layer:shadowLayer];
+    return;
+  }
+  BOOL leftTile = NO;
+  if (shadowLayer.contents != nil) {
+    // Back from a baked tile: the blur path draws at layer opacity 1 with
+    // the alpha in shadowColor, and needs its path again.
+    shadowLayer.contents = nil;
+    shadowLayer.opacity = 1;
+    leftTile = YES;
+  }
   shadowLayer.bounds = self.bounds;
   shadowLayer.position = CGPointMake(
       CGRectGetMidX(self.bounds), CGRectGetMidY(self.bounds));
-  if (!_hasShadowModel || !SmoothBoxShadowPathInputEqual(
-          _shadowModelGeometry, _shadowModel, geometry, effectiveShadow)) {
+  if (pathInputChanged || leftTile) {
     CGPathRef path = SmoothClipCreateShadowPath(geometry, effectiveShadow);
     shadowLayer.shadowPath = path;
     CGPathRelease(path);
   }
-  _hasShadowModel = YES;
-  _shadowModelGeometry = geometry;
-  _shadowModel = effectiveShadow;
   shadowLayer.shadowColor = [self colorForShadow:effectiveShadow];
   shadowLayer.shadowOpacity = visible ? 1 : 0;
   shadowLayer.shadowRadius = MAX(0, effectiveShadow.blurRadius) / 2.0;
@@ -632,6 +1102,178 @@ static smoothclip::Presentation SmoothClipCanonicalSnapshot(
       effectiveShadow.offsetX, effectiveShadow.offsetY);
 }
 
+// Animations for a baked shadow run. Bounds, position and opacity
+// interpolate; the tile (radius step, blur, colour) is categorical, so it steps
+// at the key times where the run's progress crosses each radius step, with the
+// target's blur and colour from the first swap on. Steps are one radius step
+// apart, invisible under any blur the tile was made for.
+- (NSArray<CAAnimation *> *)bakedShadowAnimationsFromGeometry:
+                                (SmoothClipCanonicalGeometry)fromGeometry
+                                  fromShadow:(smoothclip::Shadow)fromShadow
+                                  toGeometry:(SmoothClipCanonicalGeometry)toGeometry
+                                    toShadow:(smoothclip::Shadow)toShadow
+                                      timing:(CAMediaTimingFunction *)timing
+                                      spring:(BOOL)spring
+                                    velocity:(double)velocity
+                                    duration:(CFTimeInterval)duration {
+  const CGFloat scale = [self bakedShadowScale];
+  const CGFloat fromRadius =
+      [self bakedShadowTileRadiusForGeometry:fromGeometry shadow:fromShadow];
+  const CGFloat toRadius =
+      [self bakedShadowTileRadiusForGeometry:toGeometry shadow:toShadow];
+  // The start is whatever the model shows (its step or a stand-in); the
+  // target was baked by the model write just before this and must be exact.
+  SmoothClipShadowTile *fromTile = SmoothClipNearestCachedShadowTile(
+      fromRadius, fromGeometry.curve, fromShadow, scale);
+  if (fromTile == nil) {
+    fromTile = SmoothClipBakeShadowTile(
+        fromRadius, fromGeometry.curve, fromShadow, scale);
+  }
+  SmoothClipShadowTile *toTile = SmoothClipBakeShadowTile(
+      toRadius, toGeometry.curve, toShadow, scale);
+  const CGFloat fromMargin = fromTile != nil
+      ? fromTile.margin : SmoothClipBakedShadowMargin(fromShadow);
+  const CGFloat toMargin = toTile != nil
+      ? toTile.margin : SmoothClipBakedShadowMargin(toShadow);
+  const CGRect fromRect =
+      SmoothClipBakedShadowLayerRect(fromGeometry, fromShadow, fromMargin);
+  const CGRect toRect =
+      SmoothClipBakedShadowLayerRect(toGeometry, toShadow, toMargin);
+  NSMutableArray<CAAnimation *> *animations = [NSMutableArray array];
+  const auto add = [&](NSString *keyPath, id from, id to) {
+    [animations addObject:spring
+        ? [self springAnimationForKeyPath:keyPath fromValue:from toValue:to
+                                 velocity:velocity duration:duration]
+        : [self basicAnimationForKeyPath:keyPath fromValue:from toValue:to
+                          timingFunction:timing]];
+  };
+  if (!CGSizeEqualToSize(fromRect.size, toRect.size)) {
+    add(@"bounds",
+        [NSValue valueWithCGRect:CGRectMake(
+            0, 0, fromRect.size.width, fromRect.size.height)],
+        [NSValue valueWithCGRect:CGRectMake(
+            0, 0, toRect.size.width, toRect.size.height)]);
+  }
+  const CGPoint fromCenter =
+      CGPointMake(CGRectGetMidX(fromRect), CGRectGetMidY(fromRect));
+  const CGPoint toCenter =
+      CGPointMake(CGRectGetMidX(toRect), CGRectGetMidY(toRect));
+  if (!CGPointEqualToPoint(fromCenter, toCenter)) {
+    add(@"position",
+        [NSValue valueWithCGPoint:fromCenter],
+        [NSValue valueWithCGPoint:toCenter]);
+  }
+  if (fromShadow.alpha != toShadow.alpha) {
+    add(@"opacity", @(smoothclip::clamp01(fromShadow.alpha)),
+        @(smoothclip::clamp01(toShadow.alpha)));
+  }
+  if (fromTile == nil || toTile == nil || fromTile == toTile) {
+    return animations;
+  }
+
+  NSMutableArray *images = [NSMutableArray arrayWithObject:(__bridge id)fromTile.image];
+  NSMutableArray<NSValue *> *centers =
+      [NSMutableArray arrayWithObject:[NSValue valueWithCGRect:fromTile.contentsCenter]];
+  NSMutableArray<NSNumber *> *keyTimes = [NSMutableArray arrayWithObject:@0];
+  const CGFloat rawFrom = SmoothClipAdjustedShadowRadius(
+      fromGeometry.radii.topLeft, fromShadow.spreadDistance);
+  const CGFloat rawTo = SmoothClipAdjustedShadowRadius(
+      toGeometry.radii.topLeft, toShadow.spreadDistance);
+  // Normalised time at which the run's progress first reaches `target`.
+  const auto timeForProgress = [&](double target) -> double {
+    if (target <= 0) return 0;
+    if (target >= 1) return 1;
+    constexpr double step = 1.0 / 240.0;
+    if (spring) {
+      smoothclip::ScalarSpringState state{0, velocity};
+      double elapsed = 0;
+      while (elapsed < duration) {
+        state = smoothclip::advanceScalarSpring(state, _springAnimation, step);
+        elapsed += step;
+        if (state.position >= target) break;
+      }
+      return duration > 0 ? std::min(1.0, elapsed / duration) : 1.0;
+    }
+    double low = 0, high = 1;
+    for (int iteration = 0; iteration < 20; iteration += 1) {
+      const double middle = (low + high) / 2;
+      const double progress = smoothclip::cubicBezier(
+          _timingAnimation.controlPoint1X, _timingAnimation.controlPoint1Y,
+          _timingAnimation.controlPoint2X, _timingAnimation.controlPoint2Y,
+          middle);
+      if (progress < target) low = middle; else high = middle;
+    }
+    return (low + high) / 2;
+  };
+  if (fromTile.radius == toTile.radius || rawTo == rawFrom) {
+    // Same radius step, a different blur or colour: one swap, mid-run.
+    [images addObject:(__bridge id)toTile.image];
+    [centers addObject:[NSValue valueWithCGRect:toTile.contentsCenter]];
+    [keyTimes addObject:@0.5];
+  } else {
+    const BOOL growing = toTile.radius > fromTile.radius;
+    const CGFloat step = kSmoothClipShadowTileRadiusStep * (growing ? 1 : -1);
+    // Key time a missing step hands to the next cached tile on a growing run.
+    double carriedTime = -1;
+    for (CGFloat tileRadius = fromTile.radius + step;
+         growing ? tileRadius <= toTile.radius : tileRadius >= toTile.radius;
+         tileRadius += step) {
+      // Rounding up: a growing radius takes tile T once it passes T - step,
+      // a shrinking one once it reaches T.
+      const CGFloat threshold = growing
+          ? tileRadius - kSmoothClipShadowTileRadiusStep : tileRadius;
+      const double progress = (threshold - rawFrom) / (rawTo - rawFrom);
+      SmoothClipShadowTile *tile = SmoothClipCachedShadowTile(
+          tileRadius, toGeometry.curve, toShadow, scale);
+      if (tile == nil) {
+        // Not baked inside this transaction: it lands for the next run. A
+        // growing run swaps to the next cached (rounder) tile at this step's
+        // time instead, so the shown corner is never tighter than the clip's;
+        // a shrinking run simply keeps the rounder tile a step longer.
+        SmoothClipRequestShadowTile(
+            tileRadius, toGeometry.curve, toShadow, scale, nil);
+        if (growing && carriedTime < 0) carriedTime = timeForProgress(progress);
+        continue;
+      }
+      const double ownTime = timeForProgress(progress);
+      const double time = std::max(
+          keyTimes.lastObject.doubleValue,
+          carriedTime >= 0 ? std::min(carriedTime, ownTime) : ownTime);
+      carriedTime = -1;
+      if (time <= keyTimes.lastObject.doubleValue + 1e-6) {
+        // Same instant as the previous swap (leaving a step value at t = 0):
+        // the later tile is the one shown; key times must strictly increase.
+        images[images.count - 1] = (__bridge id)tile.image;
+        centers[centers.count - 1] = [NSValue valueWithCGRect:tile.contentsCenter];
+        continue;
+      }
+      [images addObject:(__bridge id)tile.image];
+      [centers addObject:[NSValue valueWithCGRect:tile.contentsCenter]];
+      [keyTimes addObject:@(time)];
+    }
+  }
+  if (images.count < 2) return animations;
+  // Discrete key times bracket their values: one more entry than values, the
+  // last at 1 (CAKeyframeAnimation.keyTimes). Without the closing entry Core
+  // Animation ignores the array and spaces the swaps evenly over the run.
+  [keyTimes addObject:@1];
+  CAKeyframeAnimation *contents =
+      [CAKeyframeAnimation animationWithKeyPath:@"contents"];
+  contents.values = images;
+  contents.keyTimes = keyTimes;
+  contents.calculationMode = kCAAnimationDiscrete;
+  contents.duration = duration;
+  [animations addObject:contents];
+  CAKeyframeAnimation *contentsCenter =
+      [CAKeyframeAnimation animationWithKeyPath:@"contentsCenter"];
+  contentsCenter.values = centers;
+  contentsCenter.keyTimes = keyTimes;
+  contentsCenter.calculationMode = kCAAnimationDiscrete;
+  contentsCenter.duration = duration;
+  [animations addObject:contentsCenter];
+  return animations;
+}
+
 - (void)writeShadow:(const smoothclip::Shadow &)shadow
             geometry:(SmoothClipCanonicalGeometry)geometry {
   _canonicalShadow = shadow;
@@ -964,6 +1606,15 @@ static smoothclip::Presentation SmoothClipCanonicalSnapshot(
   if (shadowLayer == nil) return SmoothClipCanonicalSnapshot({
       geometry, transform.tx, transform.ty, contentScale, shadow,
       [self visibleRotation], [self visibleOpacity]});
+  if (shadowLayer.contents != nil) {
+    // A baked tile: colour, blur, offset and spread never move on the layer
+    // (a run swaps tiles); the layer's opacity carries the alpha.
+    shadow.enabled = _canonicalShadow.enabled || shadowLayer.opacity > 0;
+    shadow.alpha = shadowLayer.opacity;
+    return SmoothClipCanonicalSnapshot({
+        geometry, transform.tx, transform.ty, contentScale, shadow,
+        [self visibleRotation], [self visibleOpacity]});
+  }
   shadow.enabled = _canonicalShadow.enabled || shadowLayer.shadowOpacity > 0;
   shadow.blurRadius = shadowLayer.shadowRadius * 2.0;
   shadow.offsetX = shadowLayer.shadowOffset.width;
@@ -1087,16 +1738,7 @@ static smoothclip::Presentation SmoothClipCanonicalSnapshot(
   // Every key path shares one normalized trajectory. Derive the terminal
   // duration from the same relative-energy rule as Android/Reanimated instead
   // of asking each Core Animation property for an independent settle time.
-  smoothclip::ScalarSpringState state{0, velocity};
-  constexpr double step = 1.0 / 120.0;
-  double elapsed = 0;
-  while (elapsed < 10.0 &&
-         smoothclip::relativeSpringEnergy(state, _springAnimation) >
-             _springAnimation.energyThreshold) {
-    state = smoothclip::advanceScalarSpring(state, _springAnimation, step);
-    elapsed += step;
-  }
-  return elapsed;
+  return smoothclip::springSettleDuration(_springAnimation, velocity);
 }
 
 - (CASpringAnimation *)springAnimationForKeyPath:(NSString *)keyPath
@@ -1174,11 +1816,22 @@ static smoothclip::Presentation SmoothClipCanonicalSnapshot(
   _canonicalShadow = toShadow;
   SmoothBoxShadowNormalizeAnimationEndpoints(
       fromGeometry, &fromShadow, toGeometry, &toShadow);
+  // A baked run animates the tile layer's frame and opacity and swaps tiles
+  // in steps (bakedShadowAnimationsFromGeometry:...). One non-uniform
+  // endpoint has no tile, so such a run takes the blur path throughout.
+  const BOOL bakedShadow =
+      (SmoothBoxShadowVisible(fromGeometry, fromShadow) ||
+       SmoothBoxShadowVisible(toGeometry, toShadow)) &&
+      [self usesBakedShadowForGeometry:fromGeometry shadow:fromShadow] &&
+      [self usesBakedShadowForGeometry:toGeometry shadow:toShadow];
   // The target model layer is complete before any presentation animations are
   // attached. Core Animation may remove the terminal presentation animation
   // before its delegate runs, so correctness cannot depend on completion-time
   // cleanup hiding a stale path or opaque color.
-  [self writeShadowModel:toShadow geometry:toGeometry];
+  [self writeShadowModel:toShadow
+                geometry:toGeometry
+                   baked:bakedShadow
+             nearestTile:NO];
   if (usesMask) {
     // Keep one mask representation for the full interval, including an
     // unequal→uniform transition. Switching layer.mask mid-animation would
@@ -1217,12 +1870,13 @@ static smoothclip::Presentation SmoothClipCanonicalSnapshot(
     [self ensureShadowLayer];
     // Reveal opacity is encoded in shadowColor alpha. Animating layer opacity
     // too would multiply both curves and produce a quadratic-looking fade.
-    _shadowLayer.shadowOpacity = 1;
+    // (A baked tile has no shadowColor; its alpha is the layer opacity.)
+    if (!bakedShadow) _shadowLayer.shadowOpacity = 1;
   }
-  CGPathRef fromShadowPath = animatesShadowPath
+  CGPathRef fromShadowPath = animatesShadowPath && !bakedShadow
       ? SmoothClipCreateShadowPath(fromGeometry, fromShadow)
       : nil;
-  CGPathRef toShadowPath = animatesShadowPath
+  CGPathRef toShadowPath = animatesShadowPath && !bakedShadow
       ? SmoothClipCreateShadowPath(toGeometry, toShadow)
       : nil;
   CAAnimationGroup *group = [CAAnimationGroup animation];
@@ -1292,7 +1946,18 @@ static smoothclip::Presentation SmoothClipCanonicalSnapshot(
     }
     contentGroup.animations = contentAnimations;
     contentGroup.duration = duration;
-    if (animatesShadow) {
+    if (animatesShadow && bakedShadow) {
+      shadowGroup.animations = [self
+          bakedShadowAnimationsFromGeometry:fromGeometry
+                                 fromShadow:fromShadow
+                                 toGeometry:toGeometry
+                                   toShadow:toShadow
+                                     timing:timing
+                                     spring:NO
+                                   velocity:0
+                                   duration:duration];
+      shadowGroup.duration = duration;
+    } else if (animatesShadow) {
       NSMutableArray<CAAnimation *> *shadowAnimations = [NSMutableArray array];
       if (animatesShadowPath) [shadowAnimations addObject:
           [self basicAnimationForKeyPath:@"shadowPath"
@@ -1435,7 +2100,18 @@ static smoothclip::Presentation SmoothClipCanonicalSnapshot(
     }
     contentGroup.animations = contentAnimations;
     contentGroup.duration = springDuration;
-    if (animatesShadow) {
+    if (animatesShadow && bakedShadow) {
+      shadowGroup.animations = [self
+          bakedShadowAnimationsFromGeometry:fromGeometry
+                                 fromShadow:fromShadow
+                                 toGeometry:toGeometry
+                                   toShadow:toShadow
+                                     timing:nil
+                                     spring:YES
+                                   velocity:velocity
+                                   duration:springDuration];
+      shadowGroup.duration = springDuration;
+    } else if (animatesShadow) {
       NSMutableArray<CAAnimation *> *shadowAnimations = [NSMutableArray array];
       if (animatesShadowPath) [shadowAnimations addObject:
           [self springAnimationForKeyPath:@"shadowPath"
@@ -1527,6 +2203,14 @@ static smoothclip::Presentation SmoothClipCanonicalSnapshot(
           convertTime:sharedBeginTime
           fromLayer:nil];
     }
+    // A stamped epoch may sit up to one frame ahead of this commit. Until it
+    // arrives the run presents its first frame rather than the model values
+    // the layers already hold, which are the target.
+    appearanceGroup.fillMode = kCAFillModeBackwards;
+    group.fillMode = kCAFillModeBackwards;
+    contentGroup.fillMode = kCAFillModeBackwards;
+    if (animatesShadow) shadowGroup.fillMode = kCAFillModeBackwards;
+    if (maskAnimation != nil) maskAnimation.fillMode = kCAFillModeBackwards;
   }
 
   _animationDelegate = [SmoothClipAnimationDelegate new];
@@ -1859,6 +2543,17 @@ static smoothclip::Presentation SmoothClipCanonicalSnapshot(
   [super updateProps:props oldProps:oldProps];
   self.clipsToBounds = YES;
 
+  const BOOL bakedShadows = newProps.shadowRendering == 1;
+  if (bakedShadows != _bakedShadows) {
+    _bakedShadows = bakedShadows;
+    // Re-render the current shadow in the new mode. A run in flight keeps its
+    // renderer to the end; its completion writes the model again.
+    if (_activeAnimationId == 0 && _hasShadowModel) {
+      [self writeShadow:_requestedShadow
+               geometry:[self canonicalGeometryValue]];
+    }
+  }
+
   const uint64_t nextDriverId =
       isfinite(newProps.driverId) && newProps.driverId > 0
       ? static_cast<uint64_t>(newProps.driverId)
@@ -1888,6 +2583,8 @@ static smoothclip::Presentation SmoothClipCanonicalSnapshot(
           newProps.initialClipBoxShadowSpreadDistance,
           newProps.initialRotation,
           newProps.initialOpacity,
+          newProps.initialBackdropTranslateX,
+          newProps.initialBackdropTranslateY,
           &initial)) {
     // The initial presentation is atomic. Never apply a valid subset when one
     // field rejects.
@@ -2013,6 +2710,10 @@ static smoothclip::Presentation SmoothClipCanonicalSnapshot(
           shadowSpreadDistance,
           rotation,
           opacity,
+          // The command protocol carries no backdrop channel; a command-driven
+          // host keeps its backdrops where they are.
+          0,
+          0,
           &presentation)) {
     return;
   }