Merge branch 'main' into event-loop-break

.github/workflows/push.yml

@@ -24,7 +24,7 @@ jobs:
           cache: "pnpm"
       - uses: oven-sh/setup-bun@v1
         with:
-          bun-version: 1.1.45
+          bun-version: 1.1.20
       - uses: Swatinem/rust-cache@v2
         with:
           workspaces: "packages/compositor -> target"
@@ -61,7 +61,7 @@ jobs:
           cache: "pnpm"
       - uses: oven-sh/setup-bun@v1
         with:
-          bun-version: 1.1.45
+          bun-version: 1.1.20
       - name: Install
         run: pnpm i --frozen-lockfile
       - name: Setup Python
@@ -107,7 +107,7 @@ jobs:
           cache: "pnpm"
       - uses: oven-sh/setup-bun@v1
         with:
-          bun-version: 1.1.45
+          bun-version: 1.1.20
       - name: Install
         run: pnpm i --frozen-lockfile
         env:
@@ -155,7 +155,7 @@ jobs:
             ${{ runner.os }}-turbo-
       - uses: oven-sh/setup-bun@v1
         with:
-          bun-version: 1.1.45
+          bun-version: 1.1.20
       - uses: Swatinem/rust-cache@v2
         with:
           workspaces: "packages/compositor -> target"

packages/docs/docs/troubleshooting/subpixel-rendering.mdx

@@ -0,0 +1,56 @@
+---
+image: /generated/articles-docs-troubleshooting-subpixel-rendering.png
+sidebar_label: Subpixel rendering
+title: Text subpixel rendering
+crumb: 'Troubleshooting'
+---
+
+Chrome will by default always render text to align it with the closest pixel.  
+That means that a text with `margin-top: 10px` and `margin-top: 10.4px` will be rendered identically.
+
+This can make your animations less smooth more jarring.
+
+To counter this effect, you can render your text with:
+
+- A `transform` property
+- An additional `perspective()` transform
+- A `willChange: "transform"` CSS property
+
+Notice the difference in this 200x100 video:
+
+<video
+  src="https://remotion-assets.s3.eu-central-1.amazonaws.com/smooth-text.mp4"
+  playsInline
+  muted
+  autoPlay
+  loop
+  style={{
+    width: '100%',
+    border: '2px solid var(--text-color)',
+    borderRadius: 4,
+  }}
+/>
+<br />
+
+```tsx title="Left side of the video"
+<div
+  style={{
+    transform: 'translateY(' + interpolate(frame, [0, 200], [0, 50]) + 'px)',
+  }}
+>
+  hi there
+</div>
+```
+
+```tsx title="Right side of the video"
+<div
+  style={{
+    transform: 'perspective(100px) translateY(' + interpolate(frame, [0, 200], [0, 50]) + 'px)',
+    willChange: 'transform',
+  }}
+>
+  hi there
+</div>
+```
+
+Consider using this optimization [only during rendering](/docs/get-remotion-environment) as excessive `will-change`: `transform` will use more resources.

packages/docs/sidebars.js

@@ -1001,6 +1001,7 @@ module.exports = {
 				'troubleshooting/bundling-bundle',
 				'troubleshooting/browser-launch',
 				'troubleshooting/sigkill',
+				'troubleshooting/subpixel-rendering',
 				'troubleshooting/could-not-find-executable-to-run',
 				'troubleshooting/stuck-render',
 			],

packages/docs/src/data/articles.ts

@@ -4994,6 +4994,15 @@ export const articles = [
 		noAi: false,
 		slug: 'troubleshooting/sigkill',
 	},
+	{
+		id: 'troubleshooting/subpixel-rendering',
+		title: 'Text subpixel rendering',
+		relativePath: 'docs/troubleshooting/subpixel-rendering.mdx',
+		compId: 'articles-docs-troubleshooting-subpixel-rendering',
+		crumb: 'Troubleshooting',
+		noAi: false,
+		slug: 'troubleshooting/subpixel-rendering',
+	},
 	{
 		id: 'troubleshooting/timed-out-page-function',
 		title: 'Timed out evaluating page function',

packages/example/src/Root.tsx

@@ -115,6 +115,7 @@ const INCLUDE_COMP_BREAKING_GET_COMPOSITIONS = false;
 
 import {ThreeDEngine} from './3DEngine';
 import {AnimatedImages} from './AnimatedImage/Avif';
+import {SmoothTextTransition} from './SmoothTextTransition';
 
 class Vector2 {
 	readonly x: number;
@@ -1490,6 +1491,7 @@ export const Index: React.FC = () => {
 				height={1000}
 				width={1000}
 			/>
+			<SmoothTextTransition />
 		</>
 	);
 };

packages/example/src/SmoothTextTransition.tsx

@@ -0,0 +1,53 @@
+import {StudioInternals} from '@remotion/studio';
+import {AbsoluteFill, interpolate, useCurrentFrame} from 'remotion';
+
+const Comp: React.FC = () => {
+	const frame = useCurrentFrame();
+
+	return (
+		<AbsoluteFill
+			style={{
+				fontSize: 20,
+				display: 'flex',
+				lineHeight: 1,
+				fontFamily: 'sans-serif',
+				backgroundColor: 'white',
+				textAlign: 'center',
+				flexDirection: 'row',
+			}}
+		>
+			<div style={{width: 100}}>
+				<div
+					style={{
+						transform:
+							'translateY(' + interpolate(frame, [0, 200], [0, 50]) + 'px)',
+					}}
+				>
+					hi there
+				</div>
+			</div>
+			<div style={{width: 100}}>
+				<div
+					style={{
+						transform:
+							'translateY(' +
+							interpolate(frame, [0, 200], [0, 50]) +
+							'px) perspective(100px)',
+						willChange: 'transform',
+					}}
+				>
+					hi there
+				</div>
+			</div>
+		</AbsoluteFill>
+	);
+};
+
+export const SmoothTextTransition = StudioInternals.createComposition({
+	component: Comp,
+	height: 100,
+	width: 200,
+	id: 'smooth-text',
+	durationInFrames: 200,
+	fps: 3,
+});