dsh-remotion 0.3.1 → 0.3.3

package/skills/remotion-best-practices/remotion-interactivity/{SKILL.md → REFERENCE.md}

@@ -1,7 +1,7 @@
 ---
 name: remotion-interactivity
 description: Structure Remotion markup for interactivity
-version: 4.0.519
+version: 4.0.529
 ---
 
 By writing Remotion markup in a specific way, the Remotion Studio is able to recognize the structure of the code and makes it interactive:
@@ -147,6 +147,72 @@ const translateY = interpolate(frame, [0, 30], [0, 120]); // ❌ Math should be
 />
 ```
 
+## Keep SVG paths editable with `Interactive.Path`
+
+Use `<Interactive.Path>` from `remotion` instead of `<path>` inside an SVG to make the path visually editable.
+
+Install `@remotion/paths` for path interpolation and Studio path keyframes:
+
+```sh
+bunx remotion add @remotion/paths
+```
+
+If the geometry is meant to be static, put the path string directly in the `d` prop. Do not extract it into a constant.
+
+```tsx title="Editable static path"
+import {Interactive} from 'remotion';
+
+<Interactive.Svg width={300} height={300} viewBox="0 0 300 300">
+  <Interactive.Path
+    name="Triangle"
+    d="M 40 40 L 260 40 L 150 260 Z"
+    fill="#0b84f3"
+  />
+</Interactive.Svg>
+```
+
+### Morph paths using inline `interpolatePaths()`
+
+Use `interpolatePaths()` from `@remotion/paths` directly in `d`.  
+It accepts a frame, an input range, an equally sized array of path strings, and options for easing, extrapolation, and posterization.
+Keep the output paths, ranges, and options inline, following the same input-range rules as `interpolate()` above.  
+Do not use `interpolatePath()` API or extract the interpolated result into a variable when the path keyframes should remain editable in Studio.
+
+```tsx title="Editable path keyframes"
+import {interpolatePaths} from '@remotion/paths';
+import {Easing, Interactive, useCurrentFrame} from 'remotion';
+
+export const MorphingPath = () => {
+  const frame = useCurrentFrame();
+
+  return (
+    <Interactive.Svg width={300} height={300} viewBox="0 0 300 300">
+      <Interactive.Path
+        name="Morphing triangle"
+        d={interpolatePaths(
+          frame,
+          [0, 30, 60],
+          [
+            'M 40 40 L 260 40 L 150 260 Z',
+            'M 40 150 L 150 40 L 260 150 Z',
+            'M 40 260 L 150 40 L 260 260 Z',
+          ],
+          {
+            easing: Easing.bezier(0.42, 0, 0.58, 1),
+            extrapolateLeft: 'clamp',
+            extrapolateRight: 'clamp',
+          },
+        )}
+        fill="#0b84f3"
+      />
+    </Interactive.Svg>
+  );
+};
+```
+
+Studio can edit the path at the current frame, add or move keyframes, and adjust their easing.  
+Use `strokeDasharray` and `strokeDashoffset` to evolve paths.
+
 ## Use `scale`, `translate`, `rotate` CSS properties
 
 Avoid the `transform` CSS property.  
@@ -239,6 +305,8 @@ Render separate elements if one version should have effects and another should n
 
 ## Making your own component interactive
 
+When using `Interactive.withSchema()`, include `Interactive.baseSchema` in the schema so standard timeline controls such as trimming and visibility remain available.
+
 To make a custom userland component interactive, use:
 [Make a component interactive](https://www.remotion.dev/docs/studio/make-component-interactive.md)
 

package/skills/remotion-best-practices/remotion-interactivity/agents/openai.yaml

@@ -1,7 +1,7 @@
 interface:
   display_name: '/remotion-interactivity'
   short_description: 'Make compositions editable in Remotion Studio'
-  icon_small: './assets/remotion-icon.png'
-  icon_large: './assets/remotion-icon.png'
+  icon_small: './assets/remotion-icon.svg'
+  icon_large: './assets/remotion-icon.svg'
   brand_color: '#0B84F3'
   default_prompt: '$remotion-interactivity: Make the markup in MyComp.tsx interactive'

package/skills/remotion-best-practices/remotion-interactivity/assets/remotion-icon.svg

@@ -0,0 +1,4 @@
+<svg width="100" height="100" viewBox="20 30 363 363" xmlns="http://www.w3.org/2000/svg">
+<title>Remotion</title>
+<path d="M148.332 92.9015C143.307 93.1742 139.259 93.9713 135.179 95.5236C133.144 96.2893 129.809 97.957 127.973 99.1108C120.295 103.925 114.443 111.162 111.391 119.584C110.782 121.252 109.136 126.57 108.076 130.23C101.018 154.7 97.0112 181.456 96.1511 209.776C96.0148 214.286 96.0148 225.026 96.1511 229.463C96.728 248.237 98.5216 265.187 101.773 282.472C103.095 289.468 105.213 298.866 106.44 303.135C108.947 311.809 114.065 319.193 121.344 324.605C126.221 328.234 131.759 330.668 137.895 331.863C140.853 332.44 144.755 332.702 147.629 332.514C151.604 332.251 159.491 331.192 165.9 330.049C194.786 324.899 221.469 315.679 245.666 302.485C260.99 294.125 274.09 285.074 286.729 274.092C299.326 263.163 310.066 251.405 319.516 238.21C321.708 235.158 322.81 233.375 323.911 231.131C326.743 225.341 328.075 219.583 328.064 213.143C328.064 207.143 326.932 201.815 324.488 196.361C323.313 193.728 322.191 191.84 319.674 188.253C310.402 175.048 300.112 163.542 287.568 152.361C268.122 135.034 245.026 120.822 219.235 110.302C213.644 108.026 208.138 106.022 201.509 103.851C187.475 99.2681 170.106 95.2929 155.411 93.3105C153.104 92.9959 149.968 92.8176 148.332 92.9015Z" fill="#0B84F3"/>
+</svg>

package/skills/{remotion-markup/remotion-maps/SKILL.md → remotion-best-practices/remotion-maps/REFERENCE.md}

@@ -1,7 +1,7 @@
 ---
 name: remotion-maps
 description: Remotion Map animation knowledge
-version: 4.0.519
+version: 4.0.529
 ---
 
 # Remotion Maps

package/skills/remotion-best-practices/remotion-maps/agents/openai.yaml

@@ -1,7 +1,7 @@
 interface:
   display_name: '/remotion-maps'
   short_description: 'Create animated maps in Remotion videos'
-  icon_small: './assets/remotion-icon.png'
-  icon_large: './assets/remotion-icon.png'
+  icon_small: './assets/remotion-icon.svg'
+  icon_large: './assets/remotion-icon.svg'
   brand_color: '#0B84F3'
   default_prompt: '$remotion-maps: Animate a dot from Zurich to New York.'

package/skills/remotion-best-practices/remotion-maps/assets/remotion-icon.svg

@@ -0,0 +1,4 @@
+<svg width="100" height="100" viewBox="20 30 363 363" xmlns="http://www.w3.org/2000/svg">
+<title>Remotion</title>
+<path d="M148.332 92.9015C143.307 93.1742 139.259 93.9713 135.179 95.5236C133.144 96.2893 129.809 97.957 127.973 99.1108C120.295 103.925 114.443 111.162 111.391 119.584C110.782 121.252 109.136 126.57 108.076 130.23C101.018 154.7 97.0112 181.456 96.1511 209.776C96.0148 214.286 96.0148 225.026 96.1511 229.463C96.728 248.237 98.5216 265.187 101.773 282.472C103.095 289.468 105.213 298.866 106.44 303.135C108.947 311.809 114.065 319.193 121.344 324.605C126.221 328.234 131.759 330.668 137.895 331.863C140.853 332.44 144.755 332.702 147.629 332.514C151.604 332.251 159.491 331.192 165.9 330.049C194.786 324.899 221.469 315.679 245.666 302.485C260.99 294.125 274.09 285.074 286.729 274.092C299.326 263.163 310.066 251.405 319.516 238.21C321.708 235.158 322.81 233.375 323.911 231.131C326.743 225.341 328.075 219.583 328.064 213.143C328.064 207.143 326.932 201.815 324.488 196.361C323.313 193.728 322.191 191.84 319.674 188.253C310.402 175.048 300.112 163.542 287.568 152.361C268.122 135.034 245.026 120.822 219.235 110.302C213.644 108.026 208.138 106.022 201.509 103.851C187.475 99.2681 170.106 95.2929 155.411 93.3105C153.104 92.9959 149.968 92.8176 148.332 92.9015Z" fill="#0B84F3"/>
+</svg>

package/skills/remotion-best-practices/remotion-maps/techniques/maplibre/TECHNIQUE.md

@@ -63,7 +63,7 @@ import 'maplibre-gl/dist/maplibre-gl.css';
 ```tsx
 import {useEffect, useRef, useState} from 'react';
 import {AbsoluteFill, useDelayRender, useVideoConfig} from 'remotion';
