reszta poprawek

.claude/skills/remotion-markup/cropping.md

@@ -0,0 +1,34 @@
+# Cropping
+
+Preferably, the `cropLeft`, `cropRight`, `cropTop` and `cropBottom` props are used to crop content.
+It allows for interactively dragging the components and adapting the outlines in the canvas to the crop.
+
+The following components support `crop*` props:
+
+- `<Sequence>` from `remotion`, when `layout="absolute-fill"`
+- `<CanvasImage>` from `remotion`
+- `<Img>` from `remotion`
+- `<AnimatedImage>` from `remotion`
+- `<HtmlInCanvas>` from `remotion`
+- `<Solid>` from `remotion`
+- `<Video>` from `@remotion/media`
+- `<Gif>` from `@remotion/gif`
+- `<RemotionRiveCanvas>` from `@remotion/rive`
+
+Crop values are ratios between `0` and `1`.
+A value of `0` applies no crop on that edge.
+A value of `1` is a full crop.
+Keep [Interactivity Best Practices](../remotion-interactivity/SKILL.md) also for cropping, to keep it editable and keyframable.
+
+```tsx
+<CanvasImage
+  src={staticFile("photo.png")}
+  cropLeft={interpolate(frame, [0, 30], [0, 0.25], {
+    extrapolateLeft: "clamp",
+    extrapolateRight: "clamp",
+  })}
+  cropBottom={0.1}
+/>
+```
+
+Do not use `clipPath` together with crop props.