Address halftone linear gradient review

Author: cursoragent

packages/core/src/sequence-field-schema.ts

@@ -31,6 +31,15 @@ export type TranslateFieldSchema = {
 	description?: string;
 };
 
+export type UvCoordinateFieldSchema = {
+	type: 'uv-coordinate';
+	min?: number;
+	max?: number;
+	step?: number;
+	default: readonly [number, number] | undefined;
+	description?: string;
+};
+
 export type ColorFieldSchema = {
 	type: 'color';
 	default: string | undefined;
@@ -49,6 +58,7 @@ export type VisibleFieldSchema =
 	| BooleanFieldSchema
 	| RotationFieldSchema
 	| TranslateFieldSchema
+	| UvCoordinateFieldSchema
 	| ColorFieldSchema
 	| EnumFieldSchema;
 

packages/docs/components/demos/control.tsx

@@ -1,6 +1,6 @@
 import React, {useMemo} from 'react';
-import styles from './styles.module.css';
 import type {Option} from './types';
+import styles from './styles.module.css';
 
 const left: React.CSSProperties = {
 	fontFamily: 'GTPlanar',
@@ -26,8 +26,10 @@ export const Control = ({
 	setValue,
 }: {
 	readonly option: Option;
-	readonly value: number | string | boolean;
-	readonly setValue: (value: number | string | boolean | null) => void;
+	readonly value: number | string | boolean | readonly [number, number];
+	readonly setValue: (
+		value: number | string | boolean | readonly [number, number] | null,
+	) => void;
 }) => {
 	const enabled = value !== null;
 
@@ -56,6 +58,22 @@ export const Control = ({
 		[],
 	);
 
+	const uvValue = useMemo<readonly [number, number] | null>(() => {
+		if (option.type !== 'uv-coordinate') {
+			return null;
+		}
+
+		if (
+			Array.isArray(value) &&
+			value.length === 2 &&
+			value.every((item) => typeof item === 'number')
+		) {
+			return [value[0], value[1]];
+		}
+
+		return option.default;
+	}, [option, value]);
+
 	return (
 		<label style={labelStyle} className={styles.item}>
 			<div style={left}>
@@ -85,11 +103,46 @@ export const Control = ({
 					style={inputStyle}
 					onChange={(e) => setValue(Number(e.target.value))}
 				/>
+			) : option.type === 'uv-coordinate' && enabled ? (
+				<>
+					<input
+						type="range"
+						min={option.min}
+						max={option.max}
+						step={option.step}
+						value={(uvValue ?? option.default)[0]}
+						style={inputStyle}
+						onChange={(e) =>
+							setValue([
+								Number(e.target.value),
+								(uvValue ?? option.default)[1],
+							] as const)
+						}
+					/>
+					<input
+						type="range"
+						min={option.min}
+						max={option.max}
+						step={option.step}
+						value={(uvValue ?? option.default)[1]}
+						style={inputStyle}
+						onChange={(e) =>
+							setValue([
+								(uvValue ?? option.default)[0],
+								Number(e.target.value),
+							] as const)
+						}
+					/>
+				</>
 			) : null}
 			{option.type === 'numeric' ? (
 				<div style={right}>
 					<code>{value}</code>
 				</div>
+			) : option.type === 'uv-coordinate' ? (
+				<div style={right}>
+					<code>{`[${(uvValue ?? option.default)[0]}, ${(uvValue ?? option.default)[1]}]`}</code>
+				</div>
 			) : option.type === 'enum' ? (
 				<div>
 					<select

packages/docs/components/demos/index.tsx

@@ -26,7 +26,7 @@ import {
 	effectsGlowDemo,
 	effectsGrayscaleDemo,
 	effectsHalftoneDemo,
-	effectsHalftoneGradientDemo,
+	effectsHalftoneLinearGradientDemo,
 	effectsHueDemo,
 	effectsInvertDemo,
 	effectsLightLeakDemo,
@@ -112,7 +112,7 @@ const demos: DemoType[] = [
 	effectsChromaticAberrationDemo,
 	effectsWaveDemo,
 	effectsHalftoneDemo,
-	effectsHalftoneGradientDemo,
+	effectsHalftoneLinearGradientDemo,
 	effectsStarburstDemo,
 	effectsLightLeakDemo,
 	arrowDemo,

packages/docs/components/demos/types.ts

@@ -7,7 +7,7 @@ import {EffectsContrastPreview} from '../effects/effects-contrast-preview';
 import {EffectsDuotonePreview} from '../effects/effects-duotone-preview';
 import {EffectsGlowPreview} from '../effects/effects-glow-preview';
 import {EffectsGrayscalePreview} from '../effects/effects-grayscale-preview';
-import {EffectsHalftoneGradientPreview} from '../effects/effects-halftone-gradient-preview';
+import {EffectsHalftoneLinearGradientPreview} from '../effects/effects-halftone-linear-gradient-preview';
 import {EffectsHalftonePreview} from '../effects/effects-halftone-preview';
 import {EffectsHuePreview} from '../effects/effects-hue-preview';
 import {EffectsInvertPreview} from '../effects/effects-invert-preview';
@@ -110,6 +110,13 @@ export type Option = {
 			type: 'color';
 			default: string;
 	  }
+	| {
+			type: 'uv-coordinate';
+			min: number;
+			default: readonly [number, number];
+			max: number;
+			step: number;
+	  }
 );
 
 export type DemoType = {
@@ -2096,13 +2103,13 @@ export const effectsHalftoneDemo: DemoType = {
 	],
 };
 
-export const effectsHalftoneGradientDemo: DemoType = {
-	comp: EffectsHalftoneGradientPreview,
+export const effectsHalftoneLinearGradientDemo: DemoType = {
+	comp: EffectsHalftoneLinearGradientPreview,
 	compHeight: 720,
 	compWidth: 1280,
 	durationInFrames: 1,
 	fps: 30,
-	id: 'effects-halftone-gradient',
+	id: 'effects-halftone-linear-gradient',
 	autoPlay: false,
 	controls: false,
 	logLevel: 'info',
@@ -2125,6 +2132,24 @@ export const effectsHalftoneGradientDemo: DemoType = {
 			default: 40,
 			optional: 'no',
 		},
+		{
+			name: 'firstStopPosition',
+			type: 'uv-coordinate',
+			min: 0,
+			max: 1,
+			step: 0.01,
+			default: [0, 0.5],
+			optional: 'no',
+		},
+		{
+			name: 'secondStopPosition',
+			type: 'uv-coordinate',
+			min: 0,
+			max: 1,
+			step: 0.01,
+			default: [1, 0.5],
+			optional: 'no',
+		},
 		{
 			name: 'gridSize',
 			type: 'numeric',
@@ -2134,15 +2159,6 @@ export const effectsHalftoneGradientDemo: DemoType = {
 			default: 24,
 			optional: 'no',
 		},
-		{
-			name: 'rotation',
-			type: 'numeric',
-			min: -180,
-			max: 180,
-			step: 1,
-			default: 0,
-			optional: 'no',
-		},
 		{
 			name: 'colorMode',
 			type: 'enum',
@@ -2153,7 +2169,7 @@ export const effectsHalftoneGradientDemo: DemoType = {
 		{
 			name: 'dotColor',
 			type: 'color',
-			default: '#ffffff',
+			default: '#0b84f3',
 			optional: 'no',
 			showIf: {
 				option: 'colorMode',

…ts/effects-halftone-gradient-preview.tsx …cts-halftone-linear-gradient-preview.tsxpackages/docs/components/effects/effects-halftone-gradient-preview.tsx renamed to packages/docs/components/effects/effects-halftone-linear-gradient-preview.tsx packages/docs/components/effects/effects-halftone-gradient-preview.tsx renamed to packages/docs/components/effects/effects-halftone-linear-gradient-preview.tsx

@@ -1,5 +1,8 @@
-import type {HalftoneGradientColorMode} from '@remotion/effects/halftone-gradient';
-import {halftoneGradient} from '@remotion/effects/halftone-gradient';
+import type {
+	HalftoneLinearGradientColorMode,
+	UvCoordinate,
+} from '@remotion/effects/halftone-linear-gradient';
+import {halftoneLinearGradient} from '@remotion/effects/halftone-linear-gradient';
 import React from 'react';
 import {CanvasImage} from 'remotion';
 import {EFFECTS_PREVIEW_IMAGE_SRC} from './effects-preview-image';
@@ -9,18 +12,20 @@ const fullSize: React.CSSProperties = {
 	height: '100%',
 };
 
-export const EffectsHalftoneGradientPreview: React.FC<{
+export const EffectsHalftoneLinearGradientPreview: React.FC<{
 	readonly firstStopDotSize: number;
 	readonly secondStopDotSize: number;
+	readonly firstStopPosition: UvCoordinate;
+	readonly secondStopPosition: UvCoordinate;
 	readonly gridSize: number;
-	readonly rotation: number;
-	readonly colorMode: HalftoneGradientColorMode;
+	readonly colorMode: HalftoneLinearGradientColorMode;
 	readonly dotColor: string;
 }> = ({
 	firstStopDotSize,
 	secondStopDotSize,
+	firstStopPosition,
+	secondStopPosition,
 	gridSize,
-	rotation,
 	colorMode,
 	dotColor,
 }) => {
@@ -37,11 +42,12 @@ export const EffectsHalftoneGradientPreview: React.FC<{
 			fit="cover"
 			style={fullSize}
 			effects={[
-				halftoneGradient({
+				halftoneLinearGradient({
 					firstStopDotSize,
 					secondStopDotSize,
+					firstStopPosition,
+					secondStopPosition,
 					gridSize,
-					rotation,
 					...colorParams,
 				}),
 			]}

…/docs/docs/effects/halftone-gradient.mdx …ocs/effects/halftone-linear-gradient.mdxpackages/docs/docs/effects/halftone-gradient.mdx renamed to packages/docs/docs/effects/halftone-linear-gradient.mdx packages/docs/docs/effects/halftone-gradient.mdx renamed to packages/docs/docs/effects/halftone-linear-gradient.mdx

@@ -1,12 +1,12 @@
 ---
-image: /generated/articles-docs-effects-halftone-gradient.png
-slug: /effects/halftone-gradient
-title: halftoneGradient()
-sidebar_label: halftoneGradient()
+image: /generated/articles-docs-effects-halftone-linear-gradient.png
+slug: /effects/halftone-linear-gradient
+title: halftoneLinearGradient()
+sidebar_label: halftoneLinearGradient()
 crumb: '@remotion/effects'
 ---
 
-# halftoneGradient()<AvailableFrom v="4.0.468" />
+# halftoneLinearGradient()<AvailableFrom v="4.0.468" />
 
 _Part of the [`@remotion/effects`](/docs/effects/api) package._
 
@@ -16,27 +16,28 @@ Use it for dot-pattern wipes, overlays, and backgrounds on canvas-based componen
 
 ## Preview
 
-<Demo type="effects-halftone-gradient" />
+<Demo type="effects-halftone-linear-gradient" />
 
 ## Example
 
 ```tsx twoslash title="MyComp.tsx"
 import {AbsoluteFill} from 'remotion';
 import {Video} from '@remotion/media';
-import {halftoneGradient} from '@remotion/effects/halftone-gradient';
+import {halftoneLinearGradient} from '@remotion/effects/halftone-linear-gradient';
 
 export const MyComp: React.FC = () => {
   return (
     <AbsoluteFill>
       <Video
         src="https://remotion.media/video.mp4"
         effects={[
-          halftoneGradient({
+          halftoneLinearGradient({
             firstStopDotSize: 0,
             secondStopDotSize: 42,
+            firstStopPosition: [0, 0.5],
+            secondStopPosition: [1, 0.5],
             gridSize: 24,
-            rotation: 20,
-            dotColor: '#111111',
+            dotColor: '#0b84f3',
           }),
         ]}
       />
@@ -50,19 +51,20 @@ To use colors from the previous effect in the chain, set `colorMode` to `'source
 ```tsx twoslash title="MyComp.tsx"
 import {AbsoluteFill} from 'remotion';
 import {Video} from '@remotion/media';
-import {halftoneGradient} from '@remotion/effects/halftone-gradient';
+import {halftoneLinearGradient} from '@remotion/effects/halftone-linear-gradient';
 
 export const MyComp: React.FC = () => {
   return (
     <AbsoluteFill>
       <Video
         src="https://remotion.media/video.mp4"
         effects={[
-          halftoneGradient({
+          halftoneLinearGradient({
             firstStopDotSize: 8,
             secondStopDotSize: 44,
+            firstStopPosition: [0.2, 0],
+            secondStopPosition: [0.8, 1],
             gridSize: 24,
-            rotation: -25,
             colorMode: 'source',
           }),
         ]}
@@ -74,7 +76,7 @@ export const MyComp: React.FC = () => {
 
 ## API
 
-Pass an object with the following properties. You can also call `halftoneGradient()` without arguments.
+Pass an object with the following properties. You can also call `halftoneLinearGradient()` without arguments.
 
 ### `firstStopDotSize?`
 
@@ -88,13 +90,21 @@ Dot diameter in pixels on the opposite side of the gradient. Defaults to `40`. M
 
 Set both dot sizes to `0` for no coverage. Set both large enough to overlap neighboring cells for full coverage.
 
-### `gridSize?`
+### `firstStopPosition?`
 
-Distance between adjacent dot centers in pixels. Defaults to `24`. Must be greater than `0`.
+UV coordinate where `firstStopDotSize` is reached. Defaults to `[0, 0.5]`.
+
+Pass a `[number, number]` tuple.
+
+### `secondStopPosition?`
 
-### `rotation?`
+UV coordinate where `secondStopDotSize` is reached. Defaults to `[1, 0.5]`.
 
-Rotation of the dot grid and linear gradient in degrees. Defaults to `0`.
+Pass a `[number, number]` tuple.
+
+### `gridSize?`
+
+Distance between adjacent dot centers in pixels. Defaults to `24`. Must be greater than `0`.
 
 ### `colorMode?`
 
@@ -116,11 +126,11 @@ When `true`, the effect is skipped. Defaults to `false`.
 
 ## Requirements
 
-`halftoneGradient()` uses a WebGL2 backend. During renders, enable WebGL via [`Config.setChromiumOpenGlRenderer()`](/docs/config#setchromiumopenglrenderer) (for example `'angle'`). See [Using WebGL during renders](/docs/remotion/html-in-canvas#using-webgl-during-renders).
+`halftoneLinearGradient()` uses a WebGL2 backend. During renders, enable WebGL via [`Config.setChromiumOpenGlRenderer()`](/docs/config#setchromiumopenglrenderer) (for example `'angle'`). See [Using WebGL during renders](/docs/remotion/html-in-canvas#using-webgl-during-renders).
 
 ## See also
 
 - [`@remotion/effects`](/docs/effects/api)
 - [`halftone()`](/docs/effects/halftone)
 - [HTML-in-canvas guide](/docs/html-in-canvas)
-- [Source code for this effect](https://github.com/remotion-dev/remotion/blob/main/packages/effects/src/halftone-gradient.ts)
+- [Source code for this effect](https://github.com/remotion-dev/remotion/blob/main/packages/effects/src/halftone-linear-gradient.ts)