-import maplibregl from 'maplibre-gl';
+import * as maplibregl from 'maplibre-gl';
 import 'maplibre-gl/dist/maplibre-gl.css';
 
 const zurich: [number, number] = [8.5417, 47.3769];
@@ -79,6 +79,15 @@ export const MyComposition = () => {
 			return;
 		}
 
+		maplibregl.setWorkerUrl(
+			URL.createObjectURL(
+				new Blob(
+					[`import "https://unpkg.com/maplibre-gl@${maplibregl.getVersion()}/dist/maplibre-gl-worker.mjs";`],
+					{type: 'text/javascript'},
+				),
+			),
+		);
+
 		const mapInstance = new maplibregl.Map({
 			container: containerRef.current,
 			style: 'https://demotiles.maplibre.org/style.json',
@@ -131,7 +140,8 @@ import {
 	useDelayRender,
 	useVideoConfig,
 } from 'remotion';
-import maplibregl, {type GeoJSONSource, type Map} from 'maplibre-gl';
+import * as maplibregl from 'maplibre-gl';
+import {type GeoJSONSource, type Map} from 'maplibre-gl';
 import 'maplibre-gl/dist/maplibre-gl.css';
 
 const zurich: [number, number] = [8.5417, 47.3769];
@@ -214,6 +224,15 @@ export const MyComposition = () => {
 			return;
 		}
 
+		maplibregl.setWorkerUrl(
+			URL.createObjectURL(
+				new Blob(
+					[`import "https://unpkg.com/maplibre-gl@${maplibregl.getVersion()}/dist/maplibre-gl-worker.mjs";`],
+					{type: 'text/javascript'},
+				),
+			),
+		);
+
 		const mapInstance = new maplibregl.Map({
 			container: containerRef.current,
 			style: 'https://demotiles.maplibre.org/style.json',

package/skills/remotion-best-practices/remotion-maps/techniques/static-map/TECHNIQUE.md

@@ -34,4 +34,4 @@ export const StaticMap: React.FC = () => {
 
 ## Overlays and Interactivity
 
-Follow [Remotion Interactivity](../../../remotion-interactivity/SKILL.md) best practices and [Remotion Markup Best practices](../../../remotion-markup/SKILL.md) for elements.
+Follow [Remotion Interactivity](../../../remotion-interactivity/REFERENCE.md) best practices and [Remotion Markup Best practices](../../../remotion-markup/REFERENCE.md) for elements.

package/skills/remotion-best-practices/remotion-markup/{SKILL.md → REFERENCE.md}

@@ -1,11 +1,11 @@
 ---
 name: remotion-markup
 description: Content, animation and effects best practices
-version: 4.0.519
+version: 4.0.529
 ---
 
 This is guidance for writing Remotion React Markup.
-If this is not relevant, load [Remotion Best Practices](../remotion-best-practices/SKILL.md) instead.
+If this is not relevant, load [Remotion Best Practices](../SKILL.md) instead.
 
 ## Preserve user changes
 
@@ -21,7 +21,7 @@ Tailwind animation class will not render correctly, they need to be refactored.
 
 Use `Easing.bezier()` and `Easing.spring()` to customize timing.
 
-Structure your markup according to [Remotion Interactivity Best Practices](../remotion-interactivity/SKILL.md)
+Structure your markup according to [Remotion Interactivity Best Practices](../remotion-interactivity/REFERENCE.md)
 
 ```tsx
 import { useCurrentFrame, Easing, interpolate, Interactive } from "remotion";
@@ -212,7 +212,7 @@ If a component does not support these props, wrap it in`<Sequence>` from `remoti
 
 ## Maps
 
-See [Remotion Maps](./remotion-maps/SKILL.md) if wanting to include maps in the video.
+See [Remotion Maps](./remotion-maps/REFERENCE.md) if wanting to include maps in the video.
 
 ## Text highlights and annotations
 
@@ -222,6 +222,10 @@ See [text-highlights.md](text-highlights.md) for text highlights (highlight mark
 
 See [multi-scene-video.md](multi-scene-video.md) if planning to make a video with multiple subsequent scenes.
 
+## Connected compositions
+
+When a scene or group of layers deserves its own editable timeline, follow [connected-compositions.md](connected-compositions.md). Prefer this structure for substantial scenes in a multi-scene video.
+
 ## Voiceover
 
 See [voiceover.md](voiceover.md) for adding an AI-generated voiceover to Remotion compositions using ElevenLabs TTS.
@@ -246,6 +250,10 @@ See [cropping.md](cropping.md) if needing to crop the visible rectangle of a com
 
 See [transitions.md](transitions.md) for scene transition patterns.
 
+## Motion blur
+
+When adding motion blur or a movement trail, read [motion-blur.md](motion-blur.md) for the preferred HTML-in-canvas approach, preview requirements, and alternatives.
+
 ## Visual and pixel effects
 
 When creating a visual effect, consider whether it is feasible using CSS and HTML, or whether a shader is needed.  
@@ -271,11 +279,11 @@ When needing to visualize audio (spectrum bars, waveforms, bass-reactive effects
 
 ## Maps
 
-For static maps, animated routes and markers, geographic explainers, Mapbox, MapLibre, MapTiler, GeoJSON, or 3D geographic flyovers, load [Remotion Maps](./remotion-maps/SKILL.md).
+For static maps, animated routes and markers, geographic explainers, Mapbox, MapLibre, MapTiler, GeoJSON, or 3D geographic flyovers, load [Remotion Maps](./remotion-maps/REFERENCE.md).
 
 ## Captions
 
-When dealing with captions or subtitles, load the [Remotion Captions](../remotion-captions/SKILL.md) skill for more information.
+When dealing with captions or subtitles, load the [Remotion Captions](../remotion-captions/REFERENCE.md) skill for more information.
 
 ## Google Fonts
 
@@ -327,7 +335,7 @@ See [calculate-metadata.md](calculate-metadata.md) for dynamically set compositi
 
 ## Advanced compositions
 
-See [compositions.md](compositions.md) for how to define stills, folders, default props and for how to nest compositions.
+See [compositions.md](compositions.md) for how to define stills, folders, default props and for how to nest compositions. For Studio navigation into a scene's own timeline, use [connected compositions](connected-compositions.md).
 
 ## Advanced sequencing
 
@@ -341,25 +349,10 @@ Use `npx remotion add` to add new packages with the right version:
 npx remotion add @remotion/media
 ```
 
-This goes for `@remotion/*` packages, `mediabunny`, `@mediabunny/*`, and `zod`.
+This goes for `@remotion/*` packages, `mediabunny`, `@mediabunny/*`, `zod`, and `@huggingface/transformers`.
 
-## Previewing markup
+## Visual checks
 
-```
-npx remotion studio --no-open
-```
-
-This will start a long-running process and print the server URL for the preview.  
-If server is already started, it will print the URL.
-You can visit a specific composition by navigating to `/[composition-id]`, for example `http://localhost:3000/MapAnimation`.
-
-## Optional: one-frame render check
-
-You can render a single frame with the CLI to sanity-check layout, colors, or timing.  
-Skip it for trivial edits, pure refactors, or when you already have enough confidence from Studio or prior renders.
-
-```bash
-npx remotion still [composition-id] --scale=0.25 --frame=30
-```
+When a visual check is useful, open the [Remotion Studio](../remotion-studio/REFERENCE.md) for an interactive preview.
 
-At 30 fps, `--frame=30` is the one-second mark (`--frame` is zero-based).
+You can also use [Rendering](../remotion-render/REFERENCE.md) to inspect one or several frames as images.

package/skills/remotion-best-practices/remotion-markup/agents/openai.yaml

@@ -1,7 +1,7 @@
 interface:
   display_name: '/remotion-markup'
   short_description: 'Apply Remotion animation and effects practices'
-  icon_small: './assets/remotion-icon.png'
-  icon_large: './assets/remotion-icon.png'
+  icon_small: './assets/remotion-icon.svg'
+  icon_large: './assets/remotion-icon.svg'
   brand_color: '#0B84F3'
   default_prompt: '$remotion-markup: Apply best Remotion Practices to MyComp.tsx.'

package/skills/remotion-best-practices/remotion-markup/assets/remotion-icon.svg

@@ -0,0 +1,4 @@
+<svg width="100" height="100" viewBox="20 30 363 363" xmlns="http://www.w3.org/2000/svg">
+<title>Remotion</title>
+<path d="M148.332 92.9015C143.307 93.1742 139.259 93.9713 135.179 95.5236C133.144 96.2893 129.809 97.957 127.973 99.1108C120.295 103.925 114.443 111.162 111.391 119.584C110.782 121.252 109.136 126.57 108.076 130.23C101.018 154.7 97.0112 181.456 96.1511 209.776C96.0148 214.286 96.0148 225.026 96.1511 229.463C96.728 248.237 98.5216 265.187 101.773 282.472C103.095 289.468 105.213 298.866 106.44 303.135C108.947 311.809 114.065 319.193 121.344 324.605C126.221 328.234 131.759 330.668 137.895 331.863C140.853 332.44 144.755 332.702 147.629 332.514C151.604 332.251 159.491 331.192 165.9 330.049C194.786 324.899 221.469 315.679 245.666 302.485C260.99 294.125 274.09 285.074 286.729 274.092C299.326 263.163 310.066 251.405 319.516 238.21C321.708 235.158 322.81 233.375 323.911 231.131C326.743 225.341 328.075 219.583 328.064 213.143C328.064 207.143 326.932 201.815 324.488 196.361C323.313 193.728 322.191 191.84 319.674 188.253C310.402 175.048 300.112 163.542 287.568 152.361C268.122 135.034 245.026 120.822 219.235 110.302C213.644 108.026 208.138 106.022 201.509 103.851C187.475 99.2681 170.106 95.2929 155.411 93.3105C153.104 92.9959 149.968 92.8176 148.332 92.9015Z" fill="#0B84F3"/>
+</svg>

package/skills/remotion-best-practices/remotion-markup/audio.md

@@ -58,18 +58,16 @@ The audio still starts playing at the beginning of the composition - only the sp
 
 ## Delaying
 
-Wrap the audio in a `<Sequence>` to delay when it starts:
+Set `from` directly on `<Audio>` to delay when it starts:
 
 ```tsx
-import { Sequence, staticFile } from "remotion";
+import { staticFile, useVideoConfig } from "remotion";
 import { Audio } from "@remotion/media";
 
 const { fps } = useVideoConfig();
 
 return (
-  <Sequence from={1 * fps}>
-    <Audio src={staticFile("audio.mp3")} />
-  </Sequence>
+  <Audio from={fps} src={staticFile("audio.mp3")} />
 );
 ```
 

package/skills/remotion-best-practices/remotion-markup/compositions.md

@@ -106,12 +106,18 @@ Use [`calculateMetadata`](./calculate-metadata.md) to make dimensions, duration,
 
 ## Nesting compositions within another
 
-To add a composition within another composition, you can use the `<Sequence>` component with a `width` and `height` prop to specify the size of the composition.
+To render a composition's component inside another composition, use `<Sequence>` with `width` and `height` when the nested content needs its own dimensions.
+
+When the nested scene should have its own editable Studio timeline, use the [connected composition structure](connected-compositions.md).
 
 ```tsx
-<AbsoluteFill>
-  <Sequence width={COMPOSITION_WIDTH} height={COMPOSITION_HEIGHT}>
-    <CompositionComponent />
+<>
+  <Video src="https://remotion.media/video.mp4" />
+  <Sequence
+    width={1920}
+    height={1080}
+  >
+    <OverlayComponent />
   </Sequence>
-</AbsoluteFill>
+</>
 ```

package/skills/remotion-best-practices/remotion-markup/connected-compositions.md

@@ -0,0 +1,79 @@
+# Connected compositions
+
+Using the connected compositions pattern, a group of layers can get their own Studio timeline, like a precomposition in After Effects.
+
+Use connected composition when a section has its own layers or timing, will be reused, or would be easier to edit and preview on its own.
+
+1. Put the scene's markup in a named React component. Multiple internal layers and sequences can live inside it.
+2. Render exactly one direct instance of that component inside a `<Sequence>`, `<Series.Sequence>`, or `<TransitionSeries.Sequence>` in the parent.
+3. Register the **same component reference** with `<Composition component={...}>` in the root. Give it a unique `id` and the dimensions, fps, and natural duration needed to preview the scene on its own. A `<Folder>` can keep scene compositions together.
+
+```tsx
+// MyVideo.tsx
+import {Series} from 'remotion';
+import {OpeningScene} from './OpeningScene';
+import {FeatureScene} from './FeatureScene';
+
+export const MyVideo = () => (
+  <Series>
+    <Series.Sequence
+      name="Opening"
+      durationInFrames={90}
+    >
+      <OpeningScene />
+    </Series.Sequence>
+    <Series.Sequence
+      name="Feature"
+      durationInFrames={120}
+    >
+      <FeatureScene />
+    </Series.Sequence>
+  </Series>
+);
+```
+
+```tsx
+// Root.tsx
+import {Composition, Folder} from 'remotion';
+import {MyVideo} from './MyVideo';
+import {OpeningScene} from './OpeningScene';
+import {FeatureScene} from './FeatureScene';
+
+export const RemotionRoot = () => (
+  <>
+    <Folder name="MyVideo-Scenes">
+      <Composition
+        id="Opening"
+        component={OpeningScene}
+        width={1920}
+        height={1080}
+        fps={30}
+        durationInFrames={90}
+      />
+      <Composition
+        id="Feature"
+        component={FeatureScene}
+        width={1920}
+        height={1080}
+        fps={30}
+        durationInFrames={120}
+      />
+    </Folder>
+    <Composition
+      id="MyVideo"
+      component={MyVideo}
+      width={1920}
+      height={1080}
+      fps={30}
+      durationInFrames={210}
+    />
+  </>
+);
+```
+
+Studio replaces the layers with a reference to the connected composition in the timeline.
+Double-clicking a sequence with one connected composition opens it at the corresponding frame.
+Editing the shared component changes both views.
+
+If the scene takes props, pass the intended values in the parent and use matching `defaultProps` on its standalone registration; registration does not automatically copy the parent's props.
+Keep scene and parent fps and dimensions aligned unless their difference is intentional.

package/skills/remotion-best-practices/remotion-markup/cropping.md

@@ -18,7 +18,7 @@ The following components support `crop*` props:
 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.
+Keep [Interactivity Best Practices](../remotion-interactivity/REFERENCE.md) also for cropping, to keep it editable and keyframable.
 
 ```tsx
 <CanvasImage

package/skills/remotion-best-practices/remotion-markup/embedding-videos.md

@@ -54,18 +54,16 @@ return (
 
 ## Delaying
 
-Wrap the video in a `<Sequence>` to delay when it appears:
+Set `from` directly on `<Video>` to delay when it appears:
 
 ```tsx
-import { Sequence, staticFile } from "remotion";
+import { staticFile, useVideoConfig } from "remotion";
 import { Video } from "@remotion/media";
 
 const { fps } = useVideoConfig();
 
 return (
-  <Sequence from={1 * fps}>
-    <Video src={staticFile("video.mp4")} />
-  </Sequence>
+  <Video from={fps} src={staticFile("video.mp4")} />
 );
 ```
 

package/skills/remotion-best-practices/remotion-markup/motion-blur.md

@@ -0,0 +1,60 @@
+# Motion blur
+
+Use `@remotion/motion-blur` for frame-driven motion blur.  
+Install it with `npx remotion add @remotion/motion-blur`.
+
+`<HtmlInCanvasMotionBlur>` is the state of the art in Remotion for blurring animated HTML. It captures the content at fractional frames and averages its pixels in a canvas.
+
+## `<HtmlInCanvasMotionBlur>`
+
+Available from Remotion 4.0.529.  
+Supply the canvas `width` and `height`, usually from `useVideoConfig()`.  
+`shutterAngle` defaults to `180` and accepts `0` to `360`.
+`0` disables blur. `samples` defaults to `8` and must be an integer from `1` to `64`. More samples can smooth the blur but increase preview and render cost.
+
+Call `useCurrentFrame()` inside the child component so each sample receives its own frame.
+
+```tsx
+import {
+  HtmlInCanvasMotionBlur,
+} from '@remotion/motion-blur';
+import {useCurrentFrame, useVideoConfig} from 'remotion';
+
+const MovingBox = () => {
+  const frame = useCurrentFrame();
+  return (
+    <div
+      style={{
+        position: 'absolute',
+        left: frame * 10,
+        top: 200,
+        width: 120,
+        height: 120,
+        backgroundColor: '#ff6b6b',
+      }}
+    />
+  );
+};
+
+export const HtmlInCanvasBlur = () => {
+  const {width, height} = useVideoConfig();
+
+  return (
+    <HtmlInCanvasMotionBlur
+      width={width}
+      height={height}
+      samples={8}
+      shutterAngle={180}
+    >
+      <MovingBox />
+    </HtmlInCanvasMotionBlur>
+  );
+};
+```
+
+For live preview, enable HTML-in-canvas in Chrome 149 or later with `chrome://flags/#canvas-draw-element`.  
+No configuration for rendering is necessary.
+
+Do not nest `<HtmlInCanvas>` or `<HtmlInCanvasMotionBlur>` components; nested HTML-in-canvas is unsupported.
+
+If HTML-in-canvas is unavailable, see the [motion blur guide](https://www.remotion.dev/docs/motion-blur-guide) for other options. See the [`<HtmlInCanvasMotionBlur>` reference](https://www.remotion.dev/docs/motion-blur/html-in-canvas-motion-blur) for API details.