diff --git a/README.md b/README.md
index 9606d1d..67d0336 100644
--- a/README.md
+++ b/README.md
@@ -7,6 +7,10 @@
 
 # react-native-canvas-kit
 
+<p align="center">
+  <video src="https://github.com/adithyavis/react-native-canvas-kit/raw/main/assets/landscape.mp4" width="100%" controls muted autoplay loop></video>
+</p>
+
 A **batteries-included 2D canvas kit for React Native**, built on top of
 [React Native Skia](https://shopify.github.io/react-native-skia/). Canvas Kit
 layers a **scene graph** over Skia and ships with pre-built shapes, gestures and
diff --git a/assets/landscape.mp4 b/assets/landscape.mp4
new file mode 100644
index 0000000..7adb1f0
Binary files /dev/null and b/assets/landscape.mp4 differ
diff --git a/docs/docs/getting-started/web.md b/docs/docs/getting-started/web.md
new file mode 100644
index 0000000..127dc47
--- /dev/null
+++ b/docs/docs/getting-started/web.md
@@ -0,0 +1,59 @@
+---
+sidebar_position: 3
+title: Web
+---
+
+# Web
+
+Canvas Kit runs in the browser through [React Native Skia](https://shopify.github.io/react-native-skia/docs/getting-started/web),
+which ships Skia as a WebAssembly (WASM) build called **CanvasKit**.
+
+## Install the web dependency
+
+CanvasKit is delivered by the `canvaskit-wasm` package. Add it alongside the peer
+dependencies from [Installation](./installation.md), then run Skia's web setup
+script once:
+
+```bash
+npx expo install @shopify/react-native-skia
+npx setup-skia-web
+```
+
+Re-run `setup-skia-web` after every upgrade of `@shopify/react-native-skia` so the
+copied WASM binary matches your installed version.
+
+For the full setup (bundler configuration, deferred registration, and other
+variants), follow the
+[React Native Skia web guide](https://shopify.github.io/react-native-skia/docs/getting-started/web/).
+The rest of this page covers the load-order details that matter specifically for
+Canvas Kit.
+
+## Load order
+
+Web setup, including loading CanvasKit before your app runs, is handled entirely
+by React Native Skia. Follow their
+[web support guide](https://shopify.github.io/react-native-skia/docs/getting-started/web/)
+for `LoadSkiaWeb` / `WithSkiaWeb` and the matching bundler configuration.
+
+One Canvas Kit-specific caveat: its shape components touch Skia at import time,
+while the module tree is evaluated. You must therefore use a load-first pattern,
+either a `.web` entry that loads CanvasKit before requiring your app, or Skia's
+`WithSkiaWeb` component that lazily imports the drawing code. Deferring the load
+to a `useEffect` is too late and will throw.
+
+## Caveats
+
+- **WebGL contexts are limited.** Browsers cap live WebGL contexts (around 16 per
+  page), and every mounted `Stage` holds one. Keep the number of simultaneous
+  stages small on web.
+- **A few Skia features are unavailable on web**, including
+  `PathEffectFactory.MakeSum` / `MakeCompose`, `PathFactory.MakeFromText`, and
+  `ShaderFilter`. Canvas Kit does not rely on these for its core shapes, but
+  custom brushes or effects that reach into Skia directly may hit them.
+- **Reanimated and Gesture Handler** power dragging and gestures; make sure your
+  web bundler is configured for Reanimated as described in its
+  [web docs](https://docs.swmansion.com/react-native-reanimated/docs/guides/web-support/).
+
+For the full, authoritative reference (webpack config, deferred registration
+variants, and more), see the
+[React Native Skia web guide](https://shopify.github.io/react-native-skia/docs/getting-started/web).
diff --git a/docs/docs/intro.md b/docs/docs/intro.md
index 55ae819..e94853c 100644
--- a/docs/docs/intro.md
+++ b/docs/docs/intro.md
@@ -6,13 +6,16 @@ title: Introduction
 
 # React Native Canvas Kit
 
+<video src="/react-native-canvas-kit/landscape.mp4" autoPlay loop muted playsInline style={{ width: '100%', aspectRatio: '16 / 9', borderRadius: 8 }} />
+
 **React Native Canvas Kit** is a batteries-included 2D canvas kit built on
 top of [React Native Skia](https://shopify.github.io/react-native-skia/). Canvas Kit layers a
 **scene graph** on top of Skia and comes with pre-built shapes, support for gestures and
 interactivity, transformers, and brushes, so that you don't have to compose a canvas experience
 from scratch.
 
-React Native Canvas Kit is heavily inspired by [Konva](https://https://konvajs.org/).
+React Native Canvas Kit is heavily inspired by [Konva](https://konvajs.org/); see
+[Thanks to Konva](./thanks-to-konva.md) for what the two share.
 
 ## The scene graph
 
diff --git a/docs/docs/thanks-to-konva.md b/docs/docs/thanks-to-konva.md
new file mode 100644
index 0000000..d7a989d
--- /dev/null
+++ b/docs/docs/thanks-to-konva.md
@@ -0,0 +1,43 @@
+---
+sidebar_position: 9
+title: Thanks to Konva
+---
+
+# Thanks to Konva
+
+I built React Native Canvas Kit because I kept wishing [Konva](https://konvajs.org/)
+existed for React Native. Konva is a fantastic 2D scene graph for the web canvas,
+and years of using it shaped how I think a canvas library should feel.
+
+So before anything else, thank you to [Anton Lavrenov](https://github.com/lavrton) and the
+Konva community. This library would not exist without that groundwork.
+
+## What I kept similar
+
+I deliberately kept Canvas Kit close to Konva so that anyone who already knows
+Konva feels at home right away.
+
+- **The scene graph.** The hierarchy is the same idea:
+  `Stage → Layer → Group → Shape`. Nodes nest, transforms cascade down the tree,
+  and each node maps onto a render node underneath.
+- **Prop names.** Shapes take the props you would expect from Konva:
+  `x`, `y`, `width`, `height`, `radius`, `fill`, `stroke`, `strokeWidth`,
+  `scaleX`, `scaleY`, `rotation`, and so on. If you have written Konva, most of
+  your muscle memory carries over.
+- **Interactivity.** Events bubble through ancestors with hierarchy-aware hit
+  testing, `draggable` makes a node follow the pointer, and a `Transformer` you
+  point at a node draws resize and rotate handles. These mirror Konva's model
+  closely, including the `cancelBubble` escape hatch on events.
+
+## What is different
+
+The concepts are shared, but the engine is not. Canvas Kit renders with
+[React Native Skia](https://shopify.github.io/react-native-skia/) rather than the
+web `<canvas>`, and it drives dragging and multi-touch gestures on the UI thread
+with [Reanimated](https://docs.swmansion.com/react-native-reanimated/) and
+[Gesture Handler](https://docs.swmansion.com/react-native-gesture-handler/). That
+lets interactions stay smooth on a phone, but it also means some things diverge
+from Konva where React Native and Skia call for it.
+
+If you are coming from Konva: welcome. I hope this feels familiar. And thank you
+again to the Konva project for the inspiration.
diff --git a/docs/static/landscape.mp4 b/docs/static/landscape.mp4
new file mode 100644
index 0000000..7adb1f0
Binary files /dev/null and b/docs/static/landscape.mp4 differ
diff --git a/docs/static/llms.txt b/docs/static/llms.txt
new file mode 100644
index 0000000..8dd0106
--- /dev/null
+++ b/docs/static/llms.txt
@@ -0,0 +1,65 @@
+# React Native Canvas Kit
+
+> React Native Canvas Kit is a batteries-included 2D canvas library for React Native. It layers a Konva-style scene graph (Stage, Layer, Group, Shape) on top of React Native Skia and ships pre-built shapes, hierarchy-aware events, draggable nodes, multi-touch gestures, an interactive Transformer, and a set of brushes. Gestures and dragging run on the UI thread via Reanimated and Gesture Handler. It requires React Native's New Architecture; the 0.x line targets Reanimated 3 / legacy architecture.
+
+## Keywords
+
+react-native-canvas-kit, react-native-canvas, canvas for react native, react-native-konva, konva for react native, konva react native, expo-canvas, canvas for expo, react-native-skia canvas, skia scene graph, 2D canvas library react native, the only canvas you would need on react native, react native drawing library, react native shapes, react native transformer, react native brushes, react native gestures canvas, interactive canvas react native, HTML5 canvas alternative react native.
+
+## Getting Started
+
+- [Introduction](https://adithyavis.github.io/react-native-canvas-kit/intro): What Canvas Kit is, the scene graph model, and what the library provides.
+- [Installation](https://adithyavis.github.io/react-native-canvas-kit/getting-started/installation): Install the library and its Skia, Reanimated, and Gesture Handler peer dependencies, and configure Babel.
+- [Quick Start](https://adithyavis.github.io/react-native-canvas-kit/getting-started/quick-start): Build a first interactive canvas with shapes, dragging, and a transformer.
+- [Web](https://adithyavis.github.io/react-native-canvas-kit/getting-started/web): Run Canvas Kit in the browser via Skia's CanvasKit WASM, including the load-order rule and a web-only entry point.
+
+## Core Concepts
+
+- [Stage](https://adithyavis.github.io/react-native-canvas-kit/core-concepts/stage): The root node that owns the native Skia drawing surface.
+- [Layer](https://adithyavis.github.io/react-native-canvas-kit/core-concepts/layer): A logical grouping with its own transform inside a Stage.
+- [Group](https://adithyavis.github.io/react-native-canvas-kit/core-concepts/group): A transformable container for shapes and nested groups.
+- [Nodes and transforms](https://adithyavis.github.io/react-native-canvas-kit/core-concepts/nodes-and-transforms): How position, scale, and rotation cascade down the node tree.
+
+## Shapes
+
+- [Overview](https://adithyavis.github.io/react-native-canvas-kit/shapes/overview): The shared transform and styling props common to every shape.
+- [Rect](https://adithyavis.github.io/react-native-canvas-kit/shapes/rect): Rectangles with optional corner radius.
+- [Circle](https://adithyavis.github.io/react-native-canvas-kit/shapes/circle): Circles by center and radius.
+- [Ellipse](https://adithyavis.github.io/react-native-canvas-kit/shapes/ellipse): Ellipses with independent x and y radii.
+- [Line](https://adithyavis.github.io/react-native-canvas-kit/shapes/line): Polylines and open or closed point paths.
+- [Regular Polygon](https://adithyavis.github.io/react-native-canvas-kit/shapes/regular-polygon): Equilateral polygons by side count and radius.
+- [Star](https://adithyavis.github.io/react-native-canvas-kit/shapes/star): Stars with inner and outer radii.
+- [Text](https://adithyavis.github.io/react-native-canvas-kit/shapes/text): Text drawing and styling.
+- [Image](https://adithyavis.github.io/react-native-canvas-kit/shapes/image): Rendering images onto the canvas.
+
+## Styling
+
+- [Fill and stroke](https://adithyavis.github.io/react-native-canvas-kit/styling/fill-and-stroke): Fill colors, stroke color, and stroke width.
+- [Gradients](https://adithyavis.github.io/react-native-canvas-kit/styling/gradients): Linear and radial gradient fills.
+- [Shadows and blend](https://adithyavis.github.io/react-native-canvas-kit/styling/shadows-and-blend): Drop shadows and blend modes.
+
+## Interactivity
+
+- [Events](https://adithyavis.github.io/react-native-canvas-kit/interactivity/events): Tap and press events with hierarchy-aware hit testing and ancestor bubbling.
+- [Drag and drop](https://adithyavis.github.io/react-native-canvas-kit/interactivity/drag-and-drop): Making nodes draggable and handling drag lifecycle events.
+- [Gestures](https://adithyavis.github.io/react-native-canvas-kit/interactivity/gestures): UI-thread pinch-to-scale and rotate multi-touch gestures.
+- [Transformer](https://adithyavis.github.io/react-native-canvas-kit/interactivity/transformer): An attachable selection box with resize and rotate handles.
+- [Bounds and snapping](https://adithyavis.github.io/react-native-canvas-kit/interactivity/bounds-and-snapping): Node bounds and snapping during transforms.
+
+## Brushes
+
+- [Overview](https://adithyavis.github.io/react-native-canvas-kit/brushes/overview): The BrushLayer and UI-thread stroke capture.
+- [Brush types](https://adithyavis.github.io/react-native-canvas-kit/brushes/brush-types): Ready-made brushes (pen, pencil, marker, highlighter, tape, eraser).
+- [Custom brushes](https://adithyavis.github.io/react-native-canvas-kit/brushes/custom-brushes): Building your own brushes.
+
+## Portal
+
+- [Overview](https://adithyavis.github.io/react-native-canvas-kit/portal/overview): Rendering nodes into a different part of the scene graph.
+
+## More
+
+- [Thanks to Konva](https://adithyavis.github.io/react-native-canvas-kit/thanks-to-konva): The Konva inspiration behind the API, and what is kept similar or different.
+
+## Source
+
+- [GitHub repository](https://github.com/adithyavis/react-native-canvas-kit): Source, issues, and releases for React Native Canvas Kit.
diff --git a/example/app/_layout.tsx b/example/app/_layout.tsx
index e219700..c9a7665 100644
--- a/example/app/_layout.tsx
+++ b/example/app/_layout.tsx
@@ -4,14 +4,51 @@ import {
   ReanimatedLogLevel,
 } from 'react-native-reanimated';
 import { Drawer } from 'expo-router/drawer';
-import { StyleSheet } from 'react-native';
+import {
+  DrawerContentScrollView,
+  DrawerItem,
+  type DrawerContentComponentProps,
+} from '@react-navigation/drawer';
+import { StyleSheet, View } from 'react-native';
 
 configureReanimatedLogger({ level: ReanimatedLogLevel.warn, strict: false });
 
+const DIVIDER_AFTER = 'portal';
+
+function DrawerContent(props: DrawerContentComponentProps) {
+  const { state, descriptors, navigation } = props;
+  return (
+    <DrawerContentScrollView {...props}>
+      {state.routes.map((route, index) => {
+        const options = descriptors[route.key]?.options ?? {};
+        const label =
+          typeof options.drawerLabel === 'string'
+            ? options.drawerLabel
+            : (options.title ?? route.name);
+        return (
+          <View key={route.key}>
+            <DrawerItem
+              label={label}
+              focused={index === state.index}
+              onPress={() => navigation.navigate(route.name)}
+            />
+            {route.name === DIVIDER_AFTER ? (
+              <View style={styles.divider} />
+            ) : null}
+          </View>
+        );
+      })}
+    </DrawerContentScrollView>
+  );
+}
+
 export default function RootLayout() {
   return (
     <GestureHandlerRootView style={styles.flex1}>
-      <Drawer screenOptions={{ headerShown: false, swipeEnabled: false }}>
+      <Drawer
+        drawerContent={(props) => <DrawerContent {...props} />}
+        screenOptions={{ headerShown: false, swipeEnabled: false }}
+      >
         <Drawer.Screen
           name="index"
           options={{ drawerLabel: 'Shapes', title: 'Shapes' }}
@@ -20,6 +57,34 @@ export default function RootLayout() {
           name="brushes"
           options={{ drawerLabel: 'Brushes', title: 'Brushes' }}
         />
+        <Drawer.Screen
+          name="portal"
+          options={{ drawerLabel: 'Portal', title: 'Portal' }}
+        />
+
+        <Drawer.Screen
+          name="canva"
+          options={{ drawerLabel: 'Canva', title: 'Canva' }}
+        />
+        <Drawer.Screen
+          name="instagram-crop"
+          options={{ drawerLabel: 'Instagram Crop', title: 'Instagram Crop' }}
+        />
+        <Drawer.Screen
+          name="docusign"
+          options={{ drawerLabel: 'DocuSign', title: 'DocuSign' }}
+        />
+        <Drawer.Screen
+          name="gpay-scratch-card"
+          options={{
+            drawerLabel: 'GPay Scratch Card',
+            title: 'GPay Scratch Card',
+          }}
+        />
+        <Drawer.Screen
+          name="snapseed"
+          options={{ drawerLabel: 'Snapseed', title: 'Snapseed' }}
+        />
       </Drawer>
     </GestureHandlerRootView>
   );
@@ -27,4 +92,10 @@ export default function RootLayout() {
 
 const styles = StyleSheet.create({
   flex1: { flex: 1 },
+  divider: {
+    height: 1,
+    backgroundColor: '#00000022',
+    marginVertical: 8,
+    marginHorizontal: 16,
+  },
 });
diff --git a/example/app/brushes.tsx b/example/app/brushes.tsx
index 7f10cd1..1c4e6c5 100644
--- a/example/app/brushes.tsx
+++ b/example/app/brushes.tsx
@@ -1,4 +1,4 @@
-import { useRef, useState } from 'react';
+import { useMemo, useRef, useState } from 'react';
 import {
   Pressable,
   StyleSheet,
@@ -6,21 +6,69 @@ import {
   View,
   useWindowDimensions,
 } from 'react-native';
+import {
+  Canvas,
+  Fill,
+  Points,
+  vec,
+  type SkPoint,
+} from '@shopify/react-native-skia';
 import { Stage, BrushLayer, BRUSH_PATHS } from 'react-native-canvas-kit';
 import { DrawerButton } from '../src/DrawerButton';
+import { useTouchTracker, TouchRings } from '../src/TouchOverlay';
 import { TOOLS, type DrawnStroke, type Tool } from '../src/constants';
 
+const DOT_SPACING = 24;
+const DOT_SIZE = 2.5;
+const BG_COLOR = '#F7F6F3';
+const DOT_COLOR = 'rgba(0,0,0,0.13)';
+
+function DotGrid({ width, height }: { width: number; height: number }) {
+  const dots = useMemo<SkPoint[]>(() => {
+    const points: SkPoint[] = [];
+    for (let x = DOT_SPACING; x < width; x += DOT_SPACING) {
+      for (let y = DOT_SPACING; y < height; y += DOT_SPACING) {
+        points.push(vec(x, y));
+      }
+    }
+    return points;
+  }, [width, height]);
+
+  return (
+    <View style={StyleSheet.absoluteFill} pointerEvents="none">
+      <Canvas style={styles.flex1}>
+        <Fill color={BG_COLOR} />
+        <Points
+          points={dots}
+          mode="points"
+          color={DOT_COLOR}
+          style="stroke"
+          strokeWidth={DOT_SIZE}
+          strokeCap="round"
+        />
+      </Canvas>
+    </View>
+  );
+}
+
 export default function BrushesScreen() {
   const { width, height } = useWindowDimensions();
   const [tool, setTool] = useState<Tool>(TOOLS[0].tool);
   const [strokes, setStrokes] = useState<DrawnStroke[]>([]);
   const strokeCounter = useRef(0);
+  const { gesture: touchGesture, touches } = useTouchTracker();
 
   const toggleTool = (next: NonNullable<Tool>) => setTool(next);
 
   return (
     <View style={styles.root}>
-      <Stage width={width} height={height} style={styles.stage}>
+      <DotGrid width={width} height={height} />
+      <Stage
+        width={width}
+        height={height}
+        style={styles.stage}
+        simultaneousGesture={touchGesture}
+      >
         <BrushLayer
           tool={tool}
           onStrokeEnd={({ points, tool: usedTool }) =>
@@ -41,6 +89,8 @@ export default function BrushesScreen() {
         </BrushLayer>
       </Stage>
 
+      <TouchRings touches={touches} />
+
       <View style={styles.toolbar} pointerEvents="box-none">
         {TOOLS.map(({ tool: t, icon }) => (
           <Pressable
@@ -64,7 +114,8 @@ export default function BrushesScreen() {
 
 const styles = StyleSheet.create({
   root: { flex: 1 },
-  stage: { backgroundColor: '#f1d1ff' },
+  flex1: { flex: 1 },
+  stage: { backgroundColor: 'transparent' },
   toolbar: {
     position: 'absolute',
     bottom: 40,
diff --git a/example/app/canva.tsx b/example/app/canva.tsx
new file mode 100644
index 0000000..6b64ca0
--- /dev/null
+++ b/example/app/canva.tsx
@@ -0,0 +1,199 @@
+import { useMemo, useState, type Dispatch, type SetStateAction } from 'react';
+import { StyleSheet, View } from 'react-native';
+import { Asset } from 'expo-asset';
+import {
+  Stage,
+  Layer,
+  Image,
+  Text,
+  Transformer,
+  useFont,
+  type EventObject,
+  type TransformEvent,
+  type TransformResult,
+} from 'react-native-canvas-kit';
+import { CanvaChrome } from '../src/CanvaChrome';
+import { useTouchTracker, TouchRings } from '../src/TouchOverlay';
+import { CROP_PHOTOS } from '../src/cropPhotos';
+import { FONT_URL, sel, type NodeTransform } from '../src/constants';
+
+const CANVA_PURPLE = '#8B3DFF';
+const TITLE_ID = 'title';
+const TITLE_TEXT = 'Canva';
+
+const QUADRANTS = [
+  { id: 'photo-top-left', src: CROP_PHOTOS[0]!.src, column: 0, row: 0 },
+  { id: 'photo-top-right', src: CROP_PHOTOS[1]!.src, column: 1, row: 0 },
+  { id: 'photo-bottom-left', src: CROP_PHOTOS[2]!.src, column: 0, row: 1 },
+  { id: 'photo-bottom-right', src: CROP_PHOTOS[3]!.src, column: 1, row: 1 },
+];
+
+export default function CanvaScreen() {
+  const [selected, setSelected] = useState<string | null>(null);
+
+  return (
+    <CanvaChrome
+      hasSelection={selected !== null}
+      onConfirmSelection={() => setSelected(null)}
+    >
+      {({ width, height }) => (
+        <CanvaBoard
+          key={`${Math.round(width)}x${Math.round(height)}`}
+          width={width}
+          height={height}
+          selected={selected}
+          setSelected={setSelected}
+        />
+      )}
+    </CanvaChrome>
+  );
+}
+
+interface CanvaBoardProps {
+  width: number;
+  height: number;
+  selected: string | null;
+  setSelected: Dispatch<SetStateAction<string | null>>;
+}
+
+function CanvaBoard({ width, height, selected, setSelected }: CanvaBoardProps) {
+  const quadrantWidth = width / 2;
+  const quadrantHeight = height / 2;
+  const font = useFont(FONT_URL, Math.round(width * 0.2));
+  const { gesture: touchGesture, touches } = useTouchTracker();
+
+  const [transforms, setTransforms] = useState<Record<string, NodeTransform>>(
+    () => {
+      const initial: Record<string, NodeTransform> = {};
+      for (const quadrant of QUADRANTS) {
+        initial[sel(quadrant.id)] = {
+          x: quadrant.column * quadrantWidth,
+          y: quadrant.row * quadrantHeight,
+          scaleX: 1,
+          scaleY: 1,
+          rotation: 0,
+        };
+      }
+      initial[sel(TITLE_ID)] = {
+        x: width / 2,
+        y: height / 2,
+        scaleX: 1,
+        scaleY: 1,
+        rotation: 0,
+      };
+      return initial;
+    }
+  );
+
+  const commit = (selector: string, result: TransformResult) =>
+    setTransforms((prev) => ({
+      ...prev,
+      [selector]: {
+        x: result.x,
+        y: result.y,
+        scaleX: result.scaleX,
+        scaleY: result.scaleY,
+        rotation: result.rotation,
+      },
+    }));
+
+  const titleOffset = useMemo(() => {
+    if (!font) return null;
+    const glyphWidths = font.getGlyphWidths(font.getGlyphIDs(TITLE_TEXT));
+    const textWidth = glyphWidths.reduce((sum, value) => sum + value, 0);
+    const metrics = font.getMetrics();
+    const textHeight = metrics.descent - metrics.ascent;
+    return { x: textWidth / 2, y: textHeight / 2 };
+  }, [font]);
+
+  const title = transforms[sel(TITLE_ID)]!;
+
+  return (
+    <View style={styles.board}>
+      <Stage width={width} height={height} simultaneousGesture={touchGesture}>
+        <Layer
+          onTap={() => setSelected(null)}
+          width={width}
+          height={height}
+          gestureEnabled
+        >
+          {QUADRANTS.map((quadrant) => {
+            const t = transforms[sel(quadrant.id)]!;
+            return (
+              <Image
+                key={quadrant.id}
+                id={quadrant.id}
+                src={Asset.fromModule(quadrant.src).uri}
+                x={t.x}
+                y={t.y}
+                scaleX={t.scaleX}
+                scaleY={t.scaleY}
+                rotation={t.rotation}
+                width={quadrantWidth}
+                height={quadrantHeight}
+                fit="cover"
+                draggable
+                scalable
+                rotatable
+                onTap={(e) => {
+                  setSelected(sel(quadrant.id));
+                  e.cancelBubble = true;
+                }}
+                onTransformEnd={(e: EventObject) =>
+                  commit(sel(quadrant.id), e.evt as TransformResult)
+                }
+              />
+            );
+          })}
+
+          {font && titleOffset && (
+            <Text
+              id={TITLE_ID}
+              text={TITLE_TEXT}
+              font={font}
+              fill="#ffffff"
+              stroke={CANVA_PURPLE}
+              strokeWidth={8}
+              x={title.x}
+              y={title.y}
+              offsetX={titleOffset.x}
+              offsetY={titleOffset.y}
+              scaleX={title.scaleX}
+              scaleY={title.scaleY}
+              rotation={title.rotation}
+              draggable
+              scalable
+              rotatable
+              onTap={(e) => {
+                setSelected(sel(TITLE_ID));
+                e.cancelBubble = true;
+              }}
+              onTransformEnd={(e: EventObject) =>
+                commit(sel(TITLE_ID), e.evt as TransformResult)
+              }
+            />
+          )}
+
+          <Transformer
+            node={selected}
+            borderStroke={CANVA_PURPLE}
+            borderStrokeWidth={2}
+            anchorStroke={CANVA_PURPLE}
+            anchorStrokeWidth={1.5}
+            anchorFill="#ffffff"
+            anchorSize={14}
+            rotationSnaps={[0, 45, 90, 135, 180, 225, 270, 315]}
+            onTransformEnd={(e: TransformEvent) => {
+              if (selected) commit(selected, e);
+            }}
+          />
+        </Layer>
+      </Stage>
+      <TouchRings touches={touches} />
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  board: { flex: 1 },
+});
diff --git a/example/app/docusign.tsx b/example/app/docusign.tsx
new file mode 100644
index 0000000..a7b868e
--- /dev/null
+++ b/example/app/docusign.tsx
@@ -0,0 +1,250 @@
+import { useRef, useState } from 'react';
+import {
+  type LayoutChangeEvent,
+  Pressable,
+  StyleSheet,
+  Text,
+  View,
+} from 'react-native';
+import { Stage, BrushLayer, Pen } from 'react-native-canvas-kit';
+import { DrawerButton } from '../src/DrawerButton';
+import { useTouchTracker, TouchRings } from '../src/TouchOverlay';
+
+interface SignatureStroke {
+  id: string;
+  points: number[];
+  color: string;
+}
+
+const INK_COLORS: string[] = ['#1b1b1f', '#2f6bff', '#e5352b'];
+const DEFAULT_INK = '#1b1b1f';
+
+export default function DocuSignScreen() {
+  const [strokes, setStrokes] = useState<SignatureStroke[]>([]);
+  const [color, setColor] = useState<string>(DEFAULT_INK);
+  const [pad, setPad] = useState({ width: 0, height: 0 });
+  const strokeCounter = useRef(0);
+  const colorRef = useRef(color);
+  colorRef.current = color;
+  const { gesture: touchGesture, touches } = useTouchTracker();
+
+  const onPadLayout = (e: LayoutChangeEvent) => {
+    const { width, height } = e.nativeEvent.layout;
+    setPad({ width, height });
+  };
+
+  const clear = () => setStrokes([]);
+  const isEmpty = strokes.length === 0;
+
+  return (
+    <View style={styles.root}>
+      <View style={styles.header}>
+        <View style={styles.headerSpacer} />
+        <View style={styles.tabs}>
+          <View style={[styles.tab, styles.tabActive]}>
+            <Text style={styles.tabTextActive}>Draw</Text>
+          </View>
+          <View style={styles.tab}>
+            <Text style={styles.tabText}>Use Font</Text>
+          </View>
+          <View style={styles.tab}>
+            <Text style={styles.tabText}>Take Photo</Text>
+          </View>
+        </View>
+        <Pressable style={styles.create} disabled={isEmpty} hitSlop={12}>
+          <Text style={[styles.createText, isEmpty && styles.createDisabled]}>
+            Create
+          </Text>
+        </Pressable>
+      </View>
+
+      <View style={styles.padArea}>
+        <View style={styles.pad} onLayout={onPadLayout}>
+          <View style={styles.baseline} pointerEvents="none">
+            <Text style={styles.baselineMark}>✕</Text>
+            <View style={styles.baselineLine} />
+            <Text style={styles.baselineMark}>Sign here</Text>
+            <View style={styles.baselineLine} />
+          </View>
+
+          {pad.width > 0 && (
+            <Stage
+              width={pad.width}
+              height={pad.height}
+              style={styles.stage}
+              simultaneousGesture={touchGesture}
+            >
+              <BrushLayer
+                tool="pen"
+                onStrokeEnd={({ points }) =>
+                  setStrokes((prev) => [
+                    ...prev,
+                    {
+                      id: `stroke-${strokeCounter.current++}`,
+                      points,
+                      color: colorRef.current,
+                    },
+                  ])
+                }
+              >
+                {strokes.map((s) => (
+                  <Pen key={s.id} points={s.points} color={s.color} />
+                ))}
+              </BrushLayer>
+            </Stage>
+          )}
+          <TouchRings touches={touches} />
+        </View>
+
+        <View style={styles.controls}>
+          <Pressable onPress={clear} hitSlop={8}>
+            <Text style={styles.clear}>Clear</Text>
+          </Pressable>
+          <View style={styles.swatches}>
+            {INK_COLORS.map((c) => (
+              <Pressable
+                key={c}
+                onPress={() => setColor(c)}
+                hitSlop={8}
+                style={[
+                  styles.swatch,
+                  { backgroundColor: c },
+                  color === c && styles.swatchActive,
+                ]}
+              />
+            ))}
+          </View>
+        </View>
+      </View>
+
+      <Text style={styles.legal}>
+        By tapping Create, I agree that the signature will be the electronic
+        representation of my signature for all purposes when I (or my agent) use
+        them on documents, including legally binding contracts - just the same
+        as a pen-and-paper signature.
+      </Text>
+
+      <DrawerButton />
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  root: {
+    flex: 1,
+    backgroundColor: '#ffffff',
+  },
+  header: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    paddingTop: 64,
+    paddingHorizontal: 20,
+    paddingBottom: 16,
+  },
+  headerSpacer: {
+    width: 56,
+  },
+  tabs: {
+    flexDirection: 'row',
+    backgroundColor: '#eef0f4',
+    borderRadius: 10,
+    padding: 3,
+  },
+  tab: {
+    paddingHorizontal: 12,
+    paddingVertical: 6,
+    borderRadius: 8,
+  },
+  tabActive: {
+    backgroundColor: '#ffffff',
+    shadowColor: '#000',
+    shadowOpacity: 0.12,
+    shadowRadius: 3,
+    shadowOffset: { width: 0, height: 1 },
+    elevation: 2,
+  },
+  tabText: {
+    fontSize: 13,
+    color: '#6b7280',
+  },
+  tabTextActive: {
+    fontSize: 13,
+    fontWeight: '600',
+    color: '#1b1b1f',
+  },
+  create: {
+    width: 56,
+    alignItems: 'flex-end',
+  },
+  createText: {
+    fontSize: 15,
+    fontWeight: '600',
+    color: '#2f6bff',
+  },
+  createDisabled: {
+    color: '#b8bcc4',
+  },
+  padArea: {
+    flex: 1,
+    paddingHorizontal: 20,
+  },
+  pad: {
+    flex: 1,
+    backgroundColor: '#ffffff',
+  },
+  stage: {
+    ...StyleSheet.absoluteFillObject,
+    backgroundColor: 'transparent',
+  },
+  baseline: {
+    position: 'absolute',
+    left: 8,
+    right: 8,
+    bottom: '22%',
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 8,
+  },
+  baselineMark: {
+    fontSize: 16,
+    color: '#c2c6cf',
+  },
+  baselineLine: {
+    flex: 1,
+    borderBottomWidth: 1,
+    borderColor: '#d5d8de',
+    borderStyle: 'dashed',
+  },
+  controls: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    paddingVertical: 16,
+  },
+  clear: {
+    fontSize: 15,
+    color: '#2f6bff',
+    fontWeight: '500',
+  },
+  swatches: {
+    flexDirection: 'row',
+    gap: 14,
+  },
+  swatch: {
+    width: 26,
+    height: 26,
+    borderRadius: 13,
+  },
+  swatchActive: {
+    borderWidth: 2,
+    borderColor: '#1b1b1f',
+  },
+  legal: {
+    paddingHorizontal: 20,
+    paddingBottom: 40,
+    fontSize: 12,
+    lineHeight: 18,
+    color: '#6b7280',
+  },
+});
diff --git a/example/app/gpay-scratch-card.tsx b/example/app/gpay-scratch-card.tsx
new file mode 100644
index 0000000..5411fc5
--- /dev/null
+++ b/example/app/gpay-scratch-card.tsx
@@ -0,0 +1,498 @@
+import { useRef, useState } from 'react';
+import {
+  Animated,
+  Easing,
+  Pressable,
+  StyleSheet,
+  Text as RNText,
+  View,
+  useWindowDimensions,
+} from 'react-native';
+import { Asset } from 'expo-asset';
+import { Stage, BrushLayer, Eraser, Image } from 'react-native-canvas-kit';
+import { DrawerButton } from '../src/DrawerButton';
+import { useTouchTracker, TouchRings } from '../src/TouchOverlay';
+
+const FOIL = require('../src/assets/scratch/foil.png');
+const FOIL_URI = Asset.fromModule(FOIL).uri;
+
+interface ScratchStroke {
+  id: string;
+  points: number[];
+}
+
+const REVEAL_THRESHOLD = 0.42;
+const SCRATCH_WIDTH = 48;
+
+const CONFETTI = [
+  { color: '#f6c445', angle: -100, distance: 150 },
+  { color: '#4dabf7', angle: -60, distance: 180 },
+  { color: '#ff6b6b', angle: -20, distance: 140 },
+  { color: '#51cf66', angle: 20, distance: 175 },
+  { color: '#845ef7', angle: 60, distance: 150 },
+  { color: '#ff922b', angle: 100, distance: 185 },
+  { color: '#22b8cf', angle: -140, distance: 160 },
+  { color: '#f783ac', angle: 140, distance: 165 },
+  { color: '#94d82d', angle: -160, distance: 130 },
+  { color: '#ffd43b', angle: 160, distance: 155 },
+];
+
+function polylineLength(points: number[]): number {
+  let total = 0;
+  for (let i = 2; i < points.length; i += 2) {
+    const dx = points[i]! - points[i - 2]!;
+    const dy = points[i + 1]! - points[i - 1]!;
+    total += Math.sqrt(dx * dx + dy * dy);
+  }
+  return total;
+}
+
+function GoogleG() {
+  return (
+    <View style={styles.googleG}>
+      <RNText style={styles.googleGText}>G</RNText>
+    </View>
+  );
+}
+
+export default function ScratchCardScreen() {
+  const { width } = useWindowDimensions();
+  const size = Math.min(width * 0.75, 300);
+
+  const [strokes, setStrokes] = useState<ScratchStroke[]>([]);
+  const [revealed, setRevealed] = useState(false);
+  const strokeCounter = useRef(0);
+  const scratchedLength = useRef(0);
+  const { gesture: touchGesture, touches } = useTouchTracker();
+
+  const foilOpacity = useRef(new Animated.Value(1)).current;
+  const rewardScale = useRef(new Animated.Value(0.9)).current;
+  const burst = useRef(new Animated.Value(0)).current;
+  const hintOpacity = useRef(new Animated.Value(1)).current;
+
+  const revealBudget = size * size * REVEAL_THRESHOLD;
+
+  const runReveal = () => {
+    setRevealed(true);
+    Animated.parallel([
+      Animated.timing(foilOpacity, {
+        toValue: 0,
+        duration: 320,
+        easing: Easing.out(Easing.quad),
+        useNativeDriver: true,
+      }),
+      Animated.spring(rewardScale, {
+        toValue: 1,
+        friction: 5,
+        tension: 90,
+        useNativeDriver: true,
+      }),
+      Animated.timing(burst, {
+        toValue: 1,
+        duration: 900,
+        easing: Easing.out(Easing.cubic),
+        useNativeDriver: true,
+      }),
+    ]).start();
+  };
+
+  const onStrokeEnd = ({ points }: { points: number[] }) => {
+    setStrokes((prev) => {
+      if (prev.length === 0) {
+        Animated.timing(hintOpacity, {
+          toValue: 0,
+          duration: 200,
+          useNativeDriver: true,
+        }).start();
+      }
+      return [...prev, { id: `scratch-${strokeCounter.current++}`, points }];
+    });
+    if (revealed) return;
+    scratchedLength.current += polylineLength(points) * SCRATCH_WIDTH;
+    if (scratchedLength.current >= revealBudget) {
+      runReveal();
+    }
+  };
+
+  const reset = () => {
+    setStrokes([]);
+    setRevealed(false);
+    scratchedLength.current = 0;
+    foilOpacity.setValue(1);
+    rewardScale.setValue(0.9);
+    burst.setValue(0);
+    hintOpacity.setValue(1);
+  };
+
+  return (
+    <View style={styles.root}>
+      <View style={styles.backdrop} pointerEvents="none">
+        <View style={styles.bgAvatar} />
+        <View style={styles.bgRow}>
+          <View style={styles.bgLabel} />
+          <View style={styles.bgChevron} />
+        </View>
+        <View style={styles.bgCardsRow}>
+          <View style={[styles.bgCard, styles.bgCardNavy]} />
+          <View style={[styles.bgCard, styles.bgCardBrown]} />
+        </View>
+      </View>
+
+      <View style={styles.topBar}>
+        <View style={styles.iconSpacer} />
+        <View style={styles.headerCenter}>
+          <RNText style={styles.headerAmount}>₹360</RNText>
+          <RNText style={styles.headerLabel}>Total rewards</RNText>
+        </View>
+        <Pressable style={styles.menuButton} hitSlop={10}>
+          <RNText style={styles.menuDots}>⋮</RNText>
+        </Pressable>
+      </View>
+
+      <View style={styles.cardArea}>
+        <View style={styles.cardWrap}>
+          {CONFETTI.map((piece, index) => {
+            const radians = (piece.angle * Math.PI) / 180;
+            const translateX = burst.interpolate({
+              inputRange: [0, 1],
+              outputRange: [0, Math.cos(radians) * piece.distance],
+            });
+            const translateY = burst.interpolate({
+              inputRange: [0, 1],
+              outputRange: [0, Math.sin(radians) * piece.distance],
+            });
+            const opacity = burst.interpolate({
+              inputRange: [0, 0.7, 1],
+              outputRange: [0, 1, 0],
+            });
+            const scale = burst.interpolate({
+              inputRange: [0, 0.3, 1],
+              outputRange: [0.2, 1, 0.6],
+            });
+            return (
+              <Animated.View
+                key={index}
+                pointerEvents="none"
+                style={[
+                  styles.confetti,
+                  {
+                    backgroundColor: piece.color,
+                    borderRadius: index % 2 === 0 ? 3 : 6,
+                    opacity,
+                    transform: [{ translateX }, { translateY }, { scale }],
+                  },
+                ]}
+              />
+            );
+          })}
+
+          <View style={[styles.card, { width: size, height: size }]}>
+            <Animated.View
+              style={[styles.reward, { transform: [{ scale: rewardScale }] }]}
+            >
+              <View style={styles.trophyCircle}>
+                <RNText style={styles.trophy}>🏆</RNText>
+              </View>
+              <RNText style={styles.wonLabel}>You&apos;ve won</RNText>
+              <RNText style={styles.wonAmount}>₹29</RNText>
+              <RNText style={styles.wonSub}>Added to your rewards</RNText>
+            </Animated.View>
+
+            <Animated.View
+              style={[StyleSheet.absoluteFill, { opacity: foilOpacity }]}
+              pointerEvents={revealed ? 'none' : 'auto'}
+            >
+              <Stage
+                width={size}
+                height={size}
+                style={styles.stage}
+                simultaneousGesture={touchGesture}
+              >
+                <BrushLayer
+                  tool={revealed ? null : 'eraser'}
+                  strokeWidth={SCRATCH_WIDTH}
+                  onStrokeEnd={onStrokeEnd}
+                >
+                  <Image src={FOIL_URI} width={size} height={size} />
+                  {strokes.map((s) => (
+                    <Eraser
+                      key={s.id}
+                      points={s.points}
+                      strokeWidth={SCRATCH_WIDTH}
+                    />
+                  ))}
+                </BrushLayer>
+              </Stage>
+            </Animated.View>
+
+            <TouchRings touches={touches} />
+          </View>
+        </View>
+      </View>
+
+      <View style={styles.sheet}>
+        <View style={styles.sheetHandle} />
+        <View style={styles.sheetRow}>
+          <GoogleG />
+          <RNText style={styles.sheetBrand}>Google Pay</RNText>
+        </View>
+        <RNText style={styles.sheetTitle}>Scratch Card</RNText>
+        <RNText style={styles.sheetBody}>
+          {revealed
+            ? 'Nice! Your reward has been added to your account.'
+            : 'Scratch the card above and you could earn rewards!'}
+        </RNText>
+        {revealed && (
+          <Pressable style={styles.resetButton} onPress={reset} hitSlop={8}>
+            <RNText style={styles.resetText}>Scratch again</RNText>
+          </Pressable>
+        )}
+      </View>
+
+      <DrawerButton />
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  root: {
+    flex: 1,
+    backgroundColor: '#20242e',
+  },
+  backdrop: {
+    ...StyleSheet.absoluteFillObject,
+    paddingHorizontal: 24,
+    paddingTop: 150,
+  },
+  bgAvatar: {
+    width: 34,
+    height: 34,
+    borderRadius: 17,
+    backgroundColor: 'rgba(255,255,255,0.08)',
+    marginBottom: 34,
+  },
+  bgRow: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    marginBottom: 18,
+  },
+  bgLabel: {
+    width: 120,
+    height: 14,
+    borderRadius: 7,
+    backgroundColor: 'rgba(255,255,255,0.07)',
+  },
+  bgChevron: {
+    width: 14,
+    height: 14,
+    borderRadius: 7,
+    backgroundColor: 'rgba(255,255,255,0.07)',
+  },
+  bgCardsRow: {
+    flexDirection: 'row',
+    gap: 14,
+  },
+  bgCard: {
+    flex: 1,
+    height: 150,
+    borderRadius: 14,
+  },
+  bgCardNavy: {
+    backgroundColor: 'rgba(40,52,90,0.55)',
+  },
+  bgCardBrown: {
+    backgroundColor: 'rgba(74,54,44,0.55)',
+  },
+  topBar: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    paddingTop: 58,
+    paddingHorizontal: 18,
+  },
+  iconSpacer: {
+    width: 40,
+  },
+  headerCenter: {
+    alignItems: 'center',
+  },
+  headerAmount: {
+    fontSize: 22,
+    fontWeight: '700',
+    color: 'rgba(255,255,255,0.92)',
+  },
+  headerLabel: {
+    fontSize: 12,
+    color: 'rgba(255,255,255,0.5)',
+  },
+  menuButton: {
+    width: 40,
+    alignItems: 'flex-end',
+  },
+  menuDots: {
+    fontSize: 24,
+    color: 'rgba(255,255,255,0.85)',
+  },
+  cardArea: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+    marginBottom: 120,
+  },
+  cardWrap: {
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  confetti: {
+    position: 'absolute',
+    width: 12,
+    height: 12,
+    zIndex: 10,
+  },
+  card: {
+    borderRadius: 22,
+    overflow: 'hidden',
+    backgroundColor: '#ffffff',
+    shadowColor: '#000000',
+    shadowOpacity: 0.4,
+    shadowRadius: 24,
+    shadowOffset: { width: 0, height: 14 },
+    elevation: 12,
+  },
+  reward: {
+    ...StyleSheet.absoluteFillObject,
+    alignItems: 'center',
+    justifyContent: 'center',
+    backgroundColor: '#ffffff',
+  },
+  trophyCircle: {
+    width: 60,
+    height: 60,
+    borderRadius: 30,
+    backgroundColor: '#eaf0ff',
+    alignItems: 'center',
+    justifyContent: 'center',
+    marginBottom: 12,
+  },
+  trophy: {
+    fontSize: 30,
+  },
+  wonLabel: {
+    fontSize: 15,
+    color: '#6b7280',
+  },
+  wonAmount: {
+    fontSize: 40,
+    fontWeight: '800',
+    color: '#1b1b1f',
+    marginTop: 2,
+  },
+  wonSub: {
+    marginTop: 8,
+    fontSize: 12,
+    color: '#9aa1ac',
+  },
+  stage: {
+    ...StyleSheet.absoluteFillObject,
+    backgroundColor: 'transparent',
+  },
+  hint: {
+    position: 'absolute',
+    right: -70,
+    top: '40%',
+    width: 140,
+    height: 120,
+    alignItems: 'flex-start',
+    justifyContent: 'center',
+  },
+  hintArc: {
+    position: 'absolute',
+    right: 20,
+    top: 10,
+    width: 110,
+    height: 90,
+    borderColor: '#ff8a3d',
+    borderBottomWidth: 3,
+    borderLeftWidth: 3,
+    borderBottomLeftRadius: 90,
+  },
+  hintCoin: {
+    width: 34,
+    height: 34,
+    borderRadius: 17,
+    backgroundColor: 'rgba(255,255,255,0.35)',
+    borderWidth: 2,
+    borderColor: 'rgba(255,255,255,0.6)',
+  },
+  sheet: {
+    position: 'absolute',
+    bottom: 0,
+    left: 0,
+    right: 0,
+    backgroundColor: '#ffffff',
+    borderTopLeftRadius: 22,
+    borderTopRightRadius: 22,
+    paddingHorizontal: 24,
+    paddingTop: 12,
+    paddingBottom: 40,
+  },
+  sheetHandle: {
+    alignSelf: 'center',
+    width: 36,
+    height: 4,
+    borderRadius: 2,
+    backgroundColor: '#e2e5ea',
+    marginBottom: 18,
+  },
+  sheetRow: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 10,
+    marginBottom: 14,
+  },
+  googleG: {
+    width: 26,
+    height: 26,
+    borderRadius: 13,
+    backgroundColor: '#ffffff',
+    alignItems: 'center',
+    justifyContent: 'center',
+    borderWidth: 1.5,
+    borderColor: '#e2e5ea',
+  },
+  googleGText: {
+    fontSize: 16,
+    fontWeight: '700',
+    color: '#4285f4',
+  },
+  sheetBrand: {
+    fontSize: 15,
+    fontWeight: '600',
+    color: '#3c4043',
+  },
+  sheetTitle: {
+    fontSize: 22,
+    fontWeight: '700',
+    color: '#202124',
+  },
+  sheetBody: {
+    marginTop: 8,
+    fontSize: 14,
+    color: '#5f6368',
+    lineHeight: 20,
+  },
+  resetButton: {
+    marginTop: 18,
+    alignSelf: 'flex-start',
+    backgroundColor: '#4163dd',
+    paddingHorizontal: 22,
+    paddingVertical: 11,
+    borderRadius: 24,
+  },
+  resetText: {
+    color: '#ffffff',
+    fontSize: 14,
+    fontWeight: '600',
+  },
+});
diff --git a/example/app/instagram-crop.tsx b/example/app/instagram-crop.tsx
new file mode 100644
index 0000000..9450dd3
--- /dev/null
+++ b/example/app/instagram-crop.tsx
@@ -0,0 +1,297 @@
+import { useEffect, useRef, useState } from 'react';
+import {
+  Image as RNImage,
+  Pressable,
+  ScrollView,
+  StyleSheet,
+  Text,
+  View,
+  useWindowDimensions,
+} from 'react-native';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import { DrawerActions } from '@react-navigation/native';
+import { useNavigation } from 'expo-router';
+import { Asset } from 'expo-asset';
+import {
+  Stage,
+  Layer,
+  Image,
+  type EventObject,
+  type TransformResult,
+} from 'react-native-canvas-kit';
+import { CROP_PHOTOS } from '../src/cropPhotos';
+import { CropOverlay } from '../src/CropOverlay';
+import { useTouchTracker, TouchRings } from '../src/TouchOverlay';
+
+const MIN_SCALE = 1;
+const MAX_SCALE = 4;
+
+const PAN_MARGIN = 48;
+const SCALE_MARGIN = 0.25;
+const BOUNCE_DURATION = 280;
+
+const easeOutCubic = (t: number) => 1 - Math.pow(1 - t, 3);
+
+interface CropTransform {
+  x: number;
+  y: number;
+  scaleX: number;
+  scaleY: number;
+  rotation: number;
+}
+
+const IDENTITY: CropTransform = {
+  x: 0,
+  y: 0,
+  scaleX: 1,
+  scaleY: 1,
+  rotation: 0,
+};
+
+const clamp = (value: number, min: number, max: number) =>
+  Math.min(Math.max(value, min), max);
+
+function clampToViewport(t: TransformResult, size: number): CropTransform {
+  const scaleX = clamp(t.scaleX, MIN_SCALE, MAX_SCALE);
+  const scaleY = clamp(t.scaleY, MIN_SCALE, MAX_SCALE);
+  const scaledWidth = size * scaleX;
+  const scaledHeight = size * scaleY;
+  return {
+    x: clamp(t.x, size - scaledWidth, 0),
+    y: clamp(t.y, size - scaledHeight, 0),
+    scaleX,
+    scaleY,
+    rotation: 0,
+  };
+}
+
+export default function InstagramCropScreen() {
+  const { width } = useWindowDimensions();
+  const insets = useSafeAreaInsets();
+  const navigation = useNavigation();
+  const cropSize = width;
+  const radius = width / 2;
+
+  const [selectedId, setSelectedId] = useState(CROP_PHOTOS[0]!.id);
+  const [transforms, setTransforms] = useState<Record<string, CropTransform>>(
+    {}
+  );
+  const { gesture: touchGesture, touches } = useTouchTracker();
+
+  const transform = transforms[selectedId] ?? IDENTITY;
+  const selected = CROP_PHOTOS.find((p) => p.id === selectedId)!;
+
+  const bounceRef = useRef<number | null>(null);
+
+  const cancelBounce = () => {
+    if (bounceRef.current != null) {
+      cancelAnimationFrame(bounceRef.current);
+      bounceRef.current = null;
+    }
+  };
+
+  useEffect(() => cancelBounce, [selectedId]);
+
+  const animateBounce = (
+    id: string,
+    from: CropTransform,
+    to: CropTransform
+  ) => {
+    cancelBounce();
+    let startTs: number | null = null;
+    const step = (ts: number) => {
+      if (startTs == null) startTs = ts;
+      const progress = Math.min((ts - startTs) / BOUNCE_DURATION, 1);
+      const eased = easeOutCubic(progress);
+      const lerp = (a: number, b: number) => a + (b - a) * eased;
+      setTransforms((prev) => ({
+        ...prev,
+        [id]: {
+          x: lerp(from.x, to.x),
+          y: lerp(from.y, to.y),
+          scaleX: lerp(from.scaleX, to.scaleX),
+          scaleY: lerp(from.scaleY, to.scaleY),
+          rotation: 0,
+        },
+      }));
+      if (progress < 1) {
+        bounceRef.current = requestAnimationFrame(step);
+      } else {
+        bounceRef.current = null;
+      }
+    };
+    bounceRef.current = requestAnimationFrame(step);
+  };
+
+  const commit = (id: string, result: TransformResult) => {
+    const from: CropTransform = {
+      x: result.x,
+      y: result.y,
+      scaleX: result.scaleX,
+      scaleY: result.scaleY,
+      rotation: 0,
+    };
+    const to = clampToViewport(result, cropSize);
+    const overshoot =
+      Math.abs(from.x - to.x) > 0.5 ||
+      Math.abs(from.y - to.y) > 0.5 ||
+      Math.abs(from.scaleX - to.scaleX) > 0.001 ||
+      Math.abs(from.scaleY - to.scaleY) > 0.001;
+    setTransforms((prev) => ({ ...prev, [id]: from }));
+    if (overshoot) {
+      animateBounce(id, from, to);
+    }
+  };
+
+  const minX = cropSize * (1 - transform.scaleX) - PAN_MARGIN;
+  const minY = cropSize * (1 - transform.scaleY) - PAN_MARGIN;
+
+  const thumbSize = width / 4;
+
+  return (
+    <View style={styles.root}>
+      <View style={[styles.topBar, { paddingTop: insets.top + 8 }]}>
+        <Pressable
+          hitSlop={8}
+          onPress={() => navigation.dispatch(DrawerActions.openDrawer())}
+        >
+          <Text style={styles.close}>✕</Text>
+        </Pressable>
+        <Pressable style={styles.title} hitSlop={8}>
+          <Text style={styles.titleText}>Recents</Text>
+          <Text style={styles.caret}>⌄</Text>
+        </Pressable>
+        <Pressable hitSlop={8}>
+          <Text style={styles.done}>Done</Text>
+        </Pressable>
+      </View>
+
+      <View style={[styles.cropArea, { height: cropSize }]}>
+        <Stage
+          key={selectedId}
+          width={cropSize}
+          height={cropSize}
+          style={styles.stage}
+          simultaneousGesture={touchGesture}
+        >
+          <Layer width={cropSize} height={cropSize} gestureEnabled>
+            <Image
+              id={selectedId}
+              src={Asset.fromModule(selected.src).uri}
+              x={transform.x}
+              y={transform.y}
+              scaleX={transform.scaleX}
+              scaleY={transform.scaleY}
+              width={cropSize}
+              height={cropSize}
+              fit="cover"
+              draggable
+              scalable
+              minX={minX}
+              maxX={PAN_MARGIN}
+              minY={minY}
+              maxY={PAN_MARGIN}
+              minScaleX={MIN_SCALE - SCALE_MARGIN}
+              minScaleY={MIN_SCALE - SCALE_MARGIN}
+              maxScaleX={MAX_SCALE + SCALE_MARGIN}
+              maxScaleY={MAX_SCALE + SCALE_MARGIN}
+              onTransformStart={cancelBounce}
+              onTransformEnd={(e: EventObject) =>
+                commit(selectedId, e.evt as TransformResult)
+              }
+            />
+          </Layer>
+        </Stage>
+        <View pointerEvents="none" style={StyleSheet.absoluteFill}>
+          <CropOverlay size={cropSize} radius={radius} />
+        </View>
+        <TouchRings touches={touches} />
+      </View>
+
+      <ScrollView
+        style={styles.grid}
+        contentContainerStyle={styles.gridContent}
+      >
+        {CROP_PHOTOS.map((photo) => {
+          const active = photo.id === selectedId;
+          return (
+            <Pressable
+              key={photo.id}
+              onPress={() => setSelectedId(photo.id)}
+              style={[styles.thumb, { width: thumbSize, height: thumbSize }]}
+            >
+              <RNImage source={photo.src} style={styles.thumbImage} />
+              {active ? <View style={styles.thumbActive} /> : null}
+            </Pressable>
+          );
+        })}
+      </ScrollView>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  root: {
+    flex: 1,
+    backgroundColor: '#000000',
+  },
+  topBar: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    paddingHorizontal: 16,
+    paddingBottom: 12,
+  },
+  close: {
+    color: '#ffffff',
+    fontSize: 22,
+    fontWeight: '400',
+  },
+  title: {
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  titleText: {
+    color: '#ffffff',
+    fontSize: 18,
+    fontWeight: '600',
+  },
+  caret: {
+    color: '#ffffff',
+    fontSize: 14,
+    marginLeft: 6,
+    marginTop: -6,
+  },
+  done: {
+    color: '#3897f0',
+    fontSize: 16,
+    fontWeight: '600',
+  },
+  cropArea: {
+    width: '100%',
+    backgroundColor: '#000000',
+  },
+  stage: {
+    backgroundColor: '#000000',
+  },
+  grid: {
+    flex: 1,
+    backgroundColor: '#000000',
+  },
+  gridContent: {
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+  },
+  thumb: {
+    padding: 1,
+  },
+  thumbImage: {
+    width: '100%',
+    height: '100%',
+  },
+  thumbActive: {
+    ...StyleSheet.absoluteFillObject,
+    borderWidth: 3,
+    borderColor: '#3897f0',
+  },
+});
diff --git a/example/app/portal.tsx b/example/app/portal.tsx
new file mode 100644
index 0000000..607d853
--- /dev/null
+++ b/example/app/portal.tsx
@@ -0,0 +1,402 @@
+import { useEffect, useState } from 'react';
+import {
+  Pressable,
+  StyleSheet,
+  Text as RNText,
+  View,
+  useWindowDimensions,
+} from 'react-native';
+import Animated, {
+  Easing,
+  useAnimatedStyle,
+  useSharedValue,
+  withTiming,
+} from 'react-native-reanimated';
+import {
+  Stage,
+  Layer,
+  Rect,
+  Portal,
+  type EventObject,
+  type TransformResult,
+  SnapGrid,
+} from 'react-native-canvas-kit';
+import { DrawerButton } from '../src/DrawerButton';
+import { useTouchTracker, TouchRings } from '../src/TouchOverlay';
+import { type NodeTransform } from '../src/constants';
+
+const CARD_WIDTH = 320;
+const POLL_ID = 'poll';
+
+const buildInitial = (w: number, h: number): Record<string, NodeTransform> => ({
+  [POLL_ID]: {
+    x: Math.round((w - CARD_WIDTH) / 2),
+    y: Math.round(h * 0.4),
+    scaleX: 1,
+    scaleY: 1,
+    rotation: 0,
+  },
+});
+
+const TOOLS = ['Aa', '☺', '♪', '⋯'];
+
+type Choice = 'yes' | 'no';
+type RevealState = 'hidden' | 'correct' | 'wrong' | 'neutral';
+
+const RESULTS: Record<Choice, number> = { yes: 99, no: 1 };
+const CORRECT: Choice = 'yes';
+
+export default function PortalScreen() {
+  const { width, height } = useWindowDimensions();
+  const [picked, setPicked] = useState<Choice | null>(null);
+  const [transforms, setTransforms] = useState(() =>
+    buildInitial(width, height)
+  );
+  const { gesture: touchGesture, touches } = useTouchTracker();
+
+  const revealed = picked !== null;
+
+  const onOption = (choice: Choice) => setPicked(revealed ? null : choice);
+
+  const revealStateFor = (choice: Choice): RevealState => {
+    if (!revealed) return 'hidden';
+    if (choice === CORRECT) return 'correct';
+    return choice === picked ? 'wrong' : 'neutral';
+  };
+
+  const commit = (selector: string, t: TransformResult) =>
+    setTransforms((prev) => ({
+      ...prev,
+      [selector.replace('#', '')]: {
+        x: t.x,
+        y: t.y,
+        scaleX: t.scaleX,
+        scaleY: t.scaleY,
+        rotation: t.rotation,
+      },
+    }));
+
+  const interactive = (id: string) => {
+    const t = transforms[id]!;
+    return {
+      id,
+      x: t.x,
+      y: t.y,
+      scaleX: t.scaleX,
+      scaleY: t.scaleY,
+      rotation: t.rotation,
+      draggable: true,
+      scalable: true,
+      rotatable: true,
+      onTap: (e: EventObject) => {
+        e.cancelBubble = true;
+      },
+      onTransformEnd: (e: EventObject) =>
+        commit(`#${id}`, e.evt as TransformResult),
+    };
+  };
+
+  return (
+    <View style={styles.root}>
+      <Stage
+        width={width}
+        height={height}
+        style={styles.stage}
+        simultaneousGesture={touchGesture}
+      >
+        <Layer width={width} height={height} gestureEnabled>
+          <Rect
+            width={width}
+            height={height}
+            listening={false}
+            fillLinearGradientStartPoint={{ x: 0, y: 0 }}
+            fillLinearGradientEndPoint={{ x: width * 0.35, y: height }}
+            fillLinearGradientColorStops={[
+              0,
+              '#FF6A00',
+              0.5,
+              '#FF9100',
+              1,
+              '#FFC400',
+            ]}
+          />
+
+          <Portal
+            {...interactive(POLL_ID)}
+            xCenterSnaps={[width / 2]}
+            yCenterSnaps={[height / 2]}
+            pointerEvents="box-none"
+          >
+            <View style={styles.cardShadow} pointerEvents="box-none">
+              <View style={styles.cardClip} pointerEvents="box-none">
+                <View style={styles.header} pointerEvents="none">
+                  <RNText style={styles.title}>Is this a RN component?</RNText>
+                </View>
+                <View style={styles.body} pointerEvents="box-none">
+                  <PollOption
+                    label="Yes"
+                    percent={RESULTS.yes}
+                    reveal={revealStateFor('yes')}
+                    onPress={() => onOption('yes')}
+                  />
+                  <PollOption
+                    label="No"
+                    percent={RESULTS.no}
+                    reveal={revealStateFor('no')}
+                    onPress={() => onOption('no')}
+                  />
+                </View>
+              </View>
+            </View>
+          </Portal>
+          <SnapGrid dash={[6, 6]} stroke="white" />
+        </Layer>
+      </Stage>
+
+      <TouchRings touches={touches} />
+
+      <View style={styles.topBar} pointerEvents="box-none">
+        <View style={styles.toolRow}>
+          <View style={[styles.tool, styles.colorTool]} />
+          {TOOLS.map((glyph) => (
+            <Pressable key={glyph} style={styles.tool} hitSlop={4}>
+              <RNText style={styles.toolGlyph}>{glyph}</RNText>
+            </Pressable>
+          ))}
+        </View>
+      </View>
+
+      <DrawerButton />
+    </View>
+  );
+}
+
+function PollOption({
+  label,
+  percent,
+  reveal,
+  onPress,
+}: {
+  label: string;
+  percent: number;
+  reveal: RevealState;
+  onPress: () => void;
+}) {
+  const revealed = reveal !== 'hidden';
+  const fillStyle =
+    reveal === 'correct'
+      ? styles.fillCorrect
+      : reveal === 'wrong'
+        ? styles.fillWrong
+        : styles.fillNeutral;
+
+  const grow = useSharedValue(0);
+  useEffect(() => {
+    grow.value = withTiming(revealed ? percent : 0, {
+      duration: 450,
+      easing: Easing.out(Easing.cubic),
+    });
+  }, [grow, revealed, percent]);
+  const fillWidth = useAnimatedStyle(() => ({ width: `${grow.value}%` }));
+
+  return (
+    <Pressable style={styles.option} onPress={onPress}>
+      <Animated.View
+        style={[fillStyle, styles.resultFill, fillWidth]}
+        pointerEvents="none"
+      />
+      <View style={styles.optionRow} pointerEvents="none">
+        <RNText style={styles.optionLabel}>{label}</RNText>
+        {revealed ? (
+          <View style={styles.optionRight}>
+            {reveal === 'correct' ? (
+              <View style={styles.checkBadge}>
+                <RNText style={styles.checkGlyph}>✓</RNText>
+              </View>
+            ) : null}
+            <RNText style={styles.optionPct}>{percent}%</RNText>
+          </View>
+        ) : null}
+      </View>
+    </Pressable>
+  );
+}
+
+const styles = StyleSheet.create({
+  root: { flex: 1 },
+  stage: { backgroundColor: '#FF9100' },
+
+  cardShadow: {
+    width: CARD_WIDTH,
+    borderRadius: 22,
+    backgroundColor: '#FFFFFF',
+    shadowColor: '#000',
+    shadowOpacity: 0.25,
+    shadowRadius: 18,
+    shadowOffset: { width: 0, height: 10 },
+    elevation: 8,
+  },
+  cardClip: {
+    borderRadius: 22,
+    overflow: 'hidden',
+    backgroundColor: '#FFFFFF',
+  },
+  header: {
+    backgroundColor: '#0A0A0A',
+    paddingVertical: 18,
+    paddingHorizontal: 20,
+  },
+  title: {
+    color: '#FFFFFF',
+    fontSize: 18,
+    fontWeight: '700',
+    letterSpacing: 1,
+    padding: 0,
+    textAlign: 'center',
+  },
+  body: {
+    padding: 12,
+    gap: 10,
+  },
+  option: {
+    height: 54,
+    borderRadius: 14,
+    backgroundColor: '#ECECEC',
+    justifyContent: 'center',
+    overflow: 'hidden',
+  },
+  resultFill: {
+    position: 'absolute',
+    left: 0,
+    top: 0,
+    bottom: 0,
+  },
+  fillCorrect: { backgroundColor: 'rgba(34,197,94,0.32)' },
+  fillWrong: { backgroundColor: 'rgba(239,68,68,0.28)' },
+  fillNeutral: { backgroundColor: 'rgba(0,0,0,0.08)' },
+  optionRow: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    paddingHorizontal: 16,
+  },
+  optionLabel: {
+    fontSize: 17,
+    fontWeight: '700',
+    color: '#111111',
+  },
+  optionRight: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 8,
+  },
+  optionPct: {
+    fontSize: 15,
+    fontWeight: '700',
+    color: '#111111',
+  },
+  checkBadge: {
+    width: 22,
+    height: 22,
+    borderRadius: 11,
+    backgroundColor: '#22C55E',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  checkGlyph: {
+    color: '#FFFFFF',
+    fontSize: 13,
+    fontWeight: '800',
+  },
+
+  topBar: {
+    position: 'absolute',
+    top: 52,
+    left: 0,
+    right: 0,
+    flexDirection: 'row',
+    justifyContent: 'flex-end',
+    paddingHorizontal: 16,
+  },
+  toolRow: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 12,
+  },
+  tool: {
+    width: 40,
+    height: 40,
+    borderRadius: 20,
+    backgroundColor: 'rgba(0,0,0,0.28)',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  colorTool: {
+    backgroundColor: '#FFB300',
+    borderWidth: 3,
+    borderColor: '#FFFFFF',
+  },
+  toolGlyph: {
+    color: '#FFFFFF',
+    fontSize: 18,
+    fontWeight: '700',
+  },
+
+  bottomBar: {
+    position: 'absolute',
+    left: 16,
+    right: 16,
+    bottom: 34,
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 12,
+  },
+  audiencePill: {
+    flex: 1,
+    height: 52,
+    borderRadius: 26,
+    backgroundColor: 'rgba(0,0,0,0.35)',
+    flexDirection: 'row',
+    alignItems: 'center',
+    paddingHorizontal: 8,
+    gap: 10,
+  },
+  avatar: {
+    width: 34,
+    height: 34,
+    borderRadius: 17,
+    backgroundColor: '#FFFFFF',
+  },
+  starBadge: {
+    width: 34,
+    height: 34,
+    borderRadius: 17,
+    backgroundColor: '#22C55E',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  starGlyph: {
+    color: '#FFFFFF',
+    fontSize: 18,
+  },
+  audienceText: {
+    color: '#FFFFFF',
+    fontSize: 15,
+    fontWeight: '600',
+  },
+  nextButton: {
+    width: 52,
+    height: 52,
+    borderRadius: 26,
+    backgroundColor: '#FFFFFF',
+    borderWidth: 3,
+    borderColor: '#FF2D87',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  nextGlyph: {
+    color: '#111111',
+    fontSize: 22,
+    fontWeight: '700',
+  },
+});
diff --git a/example/app/snapseed.tsx b/example/app/snapseed.tsx
new file mode 100644
index 0000000..87ee00a
--- /dev/null
+++ b/example/app/snapseed.tsx
@@ -0,0 +1,422 @@
+import { useCallback, useMemo, useRef, useState } from 'react';
+import {
+  type LayoutChangeEvent,
+  Pressable,
+  ScrollView,
+  StyleSheet,
+  Text,
+  View,
+  useWindowDimensions,
+} from 'react-native';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import { Gesture, GestureDetector } from 'react-native-gesture-handler';
+import { runOnJS } from 'react-native-reanimated';
+import { DrawerActions } from '@react-navigation/native';
+import { useNavigation } from 'expo-router';
+import { Asset } from 'expo-asset';
+import { ColorMatrix } from '@shopify/react-native-skia';
+import { Stage, Layer, Image } from 'react-native-canvas-kit';
+import { CROP_PHOTOS } from '../src/cropPhotos';
+import { useTouchTracker, TouchRings } from '../src/TouchOverlay';
+import {
+  buildTuneMatrix,
+  NEUTRAL_TUNE,
+  TOOLS,
+  TUNE_PARAMS,
+  type TuneValues,
+} from '../src/snapseed';
+
+const PHOTO = CROP_PHOTOS[0]!;
+const PHOTO_URI = Asset.fromModule(PHOTO.src).uri;
+
+const ROW_HEIGHT = 42;
+const HORIZONTAL_RANGE = 0.75;
+
+const clamp = (value: number, min: number, max: number) =>
+  Math.min(Math.max(value, min), max);
+
+const fmt = (value: number) => `${value > 0 ? '+' : ''}${Math.round(value)}`;
+
+type Mode = 'home' | 'tune';
+type Axis = 'horizontal' | 'vertical' | null;
+
+export default function SnapseedScreen() {
+  const { width, height } = useWindowDimensions();
+  const insets = useSafeAreaInsets();
+  const navigation = useNavigation();
+
+  const [mode, setMode] = useState<Mode>('home');
+  const [values, setValues] = useState<TuneValues>({ ...NEUTRAL_TUNE });
+
+  const [paramIndex, setParamIndex] = useState(0);
+  const [axis, setAxis] = useState<Axis>(null);
+  const [hudVisible, setHudVisible] = useState(false);
+
+  const [canvas, setCanvas] = useState({ width, height: height * 0.6 });
+  const { gesture: touchGesture, touches } = useTouchTracker();
+
+  const startValues = useRef<TuneValues>({ ...NEUTRAL_TUNE });
+  const startIndex = useRef(0);
+  const axisRef = useRef<Axis>(null);
+
+  const matrix = useMemo(() => buildTuneMatrix(values), [values]);
+  const activeParam = TUNE_PARAMS[paramIndex]!;
+
+  const onCanvasLayout = useCallback((e: LayoutChangeEvent) => {
+    const { width: w, height: h } = e.nativeEvent.layout;
+    setCanvas({ width: w, height: h });
+  }, []);
+
+  const beginGesture = useCallback(() => {
+    startValues.current = { ...values };
+    startIndex.current = paramIndex;
+    axisRef.current = null;
+    setAxis(null);
+    setHudVisible(true);
+  }, [values, paramIndex]);
+
+  const updateGesture = useCallback(
+    (dx: number, dy: number) => {
+      if (axisRef.current === null) {
+        if (Math.abs(dx) < 8 && Math.abs(dy) < 8) return;
+        axisRef.current =
+          Math.abs(dx) >= Math.abs(dy) ? 'horizontal' : 'vertical';
+        setAxis(axisRef.current);
+      }
+      if (axisRef.current === 'vertical') {
+        const delta = Math.round(dy / ROW_HEIGHT);
+        const next = clamp(
+          startIndex.current + delta,
+          0,
+          TUNE_PARAMS.length - 1
+        );
+        setParamIndex(next);
+      } else {
+        const key = TUNE_PARAMS[startIndex.current]!.key;
+        const span = width * HORIZONTAL_RANGE;
+        const delta = (dx / span) * 200;
+        const next = clamp(
+          Math.round(startValues.current[key]! + delta),
+          -100,
+          100
+        );
+        setValues((prev) =>
+          prev[key] === next ? prev : { ...prev, [key]: next }
+        );
+      }
+    },
+    [width]
+  );
+
+  const endGesture = useCallback(() => {
+    axisRef.current = null;
+    setAxis(null);
+    setHudVisible(false);
+  }, []);
+
+  const tuneGesture = useMemo(
+    () =>
+      Gesture.Pan()
+        .onBegin(() => {
+          'worklet';
+          runOnJS(beginGesture)();
+        })
+        .onUpdate((e) => {
+          'worklet';
+          runOnJS(updateGesture)(e.translationX, e.translationY);
+        })
+        .onFinalize(() => {
+          'worklet';
+          runOnJS(endGesture)();
+        }),
+    [beginGesture, updateGesture, endGesture]
+  );
+
+  const resetTune = () => {
+    setValues({ ...NEUTRAL_TUNE });
+    setParamIndex(0);
+  };
+
+  const openDrawer = () => navigation.dispatch(DrawerActions.openDrawer());
+
+  const hudValue = axis === 'horizontal' ? fmt(values[activeParam.key]!) : '';
+
+  return (
+    <View style={styles.root}>
+      <View style={[styles.topBar, { paddingTop: insets.top + 10 }]}>
+        {mode === 'home' ? (
+          <>
+            <Pressable hitSlop={10} onPress={openDrawer}>
+              <Text style={styles.topIcon}>☰</Text>
+            </Pressable>
+            <Text style={styles.topTitle}>Snapseed</Text>
+            <Pressable hitSlop={10}>
+              <Text style={styles.topIcon}>⋮</Text>
+            </Pressable>
+          </>
+        ) : (
+          <>
+            <Pressable hitSlop={10} onPress={() => setMode('home')}>
+              <Text style={styles.topIcon}>✕</Text>
+            </Pressable>
+            <View style={styles.tuneTitleWrap}>
+              <Text style={styles.topTitle}>Tune Image</Text>
+            </View>
+            <View style={styles.tuneActions}>
+              <Pressable hitSlop={10} onPress={resetTune}>
+                <Text style={styles.topIcon}>↺</Text>
+              </Pressable>
+              <Pressable hitSlop={10} onPress={() => setMode('home')}>
+                <Text style={[styles.topIcon, styles.check]}>✓</Text>
+              </Pressable>
+            </View>
+          </>
+        )}
+      </View>
+
+      <View style={styles.canvasArea} onLayout={onCanvasLayout}>
+        <Stage
+          width={canvas.width}
+          height={canvas.height}
+          style={styles.stage}
+          simultaneousGesture={touchGesture}
+        >
+          <Layer width={canvas.width} height={canvas.height}>
+            <Image
+              src={PHOTO_URI}
+              x={0}
+              y={0}
+              width={canvas.width}
+              height={canvas.height}
+              fit="contain"
+            >
+              <ColorMatrix matrix={matrix} />
+            </Image>
+          </Layer>
+        </Stage>
+
+        <TouchRings touches={touches} />
+
+        {mode === 'tune' && (
+          <GestureDetector gesture={tuneGesture}>
+            <View style={StyleSheet.absoluteFill} />
+          </GestureDetector>
+        )}
+
+        {mode === 'tune' && hudVisible && (
+          <View pointerEvents="none" style={styles.hud}>
+            <View style={styles.hudPill}>
+              <Text style={styles.hudLabel}>{activeParam.label}</Text>
+              {axis === 'horizontal' && (
+                <Text style={styles.hudValue}>{hudValue}</Text>
+              )}
+            </View>
+            <View style={styles.hudTrack}>
+              <View
+                style={[
+                  styles.hudFill,
+                  {
+                    width: `${((values[activeParam.key]! + 100) / 200) * 100}%`,
+                  },
+                ]}
+              />
+            </View>
+          </View>
+        )}
+
+        {mode === 'tune' && axis === 'vertical' && (
+          <View pointerEvents="none" style={styles.paramMenu}>
+            {TUNE_PARAMS.map((param, index) => {
+              const active = index === paramIndex;
+              return (
+                <View
+                  key={param.key}
+                  style={[styles.paramRow, active && styles.paramRowActive]}
+                >
+                  <Text
+                    style={[styles.paramText, active && styles.paramTextActive]}
+                  >
+                    {param.label}
+                  </Text>
+                  <Text
+                    style={[styles.paramVal, active && styles.paramTextActive]}
+                  >
+                    {fmt(values[param.key]!)}
+                  </Text>
+                </View>
+              );
+            })}
+          </View>
+        )}
+
+        {mode === 'tune' && !hudVisible && (
+          <View pointerEvents="none" style={styles.gestureHint}>
+            <Text style={styles.gestureHintText}>
+              Swipe ↕ to pick · Swipe ↔ to adjust
+            </Text>
+          </View>
+        )}
+      </View>
+
+      {mode === 'home' && (
+        <View style={[styles.bottom, { paddingBottom: insets.bottom + 6 }]}>
+          <ScrollView contentContainerStyle={styles.toolsGrid}>
+            {TOOLS.map((tool) => {
+              const enabled = tool.id === 'tune';
+              return (
+                <Pressable
+                  key={tool.id}
+                  style={[styles.toolCell, !enabled && styles.toolCellDisabled]}
+                  disabled={!enabled}
+                  onPress={() => setMode('tune')}
+                >
+                  <Text style={styles.toolIcon}>{tool.icon}</Text>
+                  <Text style={styles.toolLabel} numberOfLines={2}>
+                    {tool.label}
+                  </Text>
+                </Pressable>
+              );
+            })}
+          </ScrollView>
+
+          <View style={styles.tabBar}>
+            <View style={styles.tab}>
+              <Text style={[styles.tabText, styles.tabDisabled]}>STYLES</Text>
+            </View>
+            <View style={styles.tab}>
+              <Text style={[styles.tabText, styles.tabActive]}>TOOLS</Text>
+            </View>
+            <View style={styles.tab}>
+              <Text style={[styles.tabText, styles.tabDisabled]}>EXPORT</Text>
+            </View>
+          </View>
+        </View>
+      )}
+    </View>
+  );
+}
+
+const ACCENT = '#4c9bd6';
+
+const styles = StyleSheet.create({
+  root: { flex: 1, backgroundColor: '#111111' },
+  topBar: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    paddingHorizontal: 18,
+    paddingBottom: 12,
+    backgroundColor: '#1c1c1c',
+  },
+  topIcon: { color: '#e6e6e6', fontSize: 22, fontWeight: '400' },
+  check: { color: ACCENT, fontSize: 24 },
+  topTitle: { color: '#f2f2f2', fontSize: 17, fontWeight: '600' },
+  tuneTitleWrap: { flex: 1, alignItems: 'center' },
+  tuneActions: { flexDirection: 'row', alignItems: 'center', gap: 22 },
+  canvasArea: { flex: 1, backgroundColor: '#111111' },
+  stage: { flex: 1, backgroundColor: '#111111' },
+  hud: {
+    position: 'absolute',
+    top: 20,
+    left: 0,
+    right: 0,
+    alignItems: 'center',
+  },
+  hudPill: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 12,
+    backgroundColor: 'rgba(0,0,0,0.62)',
+    paddingHorizontal: 18,
+    paddingVertical: 8,
+    borderRadius: 20,
+  },
+  hudLabel: { color: '#ffffff', fontSize: 15, fontWeight: '600' },
+  hudValue: { color: ACCENT, fontSize: 15, fontWeight: '700' },
+  hudTrack: {
+    marginTop: 10,
+    width: '60%',
+    height: 3,
+    borderRadius: 2,
+    backgroundColor: 'rgba(255,255,255,0.25)',
+    overflow: 'hidden',
+  },
+  hudFill: { height: 3, backgroundColor: ACCENT },
+  paramMenu: {
+    position: 'absolute',
+    top: '50%',
+    left: 20,
+    transform: [{ translateY: -TUNE_PARAMS.length * (ROW_HEIGHT / 2) }],
+    backgroundColor: 'rgba(0,0,0,0.55)',
+    borderRadius: 12,
+    paddingVertical: 6,
+  },
+  paramRow: {
+    height: ROW_HEIGHT,
+    minWidth: 190,
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    paddingHorizontal: 16,
+  },
+  paramRowActive: { backgroundColor: 'rgba(255,255,255,0.14)' },
+  paramText: {
+    color: 'rgba(255,255,255,0.65)',
+    fontSize: 15,
+    fontWeight: '500',
+  },
+  paramVal: { color: 'rgba(255,255,255,0.5)', fontSize: 15, fontWeight: '500' },
+  paramTextActive: { color: '#ffffff', fontWeight: '700' },
+  gestureHint: {
+    position: 'absolute',
+    bottom: 18,
+    left: 0,
+    right: 0,
+    alignItems: 'center',
+  },
+  gestureHintText: {
+    color: 'rgba(255,255,255,0.55)',
+    fontSize: 13,
+    fontWeight: '500',
+    backgroundColor: 'rgba(0,0,0,0.4)',
+    paddingHorizontal: 14,
+    paddingVertical: 6,
+    borderRadius: 14,
+  },
+  bottom: { backgroundColor: '#1c1c1c' },
+  toolsGrid: {
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+    paddingHorizontal: 8,
+    paddingTop: 14,
+    paddingBottom: 4,
+  },
+  toolCell: {
+    width: '25%',
+    alignItems: 'center',
+    paddingVertical: 12,
+  },
+  toolCellDisabled: { opacity: 0.32 },
+  toolIcon: { fontSize: 22, color: '#dcdcdc', marginBottom: 6 },
+  toolLabel: {
+    color: '#b8b8b8',
+    fontSize: 11,
+    textAlign: 'center',
+    paddingHorizontal: 4,
+  },
+  tabBar: {
+    flexDirection: 'row',
+    borderTopWidth: StyleSheet.hairlineWidth,
+    borderTopColor: '#333333',
+    paddingTop: 12,
+  },
+  tab: { flex: 1, alignItems: 'center' },
+  tabText: {
+    color: '#8a8a8a',
+    fontSize: 13,
+    fontWeight: '600',
+    letterSpacing: 1,
+  },
+  tabActive: { color: ACCENT },
+  tabDisabled: { color: '#4a4a4a' },
+});
diff --git a/example/src/CanvaChrome.tsx b/example/src/CanvaChrome.tsx
new file mode 100644
index 0000000..dd348f6
--- /dev/null
+++ b/example/src/CanvaChrome.tsx
@@ -0,0 +1,486 @@
+import { useState, type ReactNode } from 'react';
+import {
+  Pressable,
+  StyleSheet,
+  Text,
+  View,
+  type LayoutChangeEvent,
+} from 'react-native';
+import {
+  Ionicons,
+  MaterialCommunityIcons,
+  MaterialIcons,
+} from '@expo/vector-icons';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import { DrawerActions } from '@react-navigation/native';
+import { useNavigation } from 'expo-router';
+
+const HEADER_TINT = '#ffffff';
+const HEADER_DISABLED = 'rgba(255, 255, 255, 0.45)';
+const CANVA_PURPLE = '#8B3DFF';
+const GRADIENT_START = [0, 196, 204];
+const GRADIENT_END = [125, 42, 232];
+const GRADIENT_STEPS = 28;
+
+interface BoardSize {
+  width: number;
+  height: number;
+}
+
+interface CanvaChromeProps {
+  hasSelection: boolean;
+  onConfirmSelection: () => void;
+  children: (size: BoardSize) => ReactNode;
+}
+
+export function CanvaChrome({
+  hasSelection,
+  onConfirmSelection,
+  children,
+}: CanvaChromeProps) {
+  const navigation = useNavigation();
+  const insets = useSafeAreaInsets();
+  const [board, setBoard] = useState<BoardSize>({ width: 0, height: 0 });
+
+  const onBoardLayout = (event: LayoutChangeEvent) => {
+    const { width, height } = event.nativeEvent.layout;
+    setBoard((prev) =>
+      prev.width === width && prev.height === height ? prev : { width, height }
+    );
+  };
+
+  return (
+    <View style={styles.root}>
+      <View style={[styles.header, { paddingTop: insets.top + 6 }]}>
+        <GradientFill />
+        <View style={styles.headerRow}>
+          <Pressable
+            onPress={() => navigation.dispatch(DrawerActions.openDrawer())}
+            hitSlop={8}
+          >
+            <Ionicons name="home-outline" size={25} color={HEADER_TINT} />
+          </Pressable>
+          <Ionicons
+            name="arrow-undo-outline"
+            size={24}
+            color={HEADER_TINT}
+            style={styles.headerIcon}
+          />
+          <Ionicons
+            name="arrow-redo-outline"
+            size={24}
+            color={HEADER_DISABLED}
+            style={styles.headerIcon}
+          />
+          <View style={styles.flexSpacer} />
+          <MaterialCommunityIcons
+            name="dots-horizontal"
+            size={26}
+            color={HEADER_TINT}
+            style={styles.headerIcon}
+          />
+          <MaterialCommunityIcons
+            name="crown"
+            size={24}
+            color={HEADER_TINT}
+            style={styles.headerIcon}
+          />
+          <View style={[styles.headerIcon, styles.badgeAnchor]}>
+            <Ionicons name="chatbubble-outline" size={24} color={HEADER_TINT} />
+            <View style={styles.badge}>
+              <Text style={styles.badgeText}>1</Text>
+            </View>
+          </View>
+          <MaterialIcons
+            name="open-in-full"
+            size={22}
+            color={HEADER_TINT}
+            style={styles.headerIcon}
+          />
+          <Ionicons
+            name="share-outline"
+            size={24}
+            color={HEADER_TINT}
+            style={styles.headerIcon}
+          />
+        </View>
+      </View>
+
+      <View style={styles.canvasArea}>
+        <View style={styles.board} onLayout={onBoardLayout}>
+          {board.width > 0 && children(board)}
+        </View>
+
+        {hasSelection && (
+          <View style={styles.floatingBar} pointerEvents="box-none">
+            <View style={styles.floatingPill}>
+              <View style={styles.aiDot}>
+                <MaterialCommunityIcons
+                  name="auto-fix"
+                  size={16}
+                  color="#ffffff"
+                />
+              </View>
+              <MaterialCommunityIcons
+                name="pencil"
+                size={22}
+                color={CANVA_PURPLE}
+                style={styles.floatingIcon}
+              />
+              <Ionicons
+                name="chatbubble-outline"
+                size={21}
+                color="#3d3d47"
+                style={styles.floatingIcon}
+              />
+              <Ionicons
+                name="copy-outline"
+                size={21}
+                color="#3d3d47"
+                style={styles.floatingIcon}
+              />
+              <Ionicons
+                name="trash-outline"
+                size={21}
+                color="#3d3d47"
+                style={styles.floatingIcon}
+              />
+              <MaterialCommunityIcons
+                name="dots-horizontal"
+                size={22}
+                color="#3d3d47"
+                style={styles.floatingIcon}
+              />
+            </View>
+          </View>
+        )}
+      </View>
+
+      <View style={[styles.bottom, { paddingBottom: insets.bottom + 4 }]}>
+        <View style={styles.pagesStrip}>
+          <PageThumb number="1" active label="Canva" />
+          <AddPageButton />
+          <PageThumb number="2" />
+          <AddPageButton />
+          <PageThumb number="3" heading />
+          <AddPageButton />
+        </View>
+
+        {hasSelection ? (
+          <View style={styles.toolbar}>
+            <TextTool
+              glyph={
+                <MaterialCommunityIcons
+                  name="keyboard-outline"
+                  size={22}
+                  color="#1b1b1f"
+                />
+              }
+              label="Edit"
+            />
+            <TextTool
+              glyph={<Text style={styles.glyphSerif}>Ff</Text>}
+              label="Font"
+            />
+            <TextTool
+              glyph={<Text style={styles.glyphBold}>H</Text>}
+              label="Text styles"
+            />
+            <TextTool
+              glyph={<Text style={styles.glyphSize}>aA</Text>}
+              label="Font size"
+            />
+            <TextTool
+              glyph={
+                <MaterialCommunityIcons
+                  name="format-color-text"
+                  size={22}
+                  color="#1b1b1f"
+                />
+              }
+              label="Color"
+            />
+            <Pressable
+              onPress={onConfirmSelection}
+              hitSlop={8}
+              style={styles.confirm}
+            >
+              <Ionicons name="checkmark" size={24} color="#1b1b1f" />
+            </Pressable>
+          </View>
+        ) : (
+          <View style={styles.toolbar}>
+            <TextTool
+              glyph={<Ionicons name="grid-outline" size={22} color="#1b1b1f" />}
+              label="Templates"
+            />
+            <TextTool
+              glyph={
+                <Ionicons name="shapes-outline" size={22} color="#1b1b1f" />
+              }
+              label="Elements"
+            />
+            <TextTool
+              glyph={<Ionicons name="text" size={22} color="#1b1b1f" />}
+              label="Text"
+            />
+            <TextTool
+              glyph={
+                <Ionicons name="image-outline" size={22} color="#1b1b1f" />
+              }
+              label="Gallery"
+            />
+            <TextTool
+              glyph={
+                <MaterialCommunityIcons
+                  name="shield-crown-outline"
+                  size={22}
+                  color="#1b1b1f"
+                />
+              }
+              label="Brand"
+              pro
+            />
+            <TextTool
+              glyph={
+                <Ionicons
+                  name="cloud-upload-outline"
+                  size={22}
+                  color="#1b1b1f"
+                />
+              }
+              label="Upload"
+            />
+          </View>
+        )}
+      </View>
+    </View>
+  );
+}
+
+function GradientFill() {
+  const segments = [];
+  for (let step = 0; step < GRADIENT_STEPS; step += 1) {
+    const ratio = step / (GRADIENT_STEPS - 1);
+    const red = Math.round(
+      GRADIENT_START[0]! + (GRADIENT_END[0]! - GRADIENT_START[0]!) * ratio
+    );
+    const green = Math.round(
+      GRADIENT_START[1]! + (GRADIENT_END[1]! - GRADIENT_START[1]!) * ratio
+    );
+    const blue = Math.round(
+      GRADIENT_START[2]! + (GRADIENT_END[2]! - GRADIENT_START[2]!) * ratio
+    );
+    segments.push(
+      <View
+        key={step}
+        style={{ flex: 1, backgroundColor: `rgb(${red}, ${green}, ${blue})` }}
+      />
+    );
+  }
+  return (
+    <View
+      style={[StyleSheet.absoluteFill, styles.gradientRow]}
+      pointerEvents="none"
+    >
+      {segments}
+    </View>
+  );
+}
+
+function TextTool({
+  glyph,
+  label,
+  pro,
+}: {
+  glyph: ReactNode;
+  label: string;
+  pro?: boolean;
+}) {
+  return (
+    <View style={styles.tool}>
+      <View style={styles.toolGlyph}>
+        {glyph}
+        {pro && (
+          <MaterialCommunityIcons
+            name="crown"
+            size={11}
+            color="#f5a623"
+            style={styles.proBadge}
+          />
+        )}
+      </View>
+      <Text style={styles.toolLabel} numberOfLines={1}>
+        {label}
+      </Text>
+    </View>
+  );
+}
+
+function PageThumb({
+  number,
+  active,
+  label,
+  heading,
+}: {
+  number: string;
+  active?: boolean;
+  label?: string;
+  heading?: boolean;
+}) {
+  return (
+    <View style={styles.pageWrap}>
+      <View style={[styles.page, active && styles.pageActive]}>
+        {label && <Text style={styles.pageLabel}>{label}</Text>}
+        {heading && <Text style={styles.pageHeading}>Add a heading</Text>}
+      </View>
+      <Text style={styles.pageNumber}>{number}</Text>
+    </View>
+  );
+}
+
+function AddPageButton() {
+  return (
+    <View style={styles.addPage}>
+      <Ionicons name="add" size={22} color="#5a5a63" />
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  root: { flex: 1, backgroundColor: '#e6e6ea' },
+  header: {
+    paddingBottom: 10,
+    overflow: 'hidden',
+  },
+  gradientRow: { flexDirection: 'row' },
+  headerRow: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    paddingHorizontal: 16,
+    paddingTop: 4,
+  },
+  headerIcon: { marginLeft: 18 },
+  flexSpacer: { flex: 1 },
+  badgeAnchor: { justifyContent: 'center' },
+  badge: {
+    position: 'absolute',
+    top: -6,
+    right: -6,
+    minWidth: 16,
+    height: 16,
+    borderRadius: 8,
+    backgroundColor: '#ff4d4f',
+    alignItems: 'center',
+    justifyContent: 'center',
+    paddingHorizontal: 3,
+  },
+  badgeText: { color: '#ffffff', fontSize: 10, fontWeight: '700' },
+  canvasArea: {
+    flex: 1,
+    padding: 14,
+  },
+  board: {
+    flex: 1,
+    borderRadius: 8,
+    backgroundColor: '#ffffff',
+    borderWidth: StyleSheet.hairlineWidth,
+    borderColor: '#d0d0d6',
+    overflow: 'hidden',
+    shadowColor: '#000',
+    shadowOpacity: 0.15,
+    shadowRadius: 12,
+    shadowOffset: { width: 0, height: 4 },
+    elevation: 4,
+  },
+  floatingBar: {
+    position: 'absolute',
+    left: 0,
+    right: 0,
+    top: '26%',
+    alignItems: 'center',
+  },
+  floatingPill: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    backgroundColor: '#ffffff',
+    borderRadius: 26,
+    paddingHorizontal: 14,
+    paddingVertical: 10,
+    shadowColor: '#000',
+    shadowOpacity: 0.18,
+    shadowRadius: 10,
+    shadowOffset: { width: 0, height: 4 },
+    elevation: 6,
+  },
+  aiDot: {
+    width: 26,
+    height: 26,
+    borderRadius: 13,
+    backgroundColor: CANVA_PURPLE,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  floatingIcon: { marginLeft: 18 },
+  bottom: {
+    backgroundColor: '#ffffff',
+  },
+  pagesStrip: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    paddingHorizontal: 16,
+    paddingTop: 12,
+    paddingBottom: 12,
+  },
+  pageWrap: { alignItems: 'flex-start' },
+  page: {
+    width: 96,
+    height: 60,
+    borderRadius: 8,
+    backgroundColor: '#ffffff',
+    borderWidth: 1,
+    borderColor: '#e2e2e6',
+    alignItems: 'center',
+    justifyContent: 'center',
+    overflow: 'hidden',
+  },
+  pageActive: { borderWidth: 2, borderColor: CANVA_PURPLE },
+  pageLabel: { color: '#1b1b1f', fontSize: 14, fontWeight: '700' },
+  pageHeading: { color: '#9a9aa2', fontSize: 9, fontWeight: '700' },
+  pageNumber: { color: '#5a5a63', fontSize: 12, marginTop: 4, marginLeft: 2 },
+  addPage: {
+    width: 34,
+    height: 34,
+    borderRadius: 17,
+    backgroundColor: '#f0f0f3',
+    alignItems: 'center',
+    justifyContent: 'center',
+    marginHorizontal: 6,
+    marginBottom: 20,
+  },
+  toolbar: {
+    flexDirection: 'row',
+    alignItems: 'flex-start',
+    justifyContent: 'space-between',
+    backgroundColor: '#ffffff',
+    paddingHorizontal: 14,
+    paddingTop: 12,
+    borderTopWidth: 1,
+    borderTopColor: '#ececef',
+  },
+  tool: { alignItems: 'center', width: 62 },
+  toolGlyph: { height: 26, justifyContent: 'center' },
+  toolLabel: { color: '#3d3d47', fontSize: 11, marginTop: 5 },
+  glyphSerif: { fontSize: 20, fontWeight: '600', color: '#1b1b1f' },
+  glyphBold: { fontSize: 21, fontWeight: '800', color: '#1b1b1f' },
+  glyphSize: { fontSize: 18, fontWeight: '700', color: '#1b1b1f' },
+  proBadge: { position: 'absolute', top: -8, right: -12 },
+  confirm: {
+    width: 44,
+    height: 44,
+    borderRadius: 22,
+    backgroundColor: '#f0f0f3',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+});
diff --git a/example/src/CropOverlay.tsx b/example/src/CropOverlay.tsx
new file mode 100644
index 0000000..cd51870
--- /dev/null
+++ b/example/src/CropOverlay.tsx
@@ -0,0 +1,76 @@
+import { useMemo } from 'react';
+import { StyleSheet } from 'react-native';
+import {
+  Canvas,
+  Path,
+  Group,
+  Skia,
+  FillType,
+} from '@shopify/react-native-skia';
+
+interface CropOverlayProps {
+  size: number;
+  radius: number;
+}
+
+export function CropOverlay({ size, radius }: CropOverlayProps) {
+  const center = size / 2;
+
+  const vignette = useMemo(() => {
+    const path = Skia.Path.Make();
+    path.addRect(Skia.XYWHRect(0, 0, size, size));
+    path.addCircle(center, center, radius);
+    path.setFillType(FillType.EvenOdd);
+    return path;
+  }, [size, center, radius]);
+
+  const circle = useMemo(() => {
+    const path = Skia.Path.Make();
+    path.addCircle(center, center, radius);
+    return path;
+  }, [center, radius]);
+
+  const grid = useMemo(() => {
+    const path = Skia.Path.Make();
+    const left = center - radius;
+    const top = center - radius;
+    const step = (radius * 2) / 3;
+    for (let i = 1; i < 3; i++) {
+      const x = left + step * i;
+      path.moveTo(x, top);
+      path.lineTo(x, top + radius * 2);
+      const y = top + step * i;
+      path.moveTo(left, y);
+      path.lineTo(left + radius * 2, y);
+    }
+    return path;
+  }, [center, radius]);
+
+  return (
+    <Canvas style={[styles.canvas, { width: size, height: size }]}>
+      <Path path={vignette} color="rgba(0, 0, 0, 0.55)" />
+      <Group clip={circle}>
+        <Path
+          path={grid}
+          color="rgba(255, 255, 255, 0.5)"
+          style="stroke"
+          strokeWidth={1}
+        />
+      </Group>
+      <Path
+        path={circle}
+        color="rgba(255, 255, 255, 0.85)"
+        style="stroke"
+        strokeWidth={1.5}
+      />
+    </Canvas>
+  );
+}
+
+const styles = StyleSheet.create({
+  canvas: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+  },
+});
diff --git a/example/src/assets/crop/photo-1.jpg b/example/src/assets/crop/photo-1.jpg
new file mode 100644
index 0000000..fb354d9
Binary files /dev/null and b/example/src/assets/crop/photo-1.jpg differ
diff --git a/example/src/assets/crop/photo-10.jpg b/example/src/assets/crop/photo-10.jpg
new file mode 100644
index 0000000..cf68a08
Binary files /dev/null and b/example/src/assets/crop/photo-10.jpg differ
diff --git a/example/src/assets/crop/photo-11.jpg b/example/src/assets/crop/photo-11.jpg
new file mode 100644
index 0000000..8b12558
Binary files /dev/null and b/example/src/assets/crop/photo-11.jpg differ
diff --git a/example/src/assets/crop/photo-12.jpg b/example/src/assets/crop/photo-12.jpg
new file mode 100644
index 0000000..dc65f9d
Binary files /dev/null and b/example/src/assets/crop/photo-12.jpg differ
diff --git a/example/src/assets/crop/photo-13.jpg b/example/src/assets/crop/photo-13.jpg
new file mode 100644
index 0000000..9aa971d
Binary files /dev/null and b/example/src/assets/crop/photo-13.jpg differ
diff --git a/example/src/assets/crop/photo-14.jpg b/example/src/assets/crop/photo-14.jpg
new file mode 100644
index 0000000..e451930
Binary files /dev/null and b/example/src/assets/crop/photo-14.jpg differ
diff --git a/example/src/assets/crop/photo-15.jpg b/example/src/assets/crop/photo-15.jpg
new file mode 100644
index 0000000..ad63e02
Binary files /dev/null and b/example/src/assets/crop/photo-15.jpg differ
diff --git a/example/src/assets/crop/photo-2.jpg b/example/src/assets/crop/photo-2.jpg
new file mode 100644
index 0000000..6017013
Binary files /dev/null and b/example/src/assets/crop/photo-2.jpg differ
diff --git a/example/src/assets/crop/photo-3.jpg b/example/src/assets/crop/photo-3.jpg
new file mode 100644
index 0000000..1cec55c
Binary files /dev/null and b/example/src/assets/crop/photo-3.jpg differ
diff --git a/example/src/assets/crop/photo-4.jpg b/example/src/assets/crop/photo-4.jpg
new file mode 100644
index 0000000..dd67bee
Binary files /dev/null and b/example/src/assets/crop/photo-4.jpg differ
diff --git a/example/src/assets/crop/photo-5.jpg b/example/src/assets/crop/photo-5.jpg
new file mode 100644
index 0000000..180bf77
Binary files /dev/null and b/example/src/assets/crop/photo-5.jpg differ
diff --git a/example/src/assets/crop/photo-6.jpg b/example/src/assets/crop/photo-6.jpg
new file mode 100644
index 0000000..0f3734c
Binary files /dev/null and b/example/src/assets/crop/photo-6.jpg differ
diff --git a/example/src/assets/crop/photo-7.jpg b/example/src/assets/crop/photo-7.jpg
new file mode 100644
index 0000000..bbeae5b
Binary files /dev/null and b/example/src/assets/crop/photo-7.jpg differ
diff --git a/example/src/assets/crop/photo-8.jpg b/example/src/assets/crop/photo-8.jpg
new file mode 100644
index 0000000..6f67191
Binary files /dev/null and b/example/src/assets/crop/photo-8.jpg differ
diff --git a/example/src/assets/crop/photo-9.jpg b/example/src/assets/crop/photo-9.jpg
new file mode 100644
index 0000000..bc5abcc
Binary files /dev/null and b/example/src/assets/crop/photo-9.jpg differ
diff --git a/example/src/assets/scratch/foil.png b/example/src/assets/scratch/foil.png
new file mode 100644
index 0000000..3635dca
Binary files /dev/null and b/example/src/assets/scratch/foil.png differ
diff --git a/example/src/cropPhotos.ts b/example/src/cropPhotos.ts
new file mode 100644
index 0000000..7354bf8
--- /dev/null
+++ b/example/src/cropPhotos.ts
@@ -0,0 +1,22 @@
+export interface CropPhoto {
+  id: string;
+  src: number;
+}
+
+export const CROP_PHOTOS: CropPhoto[] = [
+  { id: 'photo-1', src: require('./assets/crop/photo-1.jpg') },
+  { id: 'photo-2', src: require('./assets/crop/photo-2.jpg') },
+  { id: 'photo-3', src: require('./assets/crop/photo-3.jpg') },
+  { id: 'photo-4', src: require('./assets/crop/photo-4.jpg') },
+  { id: 'photo-5', src: require('./assets/crop/photo-5.jpg') },
+  { id: 'photo-6', src: require('./assets/crop/photo-6.jpg') },
+  { id: 'photo-7', src: require('./assets/crop/photo-7.jpg') },
+  { id: 'photo-8', src: require('./assets/crop/photo-8.jpg') },
+  { id: 'photo-9', src: require('./assets/crop/photo-9.jpg') },
+  { id: 'photo-10', src: require('./assets/crop/photo-10.jpg') },
+  { id: 'photo-11', src: require('./assets/crop/photo-11.jpg') },
+  { id: 'photo-12', src: require('./assets/crop/photo-12.jpg') },
+  { id: 'photo-13', src: require('./assets/crop/photo-13.jpg') },
+  { id: 'photo-14', src: require('./assets/crop/photo-14.jpg') },
+  { id: 'photo-15', src: require('./assets/crop/photo-15.jpg') },
+];
diff --git a/example/src/snapseed.ts b/example/src/snapseed.ts
new file mode 100644
index 0000000..af766af
--- /dev/null
+++ b/example/src/snapseed.ts
@@ -0,0 +1,245 @@
+export interface TuneParam {
+  key: string;
+  label: string;
+  min: number;
+  max: number;
+}
+
+export const TUNE_PARAMS: TuneParam[] = [
+  { key: 'brightness', label: 'Brightness', min: -100, max: 100 },
+  { key: 'contrast', label: 'Contrast', min: -100, max: 100 },
+  { key: 'saturation', label: 'Saturation', min: -100, max: 100 },
+  { key: 'ambiance', label: 'Ambiance', min: -100, max: 100 },
+  { key: 'highlights', label: 'Highlights', min: -100, max: 100 },
+  { key: 'shadows', label: 'Shadows', min: -100, max: 100 },
+  { key: 'warmth', label: 'Warmth', min: -100, max: 100 },
+];
+
+export type TuneValues = Record<string, number>;
+
+export const NEUTRAL_TUNE: TuneValues = {
+  brightness: 0,
+  contrast: 0,
+  saturation: 0,
+  ambiance: 0,
+  highlights: 0,
+  shadows: 0,
+  warmth: 0,
+};
+
+const IDENTITY: number[] = [
+  1, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 1, 0,
+];
+
+function multiply(a: number[], b: number[]): number[] {
+  const out = new Array<number>(20).fill(0);
+  for (let row = 0; row < 4; row++) {
+    for (let col = 0; col < 5; col++) {
+      let sum = 0;
+      for (let k = 0; k < 4; k++) {
+        sum += a[row * 5 + k]! * b[k * 5 + col]!;
+      }
+      if (col === 4) {
+        sum += a[row * 5 + 4]!;
+      }
+      out[row * 5 + col] = sum;
+    }
+  }
+  return out;
+}
+
+function brightnessMatrix(amount: number): number[] {
+  const offset = amount / 100;
+  return [
+    1,
+    0,
+    0,
+    0,
+    offset,
+    0,
+    1,
+    0,
+    0,
+    offset,
+    0,
+    0,
+    1,
+    0,
+    offset,
+    0,
+    0,
+    0,
+    1,
+    0,
+  ];
+}
+
+function contrastMatrix(amount: number): number[] {
+  const factor = 1 + amount / 100;
+  const offset = (1 - factor) * 0.5;
+  return [
+    factor,
+    0,
+    0,
+    0,
+    offset,
+    0,
+    factor,
+    0,
+    0,
+    offset,
+    0,
+    0,
+    factor,
+    0,
+    offset,
+    0,
+    0,
+    0,
+    1,
+    0,
+  ];
+}
+
+function saturationMatrix(amount: number): number[] {
+  const s = 1 + amount / 100;
+  const lumaR = 0.213;
+  const lumaG = 0.715;
+  const lumaB = 0.072;
+  return [
+    lumaR + s * (1 - lumaR),
+    lumaG - s * lumaG,
+    lumaB - s * lumaB,
+    0,
+    0,
+    lumaR - s * lumaR,
+    lumaG + s * (1 - lumaG),
+    lumaB - s * lumaB,
+    0,
+    0,
+    lumaR - s * lumaR,
+    lumaG - s * lumaG,
+    lumaB + s * (1 - lumaB),
+    0,
+    0,
+    0,
+    0,
+    0,
+    1,
+    0,
+  ];
+}
+
+function warmthMatrix(amount: number): number[] {
+  const shift = (amount / 100) * 0.12;
+  return [
+    1,
+    0,
+    0,
+    0,
+    shift,
+    0,
+    1,
+    0,
+    0,
+    shift * 0.4,
+    0,
+    0,
+    1,
+    0,
+    -shift,
+    0,
+    0,
+    0,
+    1,
+    0,
+  ];
+}
+
+export function buildTuneMatrix(values: TuneValues): number[] {
+  let matrix = IDENTITY;
+  matrix = multiply(brightnessMatrix(values.brightness ?? 0), matrix);
+  matrix = multiply(brightnessMatrix((values.shadows ?? 0) * 0.35), matrix);
+  matrix = multiply(contrastMatrix(values.contrast ?? 0), matrix);
+  matrix = multiply(contrastMatrix((values.highlights ?? 0) * 0.4), matrix);
+  matrix = multiply(saturationMatrix(values.saturation ?? 0), matrix);
+  matrix = multiply(saturationMatrix((values.ambiance ?? 0) * 0.5), matrix);
+  matrix = multiply(brightnessMatrix((values.ambiance ?? 0) * 0.15), matrix);
+  matrix = multiply(warmthMatrix(values.warmth ?? 0), matrix);
+  return matrix;
+}
+
+export interface StylePreset {
+  id: string;
+  label: string;
+  values: TuneValues;
+}
+
+export const STYLE_PRESETS: StylePreset[] = [
+  { id: 'original', label: 'Original', values: { ...NEUTRAL_TUNE } },
+  {
+    id: 'portrait',
+    label: 'Portrait',
+    values: { ...NEUTRAL_TUNE, brightness: 12, warmth: 20, saturation: 10 },
+  },
+  {
+    id: 'smooth',
+    label: 'Smooth',
+    values: { ...NEUTRAL_TUNE, contrast: -18, brightness: 10, ambiance: 20 },
+  },
+  {
+    id: 'pop',
+    label: 'Pop',
+    values: { ...NEUTRAL_TUNE, contrast: 30, saturation: 45, ambiance: 30 },
+  },
+  {
+    id: 'accentuate',
+    label: 'Accentuate',
+    values: { ...NEUTRAL_TUNE, contrast: 22, highlights: 20, shadows: 25 },
+  },
+  {
+    id: 'faded',
+    label: 'Faded Glow',
+    values: { ...NEUTRAL_TUNE, contrast: -30, brightness: 18, saturation: -20 },
+  },
+  {
+    id: 'noir',
+    label: 'Noir',
+    values: { ...NEUTRAL_TUNE, saturation: -100, contrast: 35 },
+  },
+  {
+    id: 'warm',
+    label: 'Sun',
+    values: { ...NEUTRAL_TUNE, warmth: 55, brightness: 8, saturation: 15 },
+  },
+  {
+    id: 'cool',
+    label: 'Cool',
+    values: { ...NEUTRAL_TUNE, warmth: -50, contrast: 12 },
+  },
+];
+
+export interface Tool {
+  id: string;
+  label: string;
+  icon: string;
+}
+
+export const TOOLS: Tool[] = [
+  { id: 'tune', label: 'Tune Image', icon: '🎛' },
+  { id: 'details', label: 'Details', icon: '▽' },
+  { id: 'curves', label: 'Curves', icon: '∿' },
+  { id: 'white-balance', label: 'White Balance', icon: '◧' },
+  { id: 'crop', label: 'Crop', icon: '⌗' },
+  { id: 'rotate', label: 'Rotate', icon: '↻' },
+  { id: 'perspective', label: 'Perspective', icon: '◱' },
+  { id: 'expand', label: 'Expand', icon: '⤢' },
+  { id: 'selective', label: 'Selective', icon: '◉' },
+  { id: 'brush', label: 'Brush', icon: '🖌' },
+  { id: 'healing', label: 'Healing', icon: '✚' },
+  { id: 'hdr', label: 'HDR-scape', icon: '⛰' },
+  { id: 'glamour', label: 'Glamour Glow', icon: '✦' },
+  { id: 'tonal', label: 'Tonal Contrast', icon: '◐' },
+  { id: 'drama', label: 'Drama', icon: '☁' },
+  { id: 'vintage', label: 'Vintage', icon: '▦' },
+];
diff --git a/src/components/brush/BrushLayer.tsx b/src/components/brush/BrushLayer.tsx
index b544336..619cf2a 100644
--- a/src/components/brush/BrushLayer.tsx
+++ b/src/components/brush/BrushLayer.tsx
@@ -1,5 +1,12 @@
 import { memo, useEffect, useRef, type ReactNode } from 'react';
-import { Group, Path } from '@shopify/react-native-skia';
+import {
+  BlendMode,
+  Group,
+  Path,
+  StrokeCap,
+  StrokeJoin,
+  type SkEnum,
+} from '@shopify/react-native-skia';
 import { useDerivedValue, useSharedValue } from 'react-native-reanimated';
 import { useRegistry } from '../internal/NodeContext';
 import { buildBrushPath } from '../../core/brush';
@@ -16,12 +23,26 @@ export interface BrushStrokeEvent {
 
 export interface BrushLayerProps {
   tool: BrushTool | null;
+  strokeWidth?: number;
+  strokeCap?: SkEnum<typeof StrokeCap>;
+  strokeJoin?: SkEnum<typeof StrokeJoin>;
+  opacity?: number;
+  blendMode?: SkEnum<typeof BlendMode>;
   onStrokeEnd?: (stroke: BrushStrokeEvent) => void;
   children?: ReactNode;
 }
 
 export const BrushLayer = memo(
-  ({ tool, onStrokeEnd, children }: BrushLayerProps) => {
+  ({
+    tool,
+    strokeWidth,
+    strokeCap,
+    strokeJoin,
+    opacity,
+    blendMode,
+    onStrokeEnd,
+    children,
+  }: BrushLayerProps) => {
     const registry = useRegistry();
     const activePointsSV = useSharedValue<number[]>([]);
 
@@ -57,8 +78,8 @@ export const BrushLayer = memo(
       return () => registry.unregisterBrushTool();
     }, [registry, tool, activePointsSV]);
 
-    const activeStyle = tool === null ? null : BRUSHES[tool];
-    const activeTension = activeStyle?.tension ?? 0.5;
+    const activeBrush = tool === null ? null : BRUSHES[tool];
+    const activeTension = activeBrush?.tension ?? 0.5;
 
     const activePath = useDerivedValue(
       () => buildBrushPath(activePointsSV.value, activeTension),
@@ -68,16 +89,16 @@ export const BrushLayer = memo(
     return (
       <Group layer>
         {children}
-        {activeStyle && (
+        {activeBrush && (
           <Path
             path={activePath}
             style="stroke"
-            color={activeStyle.color}
-            strokeWidth={activeStyle.strokeWidth}
-            strokeCap={activeStyle.cap}
-            strokeJoin={activeStyle.join}
-            opacity={activeStyle.opacity}
-            blendMode={activeStyle.blendMode}
+            color={activeBrush.color}
+            strokeWidth={strokeWidth ?? activeBrush.strokeWidth}
+            strokeCap={strokeCap ?? activeBrush.cap}
+            strokeJoin={strokeJoin ?? activeBrush.join}
+            opacity={opacity ?? activeBrush.opacity}
+            blendMode={blendMode ?? activeBrush.blendMode}
           />
         )}
       </Group>
diff --git a/src/components/shapes/Image.tsx b/src/components/shapes/Image.tsx
index 4a94bcc..a690d8b 100644
--- a/src/components/shapes/Image.tsx
+++ b/src/components/shapes/Image.tsx
@@ -1,4 +1,4 @@
-import { memo } from 'react';
+import { memo, type ReactNode } from 'react';
 import {
   Image as SkiaImage,
   useImage,
@@ -19,10 +19,11 @@ export interface ImageProps extends ShapeConfig {
   width?: number;
   height?: number;
   fit?: Fit;
+  children?: ReactNode;
 }
 
 export const Image = memo(
-  ({ image, src, width, height, fit, ...props }: ImageProps) => {
+  ({ image, src, width, height, fit, children, ...props }: ImageProps) => {
     const resolved = useImage(src ?? null);
     const skImage = image ?? resolved;
 
@@ -51,7 +52,9 @@ export const Image = memo(
           width={w}
           height={h}
           fit={fit ?? 'fill'}
-        />
+        >
+          {children}
+        </SkiaImage>
       </Container>
     );
   }