react-native-smooth-clip-view 0.4.5 → 0.5.0

package/CHANGELOG.md

@@ -1,5 +1,71 @@
 # Changelog
 
+## [0.5.0](https://github.com/kbrattli/react-native-smooth-clip-view/releases/tag/v0.5.0) — 2026-09-28
+
+- **Backdrop channel.** A presentation gains `backdrop: { translateX,
+  translateY }`, and the new `SmoothClipBackdropView` (`controller={clip}`)
+  is translated by it: every `setFrame` writes the channel in the same native
+  call as the clip, and every run animates it on the clip's own epoch (a
+  translation group on the shared Core Animation `beginTime` on iOS, the same
+  Choreographer advance on Android). Content that must stay locked to the
+  aperture no longer needs a Reanimated mapper, which can land a frame after
+  the clip. The native packet grows by two values (stride 23 → 25) and the
+  host takes `initialBackdropTranslateX/Y`, so a native rebuild is required;
+  a JavaScript-only update cannot upgrade an older native build.
+- iOS anchors a native run to the frame stamp JS passes (Reanimated's
+  `__frameTimestamp`, the display link's target vsync) as the shared Core
+  Animation `beginTime`, the way the Android frame loop already did. A run and
+  a `withTiming` begun in the same UI frame now trace one epoch; before, the
+  run began at its install time and led the Reanimated model by the rest of
+  that frame (about 14 ms at 60 Hz). Animation groups carry backwards fill so a
+  stamp up to one frame ahead of the commit shows the run's first frame, not
+  the target. JS now stamps runs on every platform.
+- `shadowRendering="baked"` on `SmoothClipView` renders the box shadow from one
+  pre-blurred tile per 4 pt corner-radius step that the compositor stretches
+  (`contentsCenter` on iOS, nine bitmap pieces on Android), so an animated or
+  dragged aperture costs no blur per frame. iOS bakes the tile through Core
+  Animation's own shadow path so it matches a `shadowPath` layer; Android
+  bakes it with the same `BlurMaskFilter` as the blur path. Runs animate the
+  tile layer's frame and opacity and swap tiles in steps where the radius,
+  blur or colour changes. Uniform radii only, and a shape at least
+  2 × (1.5 × blur + radius) on a side; unequal radii or a smaller shape keep
+  the blur path. Default stays `"blur"`.
+- Android builds a uniform circular corner with `addRoundRect` in the shared
+  path builder, so the shadow path (not only the clip) stays an rrect the
+  renderer can clip and blur analytically. Paths are `rewind()` instead of
+  `reset()` between frames, keeping their storage.
+- Baked tiles no longer bake inside the frame. A shadow's first tile bakes on
+  the calling thread (at mount, when nothing else can be shown) and a run's
+  resting target bakes at install, so the run ends exact; every other radius
+  step bakes off the frame (one per main-queue turn on iOS, a background
+  thread on Android) while the nearest cached step stands in, and the model
+  takes the exact tile when it lands. A run whose intermediate steps are not
+  cached yet swaps to the next cached, rounder tile at the missing step's key
+  time, so the shown corner is never tighter than the clip's.
+- iOS discrete tile swaps carry the closing key time Core Animation's discrete
+  mode requires (`keyTimes` has one more entry than `values`, ending at 1), so
+  each swap lands where the radius crosses its step rather than on an even
+  grid.
+- iOS trusts a frame stamp only within the same ±1 s window as Android. A
+  group held pending longer (a host that could not display, the app inactive)
+  or a stamp from a rescaled clock starts now instead of beginning fully
+  elapsed.
+- `canonicalizeClipPresentation` validates and canonicalizes in one pass: the
+  shadow colour, the geometry and the rotation were each parsed twice per
+  `setFrame`. The iOS packet reader reads the array length once per
+  presentation instead of once per value.
+
+## [0.4.6](https://github.com/kbrattli/react-native-smooth-clip-view/releases/tag/v0.4.6) — 2026-09-20
+
+- Draw `continuous` corners on Android as a Figma smoothed corner (smoothing
+  0.6) instead of a single cubic pulled towards the corner point. The apex now
+  matches a circular corner of the same radius and the shoulders ease in from
+  1.6 × the radius, so a radius reads the same as on iOS and as
+  `react-native-fast-squircle` at `cornerSmoothing={0.6}`. Clip, shadow, and hit
+  testing share the path. The per-frame rebuild still allocates nothing and
+  does no trigonometry unless a shoulder has to be shortened to fit.
+  Existing Android `continuous` clips become visibly rounder at the same radius.
+
 ## [0.4.5](https://github.com/kbrattli/react-native-smooth-clip-view/releases/tag/v0.4.5) — 2026-09-20
 
 - Run native `animateTo` for uniform `continuous` clips. The autonomous gate now

package/README.md

@@ -214,11 +214,47 @@ APIs share validation, run ownership, and completion behavior.
   reject the complete presentation. Spring opacity is clamped for rendering
   without clamping its internal spring state.
 - Circular and continuous curves and independent corner radii are supported.
+- `continuous` is the platform squircle: `CALayer.cornerCurve` on iOS for
+  uniform radii, and a Figma smoothed corner at smoothing 0.6 on Android (the
+  shape `react-native-fast-squircle` draws at `cornerSmoothing={0.6}`). The apex
+  matches a circular corner of the same radius; the shoulders start 1.6 × the
+  radius from the corner. The two platforms are close, not pixel-identical.
 - Native `animateTo` runs need uniform corner radii and one curve for the whole
   run, so a uniform `continuous` clip animates natively. Unequal radii or a
   curve change are static-only: set them with `setFrame`; `animateTo` returns
   `null`.
 - One outset `boxShadow` is supported. It escapes the aperture but not the host.
+- `shadowRendering="baked"` on the host draws that shadow from one pre-blurred
+  tile per corner-radius step (4 pt), stretched by the compositor, instead of
+  blurring a path on every frame the aperture moves: a native run or a drag of
+  a full-screen window then costs no per-frame blur on either platform. A tile
+  is baked once per (radius step, blur, colour), about a millisecond for a
+  16 pt blur, and cached for the process. Only two bakes happen on the calling
+  thread: a shadow's first tile (at mount, when nothing else can be shown)
+  and a run's resting target (at install, so the run ends exact). Every other
+  step bakes off the frame while the nearest cached step stands in, so a drag
+  that crosses radius steps never blocks a frame. It needs uniform corner radii
+  and a shape at least 2 × (1.5 × blur + radius) on each side, room for two
+  corner slices (unequal radii or a smaller shape keep the blur path for that
+  frame or run); the tile corner
+  rounds up to the next step, so a shadow corner may be up to 4 pt rounder
+  than its clip, which no blur the tile was made for resolves; a run that
+  changes radius, blur or colour swaps tiles in steps along the way. The baked
+  shadow is drawn under the aperture on both platforms (the Android blur path
+  cuts it out), so content over it should be opaque.
+- `backdrop: { translateX, translateY }` on a presentation translates every
+  `SmoothClipBackdropView` bound to the same controller (`controller={clip}`,
+  anywhere in the tree, any number of them). The channel is part of the
+  presentation, so a `setFrame` writes it in the same native call as the clip
+  and a run animates it on the clip's own epoch: content that must stay
+  locked to the aperture (a screen-sized canvas centred in the window) is
+  sampled by the same clock as the clip, with no Reanimated mapper in
+  between. The translation goes on an inner content layer; the view's own
+  `transform` style stays React Native's. A backdrop that binds while a run
+  is in flight adopts the driver's current value and follows from the next
+  run. While no backdrop is bound the channel is not interpolated: a snapshot
+  or freeze taken mid-run reports the run's target translation, which is what
+  a backdrop binding at that moment adopts.
 - A fully off-host aperture is not touchable, even when only its shadow overlaps.
 - Descendant accessibility is hidden during autonomous native motion and restored
   from aperture/host intersection at the endpoint.
@@ -276,6 +312,22 @@ See the [changelog](./CHANGELOG.md) for release details.
 
 - One worklet-to-native call per `ui.setFrame`, or per group batch.
 - Native timing and springs run without JS work between start and completion.
+- A run started inside a UI frame is anchored to that frame's Reanimated stamp
+  (`__frameTimestamp`) on both platforms, so it shares one epoch with a
+  `withTiming` begun in the same frame.
+- A host with no run in flight and no `setFrame` stream costs nothing per
+  frame: iOS keeps no display link, and Android posts its frame callback only
+  while a run animates. Static content (a list of cards, say) can be
+  decorated with a host at no per-frame cost, and hand off to an animated
+  host through the same path builder and shadow renderer.
+- Content driven by Reanimated inside the host (an `Animated.View` with a
+  `useAnimatedStyle`) can land a frame after the clip on iOS: Reanimated
+  applies mapper props in its own display-link pass, separate from the
+  worklet frame that computed them, while a native run is sampled by Core
+  Animation for the same vsync. A main-thread overrun widens that to a frame
+  either way. Anything that must stay locked to the aperture belongs on the
+  run itself: put it in a `SmoothClipBackdropView` and drive it through the
+  presentation's `backdrop` channel.
 - The shadow-disabled rendering path keeps no shadow drawing resources.
 - The fixed host is the maximum rendering viewport; consumers should size it to
   the region in which content and shadow may appear.

package/android/src/main/cpp/SmoothClipAndroid.h

@@ -26,6 +26,28 @@ struct JSmoothClipView : facebook::jni::JavaClass<JSmoothClipView> {
   void setAutonomousMotion(bool active) const;
 };
 
+// fbjni wrapper around com.smoothclipview.SmoothClipBackdropView: a view the
+// driver's backdrop channel translates on every delivery, in the same
+// Choreographer pass as the clip.
+struct JSmoothClipBackdropView
+    : facebook::jni::JavaClass<JSmoothClipBackdropView> {
+  static constexpr auto kJavaDescriptor =
+      "Lcom/smoothclipview/SmoothClipBackdropView;";
+
+  void applyBackdropPx(double translateXPx, double translateYPx) const;
+};
+
+// Binds a backdrop view to a driver on the UI thread. A view already bound
+// only updates its density. The view is delivered the driver's current
+// backdrop translation at once when the driver has a presentation.
+void registerBackdropViewAndroid(
+    uint64_t driverId,
+    facebook::jni::alias_ref<JSmoothClipBackdropView> view,
+    double density);
+void unregisterBackdropViewAndroid(
+    uint64_t driverId,
+    facebook::jni::alias_ref<JSmoothClipBackdropView> view);
+
 // Called from Kotlin (SmoothClipViewManager) on the UI thread when a Fabric
 // view mounts/unmounts. The registry retains a global ref for the view.
 void registerViewAndroid(

package/android/src/main/cpp/SmoothClipBindings.cpp

@@ -27,7 +27,7 @@ namespace smoothclip {
 namespace {
 
 constexpr double kMaxSafeJavaScriptInteger = 9007199254740991.0;
-constexpr size_t kPresentationStride = 23;
+constexpr size_t kPresentationStride = 25;
 constexpr size_t kSnapshotStride = kPresentationStride + 1;
 constexpr size_t kMotionEntryStride = kPresentationStride * 2 + 2;
 
@@ -155,7 +155,8 @@ bool presentationAt(
       Shadow{
           packet[12] == 1.0,
           packet[13], packet[14], packet[15], packet[16],
-          packet[17], packet[18], packet[19], packet[20]}, packet[21], packet[22]};
+          packet[17], packet[18], packet[19], packet[20]}, packet[21], packet[22],
+      packet[23], packet[24]};
   return finitePresentation(result);
 }
 
@@ -193,6 +194,8 @@ void appendPresentation(
   result.setValueAtIndex(runtime, offset++, presentation.shadow.spreadDistance);
   result.setValueAtIndex(runtime, offset++, presentation.rotation);
   result.setValueAtIndex(runtime, offset++, presentation.opacity);
+  result.setValueAtIndex(runtime, offset++, presentation.backdropTranslateX);
+  result.setValueAtIndex(runtime, offset++, presentation.backdropTranslateY);
 }
 
 Array presentationArray(Runtime &runtime, const Presentation &presentation) {
@@ -835,11 +838,15 @@ void nativeRegisterView(
     jdouble shadowSpreadDistance,
     jdouble rotation,
     jdouble opacity,
+    jdouble backdropTranslateX,
+    jdouble backdropTranslateY,
     jdouble density,
     jdouble widthPx,
     jdouble heightPx,
     jboolean lifecycleVisible) {
   if (driverId <= 0 || !std::isfinite(driverId) || !std::isfinite(x) ||
+      !std::isfinite(backdropTranslateX) ||
+      !std::isfinite(backdropTranslateY) ||
       !std::isfinite(y) || !std::isfinite(width) || !std::isfinite(height) ||
       !std::isfinite(topLeftRadius) || !std::isfinite(topRightRadius) ||
       !std::isfinite(bottomRightRadius) || !std::isfinite(bottomLeftRadius) ||
@@ -882,13 +889,36 @@ void nativeRegisterView(
       static_cast<uint64_t>(driverId),
       view,
       smoothclip::Presentation{
-          geometry, contentTranslateX, contentTranslateY, contentScale, shadow, rotation, opacity},
+          geometry, contentTranslateX, contentTranslateY, contentScale, shadow,
+          rotation, opacity, backdropTranslateX, backdropTranslateY},
       density,
       widthPx,
       heightPx,
       lifecycleVisible != 0);
 }
 
+void nativeRegisterBackdropView(
+    jni::alias_ref<jni::JObject>,
+    jdouble driverId,
+    jni::alias_ref<smoothclip::JSmoothClipBackdropView> view,
+    jdouble density) {
+  if (driverId <= 0 || !std::isfinite(driverId) || !std::isfinite(density) ||
+      density <= 0) {
+    return;
+  }
+  smoothclip::registerBackdropViewAndroid(
+      static_cast<uint64_t>(driverId), view, density);
+}
+
+void nativeUnregisterBackdropView(
+    jni::alias_ref<jni::JObject>,
+    jdouble driverId,
+    jni::alias_ref<smoothclip::JSmoothClipBackdropView> view) {
+  if (driverId <= 0 || !std::isfinite(driverId)) return;
+  smoothclip::unregisterBackdropViewAndroid(
+      static_cast<uint64_t>(driverId), view);
+}
+
 void nativeSetViewHostGeometry(
     jni::alias_ref<jni::JObject>,
     jdouble driverId,
@@ -952,6 +982,10 @@ JNIEXPORT jint JNICALL JNI_OnLoad(JavaVM *vm, void *) {
             makeNativeMethod(
                 "nativeSetViewHostGeometry", nativeSetViewHostGeometry),
             makeNativeMethod("nativeUnregisterView", nativeUnregisterView),
+            makeNativeMethod(
+                "nativeRegisterBackdropView", nativeRegisterBackdropView),
+            makeNativeMethod(
+                "nativeUnregisterBackdropView", nativeUnregisterBackdropView),
             makeNativeMethod("nativeDestroyDriver", nativeDestroyDriver),
             makeNativeMethod(
                 "nativeSetViewLifecycleVisibility",

package/android/src/main/cpp/SmoothClipRegistry.cpp

@@ -90,11 +90,20 @@ struct ViewEntry {
   ViewParticipation participation = ViewParticipation::Deferred;
 };
 
+// A backdrop view bound to the driver. It is translated by the presentation's
+// backdrop channel on every delivery and has no displayability of its own: the
+// clip host decides when a run may start.
+struct BackdropEntry {
+  global_ref<JSmoothClipBackdropView> view;
+  double density = 1;
+};
+
 struct DriverState {
   Presentation latest{{0, 0, 0, 0, 0}, 0, 0};
   bool hasLatest = false;
   Ownership ownership = Ownership::Interactive;
   std::vector<ViewEntry> views;
+  std::vector<BackdropEntry> backdrops;
   std::optional<ActiveAnimation> animation;
   // Set by destroyDriver while views are still registered (StrictMode effect
   // replay, hosts mounted in another subtree). The entry is erased when the
@@ -461,10 +470,28 @@ void deliverToView(const ViewEntry &entry, const Presentation &presentation) {
       shadowPx, presentation.rotation, presentation.opacity);
 }
 
+void deliverToBackdrop(
+    const BackdropEntry &entry,
+    const Presentation &presentation) {
+  const double x = presentation.backdropTranslateX * entry.density;
+  const double y = presentation.backdropTranslateY * entry.density;
+  if (!std::isfinite(x) || !std::isfinite(y)) return;
+  entry.view->applyBackdropPx(x, y);
+}
+
+void deliverToBackdrops(
+    const DriverState &state,
+    const Presentation &presentation) {
+  for (const BackdropEntry &entry : state.backdrops) {
+    deliverToBackdrop(entry, presentation);
+  }
+}
+
 void applyToViews(DriverState &state, const Presentation &presentation) {
   for (const auto &entry : state.views) {
     deliverToView(entry, presentation);
   }
+  deliverToBackdrops(state, presentation);
 }
 
 void setAutonomousMotion(DriverState &state, bool active) {
@@ -481,6 +508,7 @@ void applyAnimationFrameToViews(
       deliverToView(entry, presentation);
     }
   }
+  deliverToBackdrops(state, presentation);
 }
 
 void applyPresentation(DriverState &state, const Presentation &presentation) {
@@ -1667,7 +1695,7 @@ void destroyDriver(uint64_t driverId) {
   // refresh the staleness clock with motion no finger produced. (iOS clears
   // its per-view histories at the same point.)
   state.samples = VelocitySampleHistory{};
-  if (state.views.empty()) {
+  if (state.views.empty() && state.backdrops.empty()) {
     registry().erase(iterator);
   } else {
     // Views can outlive the hook briefly (StrictMode effect replay, hosts in
@@ -1795,6 +1823,61 @@ void JSmoothClipView::setAutonomousMotion(bool active) const {
   method(self(), active);
 }
 
+void JSmoothClipBackdropView::applyBackdropPx(
+    double translateXPx,
+    double translateYPx) const {
+  static const auto method =
+      javaClassStatic()->getMethod<void(jfloat, jfloat)>(
+          "setBackdropTranslationPx");
+  method(
+      self(),
+      static_cast<jfloat>(translateXPx),
+      static_cast<jfloat>(translateYPx));
+}
+
+void registerBackdropViewAndroid(
+    uint64_t driverId,
+    alias_ref<JSmoothClipBackdropView> view,
+    double density) {
+  if (!isOnMainThread()) return;
+  auto &state = registry()[driverId];
+  JNIEnv *env = facebook::jni::Environment::current();
+  for (auto &entry : state.backdrops) {
+    if (!env->IsSameObject(entry.view.get(), view.get())) continue;
+    entry.density = density;
+    if (state.hasLatest) {
+      deliverToBackdrop(entry, visiblePresentation(driverId, state));
+    }
+    return;
+  }
+  BackdropEntry entry{facebook::jni::make_global(view), density};
+  // A backdrop that binds mid-run adopts the driver's current value and
+  // follows from the next delivery; a pending run's start is what shows.
+  if (state.hasLatest) {
+    deliverToBackdrop(entry, visiblePresentation(driverId, state));
+  }
+  state.backdrops.push_back(std::move(entry));
+}
+
+void unregisterBackdropViewAndroid(
+    uint64_t driverId,
+    alias_ref<JSmoothClipBackdropView> view) {
+  auto iterator = registry().find(driverId);
+  if (iterator == registry().end()) return;
+  auto &state = iterator->second;
+  JNIEnv *env = facebook::jni::Environment::current();
+  for (auto entry = state.backdrops.begin(); entry != state.backdrops.end();) {
+    if (env->IsSameObject(entry->view.get(), view.get())) {
+      entry = state.backdrops.erase(entry);
+    } else {
+      ++entry;
+    }
+  }
+  if (state.destroyed && state.views.empty() && state.backdrops.empty()) {
+    registry().erase(iterator);
+  }
+}
+
 void registerViewAndroid(
     uint64_t driverId,
     alias_ref<JSmoothClipView> view,
@@ -1921,7 +2004,7 @@ void unregisterViewAndroid(
   if (removed && state.groupId != 0 && isOnMainThread()) {
     reconcileGroupReadiness(driverId);
   }
-  if (state.destroyed && state.views.empty()) {
+  if (state.destroyed && state.views.empty() && state.backdrops.empty()) {
     registry().erase(iterator);
   }
 }

package/android/src/main/java/com/smoothclipview/ClipGeometryNormalizer.kt

@@ -2,8 +2,11 @@ package com.smoothclipview
 
 import android.graphics.Path
 import android.view.View
+import kotlin.math.cos
 import kotlin.math.max
 import kotlin.math.min
+import kotlin.math.sin
+import kotlin.math.tan
 
 internal const val CLIP_CURVE_CIRCULAR = 0
 internal const val CLIP_CURVE_CONTINUOUS = 1
@@ -119,12 +122,40 @@ internal inline fun canonicalizeClipGeometryPx(
 }
 
 /**
- * Emits one fixed-topology rounded rectangle for both curve families.
- * Circular uses the standard quarter-circle cubic coefficient; continuous
- * keeps both control points at the rectangle corner (coefficient 1), yielding
- * zero endpoint curvature and a visibly smoother shoulder. "Continuous" is a
- * library-defined cross-platform curve, not a claim of pixel identity with
- * Apple's private continuous-corner implementation.
+ * Figma corner smoothing used by the continuous curve. 0.6 is the value Figma
+ * tuned against iOS continuous corners, and it is fixed so that every corner
+ * parameter below is a compile-time constant.
+ */
+private const val CONTINUOUS_SMOOTHING = 0.6f
+
+// Unit-radius Figma parameters at CONTINUOUS_SMOOTHING. They are linear in the
+// radius while the shoulder fits its budget, so the per-frame rebuild does no
+// trigonometry. Derivation, with arc = 90deg * (1 - s) and beta = 45deg * s:
+//   ARC_CHORD = sqrt(2) * sin(arc / 2)      axis distance covered by the arc
+//   C = tan(beta / 2) * cos(beta),  D = tan(beta / 2) * sin(beta)
+//   B = (1 + s - ARC_CHORD - C - D) / 3,    A = 2 * B
+//   ARC_HANDLE = 4/3 * tan(arc / 4)         cubic handle of the circular arc
+private const val CONTINUOUS_A = 0.5600525f
+private const val CONTINUOUS_B = 0.28002625f
+private const val CONTINUOUS_C = 0.21391174f
+private const val CONTINUOUS_D = 0.10899348f
+private const val CONTINUOUS_ARC_CHORD = 0.43701602f
+private const val CONTINUOUS_ARC_HANDLE = 0.21117925f
+private const val CONTINUOUS_COS_BETA = 0.8910065f
+private const val CONTINUOUS_SIN_BETA = 0.4539905f
+private const val QUARTER_PI = 0.7853982f
+private const val SQRT_2 = 1.4142135f
+
+/**
+ * Emits one rounded rectangle. Circular uses the standard quarter-circle
+ * cubic per corner. Continuous is the Figma smoothed corner at smoothing 0.6:
+ * a cubic shoulder that leaves the edge at 1.6 * radius, the real radius-R
+ * circle through the apex, and a mirrored shoulder. The apex therefore sits
+ * where a circular corner's does; only the shoulders are longer and eased. It
+ * is the same family as Apple's continuous corner, not pixel-identical to it.
+ *
+ * This runs every animation frame: it allocates nothing, and a continuous
+ * corner is always three cubics (the arc included), whatever its radius.
  */
 internal fun appendRoundedRectPath(
     path: Path,
@@ -138,12 +169,57 @@ internal fun appendRoundedRectPath(
     bottomLeftRadius: Float,
     curveCode: Int,
 ) {
-    val coefficient = if (curveCode == CLIP_CURVE_CONTINUOUS) {
-        1f
-    } else {
-        0.5522848f
+    if (curveCode == CLIP_CURVE_CONTINUOUS) {
+        val width = right - left
+        val height = bottom - top
+        appendContinuousCorner(
+            path, true, right, top, 1f, 0f, 0f, 1f, topRightRadius,
+            continuousBudget(
+                topRightRadius, topLeftRadius, width, bottomRightRadius, height,
+            ),
+        )
+        appendContinuousCorner(
+            path, false, right, bottom, 0f, 1f, -1f, 0f, bottomRightRadius,
+            continuousBudget(
+                bottomRightRadius, topRightRadius, height, bottomLeftRadius, width,
+            ),
+        )
+        appendContinuousCorner(
+            path, false, left, bottom, -1f, 0f, 0f, -1f, bottomLeftRadius,
+            continuousBudget(
+                bottomLeftRadius, bottomRightRadius, width, topLeftRadius, height,
+            ),
+        )
+        appendContinuousCorner(
+            path, false, left, top, 0f, -1f, 1f, 0f, topLeftRadius,
+            continuousBudget(
+                topLeftRadius, bottomLeftRadius, height, topRightRadius, width,
+            ),
+        )
+        path.close()
+        return
     }
 
+    if (topLeftRadius == topRightRadius && topLeftRadius == bottomRightRadius &&
+        topLeftRadius == bottomLeftRadius
+    ) {
+        // A uniform circular corner stays an rrect-tagged path: the renderer
+        // keeps its analytic clip and blur fast paths for it, which the cubic
+        // outline below, though the same shape, would lose.
+        path.addRoundRect(
+            left,
+            top,
+            right,
+            bottom,
+            topLeftRadius,
+            topLeftRadius,
+            Path.Direction.CW,
+        )
+        return
+    }
+
+    val coefficient = 0.5522848f
+
     path.moveTo(left + topLeftRadius, top)
     path.lineTo(right - topRightRadius, top)
     path.cubicTo(
@@ -184,6 +260,129 @@ internal fun appendRoundedRectPath(
     path.close()
 }
 
+/**
+ * Edge length one corner's shoulder may use. Each side is shared with the
+ * neighbouring corner in proportion to the radii, so two shoulders never
+ * overlap. Uniform radii give min(width, height) / 2, Figma's own budget.
+ */
+private fun continuousBudget(
+    radius: Float,
+    incomingNeighbourRadius: Float,
+    incomingSide: Float,
+    outgoingNeighbourRadius: Float,
+    outgoingSide: Float,
+): Float {
+    val incoming = if (incomingNeighbourRadius > 0f) {
+        incomingSide * radius / (radius + incomingNeighbourRadius)
+    } else {
+        incomingSide
+    }
+    val outgoing = if (outgoingNeighbourRadius > 0f) {
+        outgoingSide * radius / (radius + outgoingNeighbourRadius)
+    } else {
+        outgoingSide
+    }
+    return min(incoming, outgoing)
+}
+
+/**
+ * Appends one continuous corner, travelling clockwise. (ux, uy) is the unit
+ * direction of the edge running into the corner point and (vx, vy) of the edge
+ * leaving it, so one body serves all four orientations.
+ */
+private fun appendContinuousCorner(
+    path: Path,
+    isFirst: Boolean,
+    cornerX: Float,
+    cornerY: Float,
+    ux: Float,
+    uy: Float,
+    vx: Float,
+    vy: Float,
+    radius: Float,
+    budget: Float,
+) {
+    if (radius <= 0f) {
+        // A plain vertex: an all-square clip stays a rectangle the renderer
+        // can recognise, instead of a path of degenerate curves.
+        if (isFirst) path.moveTo(cornerX, cornerY) else path.lineTo(cornerX, cornerY)
+        return
+    }
+
+    val shoulder: Float
+    val a: Float
+    val b: Float
+    val c: Float
+    val d: Float
+    val arcChord: Float
+    val arcHandle: Float
+    val cosBeta: Float
+    val sinBeta: Float
+    if ((1f + CONTINUOUS_SMOOTHING) * radius <= budget) {
+        shoulder = (1f + CONTINUOUS_SMOOTHING) * radius
+        a = CONTINUOUS_A * radius
+        b = CONTINUOUS_B * radius
+        c = CONTINUOUS_C * radius
+        d = CONTINUOUS_D * radius
+        arcChord = CONTINUOUS_ARC_CHORD * radius
+        arcHandle = CONTINUOUS_ARC_HANDLE * radius
+        cosBeta = CONTINUOUS_COS_BETA
+        sinBeta = CONTINUOUS_SIN_BETA
+    } else {
+        // The shoulder does not fit (near-pill shapes). Figma reduces the
+        // smoothing until it does; at zero this is an exact circular corner.
+        shoulder = max(budget, radius)
+        val smoothing = (shoulder / radius - 1f)
+            .coerceIn(0f, CONTINUOUS_SMOOTHING)
+        val beta = QUARTER_PI * smoothing
+        val halfArc = QUARTER_PI * (1f - smoothing)
+        val tanHalfBeta = tan(beta / 2f)
+        cosBeta = cos(beta)
+        sinBeta = sin(beta)
+        c = radius * tanHalfBeta * cosBeta
+        d = radius * tanHalfBeta * sinBeta
+        arcChord = radius * SQRT_2 * sin(halfArc)
+        arcHandle = radius * (4f / 3f) * tan(halfArc / 2f)
+        b = (shoulder - arcChord - c - d) / 3f
+        a = 2f * b
+    }
+
+    val startX = cornerX - ux * shoulder
+    val startY = cornerY - uy * shoulder
+    if (isFirst) path.moveTo(startX, startY) else path.lineTo(startX, startY)
+
+    val arcStartX = startX + ux * (a + b + c) + vx * d
+    val arcStartY = startY + uy * (a + b + c) + vy * d
+    path.cubicTo(
+        startX + ux * a,
+        startY + uy * a,
+        startX + ux * (a + b),
+        startY + uy * (a + b),
+        arcStartX,
+        arcStartY,
+    )
+
+    val arcEndX = arcStartX + (ux + vx) * arcChord
+    val arcEndY = arcStartY + (uy + vy) * arcChord
+    path.cubicTo(
+        arcStartX + (ux * cosBeta + vx * sinBeta) * arcHandle,
+        arcStartY + (uy * cosBeta + vy * sinBeta) * arcHandle,
+        arcEndX - (ux * sinBeta + vx * cosBeta) * arcHandle,
+        arcEndY - (uy * sinBeta + vy * cosBeta) * arcHandle,
+        arcEndX,
+        arcEndY,
+    )
+
+    path.cubicTo(
+        arcEndX + ux * d + vx * c,
+        arcEndY + uy * d + vy * c,
+        arcEndX + ux * d + vx * (b + c),
+        arcEndY + uy * d + vy * (b + c),
+        cornerX + vx * shoulder,
+        cornerY + vy * shoulder,
+    )
+}
+
 /**
  * Hit-tests the actual rendered path. Path has no float `contains` API, so we
  * flatten that same instance to sub-pixel line segments for ACTION_DOWN. This