@remotion/studio: Add effect drag-and-drop to layers

packages/docs/components/effects-demos/index.tsx

@@ -1,5 +1,9 @@
 import {useColorMode} from '@docusaurus/theme-common';
 import {Player} from '@remotion/player';
+import {
+	EFFECT_DRAG_MIME_TYPE,
+	type EffectDragData,
+} from '@remotion/studio-shared';
 import React, {useCallback, useMemo, useState} from 'react';
 import {AbsoluteFill} from 'remotion';
 import {
@@ -19,6 +23,18 @@ const container: React.CSSProperties = {
 	marginBottom: 40,
 };
 
+const dragHandle: React.CSSProperties = {
+	alignItems: 'center',
+	borderBottom: '1px solid var(--ifm-color-emphasis-300)',
+	cursor: 'grab',
+	display: 'flex',
+	fontSize: 13,
+	fontWeight: 600,
+	gap: 6,
+	padding: '8px 10px',
+	userSelect: 'none',
+};
+
 export const EffectsDemo: React.FC<{
 	readonly type: string;
 }> = ({type}) => {
@@ -37,7 +53,9 @@ export const EffectsDemo: React.FC<{
 		});
 	}, [demo.initialValues, demo.schema]);
 
-	const [state, setState] = useState<Record<string, unknown>>(() => initialState);
+	const [state, setState] = useState<Record<string, unknown>>(
+		() => initialState,
+	);
 
 	const activeFields = useMemo(() => {
 		return getActiveSchemaFields({
@@ -51,6 +69,29 @@ export const EffectsDemo: React.FC<{
 		setKey((k) => k + 1);
 	}, [initialState]);
 
+	const dragData = useMemo((): EffectDragData => {
+		return {
+			type: 'remotion-effect',
+			version: 1,
+			effect: {
+				name: demo.effectName,
+				importPath: demo.effectImportPath,
+				config: state,
+			},
+		};
+	}, [demo.effectImportPath, demo.effectName, state]);
+
+	const onDragStart = useCallback(
+		(e: React.DragEvent<HTMLDivElement>) => {
+			const serialized = JSON.stringify(dragData);
+			e.dataTransfer.effectAllowed = 'copy';
+			e.dataTransfer.setData(EFFECT_DRAG_MIME_TYPE, serialized);
+			e.dataTransfer.setData('application/json', serialized);
+			e.dataTransfer.setData('text/plain', serialized);
+		},
+		[dragData],
+	);
+
 	return (
 		<div style={container}>
 			<Player
@@ -101,6 +142,15 @@ export const EffectsDemo: React.FC<{
 				initiallyMuted
 				loop
 			/>
+			<div
+				draggable
+				onDragStart={onDragStart}
+				style={dragHandle}
+				title="Drag this effect into Remotion Studio"
+			>
+				<span aria-hidden="true">::</span>
+				<span>Drag current effect into a layer in the Studio</span>
+			</div>
 			<div className={styles.containerrow}>
 				{activeFields.map(([fieldKey, field]) => {
 					return (

packages/docs/components/effects-demos/registry.ts

@@ -79,66 +79,88 @@ export const effectsDemos: EffectsDemoType[] = [
 	{
 		...defaults,
 		id: 'effects-brightness',
+		effectName: 'brightness',
+		effectImportPath: '@remotion/effects/brightness',
 		comp: EffectsBrightnessPreview,
 		schema: brightness().definition.schema,
 	},
 	{
 		...defaults,
 		id: 'effects-contrast',
+		effectName: 'contrast',
+		effectImportPath: '@remotion/effects/contrast',
 		comp: EffectsContrastPreview,
 		schema: contrast().definition.schema,
 	},
 	{
 		...defaults,
 		id: 'effects-duotone',
+		effectName: 'duotone',
+		effectImportPath: '@remotion/effects/duotone',
 		comp: EffectsDuotonePreview,
 		schema: duotone().definition.schema,
 	},
 	{
 		...defaults,
 		id: 'effects-evolve',
+		effectName: 'evolve',
+		effectImportPath: '@remotion/effects/evolve',
 		comp: EffectsEvolvePreview,
 		schema: evolve().definition.schema,
 	},
 	{
 		...defaults,
 		id: 'effects-drop-shadow',
+		effectName: 'dropShadow',
+		effectImportPath: '@remotion/effects/drop-shadow',
 		comp: EffectsDropShadowPreview,
 		schema: dropShadow().definition.schema,
 	},
 	{
 		...defaults,
 		id: 'effects-glow',
+		effectName: 'glow',
+		effectImportPath: '@remotion/effects/glow',
 		comp: EffectsGlowPreview,
 		schema: glow().definition.schema,
 	},
 	{
 		...defaults,
 		id: 'effects-grayscale',
+		effectName: 'grayscale',
+		effectImportPath: '@remotion/effects/grayscale',
 		comp: EffectsGrayscalePreview,
 		schema: grayscale().definition.schema,
 	},
 	{
 		...defaults,
 		id: 'effects-hue',
+		effectName: 'hue',
+		effectImportPath: '@remotion/effects/hue',
 		comp: EffectsHuePreview,
 		schema: hue().definition.schema,
 	},
 	{
 		...defaults,
 		id: 'effects-invert',
+		effectName: 'invert',
+		effectImportPath: '@remotion/effects/invert',
 		comp: EffectsInvertPreview,
 		schema: invert().definition.schema,
 	},
 	{
 		...defaults,
 		id: 'effects-saturation',
+		effectName: 'saturation',
+		effectImportPath: '@remotion/effects/saturation',
 		comp: EffectsSaturationPreview,
 		schema: saturation().definition.schema,
 	},
 	{
 		...defaults,
 		id: 'effects-tint',
+		effectName: 'tint',
+		effectImportPath: '@remotion/effects/tint',
 		comp: EffectsTintPreview,
 		schema: tint({color: '#1ec8ff'}).definition.schema,
 		initialValues: {
@@ -148,84 +170,112 @@ export const effectsDemos: EffectsDemoType[] = [
 	{
 		...defaults,
 		id: 'effects-shine',
+		effectName: 'shine',
+		effectImportPath: '@remotion/effects/shine',
 		comp: EffectsShinePreview,
 		schema: shine().definition.schema,
 	},
 	{
 		...defaults,
 		id: 'effects-speckle',
+		effectName: 'speckle',
+		effectImportPath: '@remotion/effects/speckle',
 		comp: EffectsSpecklePreview,
 		schema: speckle().definition.schema,
 	},
 	{
 		...defaults,
 		id: 'effects-mirror',
+		effectName: 'mirror',
+		effectImportPath: '@remotion/effects/mirror',
 		comp: EffectsMirrorPreview,
 		schema: mirror().definition.schema,
 	},
 	{
 		...defaults,
 		id: 'effects-noise',
+		effectName: 'noise',
+		effectImportPath: '@remotion/effects/noise',
 		comp: EffectsNoisePreview,
 		schema: noise().definition.schema,
 	},
 	{
 		...defaults,
 		id: 'effects-white-noise',
+		effectName: 'whiteNoise',
+		effectImportPath: '@remotion/effects/white-noise',
 		comp: EffectsWhiteNoisePreview,
 		schema: whiteNoise().definition.schema,
 	},
 	{
 		...defaults,
 		id: 'effects-scanlines',
+		effectName: 'scanlines',
+		effectImportPath: '@remotion/effects/scanlines',
 		comp: EffectsScanlinesPreview,
 		schema: scanlines().definition.schema,
 	},
 	{
 		...defaults,
 		id: 'effects-lines',
+		effectName: 'lines',
+		effectImportPath: '@remotion/effects/lines',
 		comp: EffectsLinesPreview,
 		schema: lines().definition.schema,
 	},
 	{
 		...defaults,
 		id: 'effects-scale',
+		effectName: 'scale',
+		effectImportPath: '@remotion/effects/scale',
 		comp: EffectsScalePreview,
 		schema: scale({scale: 1}).definition.schema,
 	},
 	{
 		...defaults,
 		id: 'effects-xy-translate',
+		effectName: 'xyTranslate',
+		effectImportPath: '@remotion/effects/translate',
 		comp: EffectsXyTranslatePreview,
 		schema: xyTranslate().definition.schema,
 	},
 	{
 		...defaults,
 		id: 'effects-uv-translate',
+		effectName: 'uvTranslate',
+		effectImportPath: '@remotion/effects/translate',
 		comp: EffectsUvTranslatePreview,
 		schema: uvTranslate().definition.schema,
 	},
 	{
 		...defaults,
 		id: 'effects-barrel-distortion',
+		effectName: 'barrelDistortion',
+		effectImportPath: '@remotion/effects/barrel-distortion',
 		comp: EffectsBarrelDistortionPreview,
 		schema: barrelDistortion().definition.schema,
 	},
 	{
 		...defaults,
 		id: 'effects-fisheye',
+		effectName: 'fisheye',
+		effectImportPath: '@remotion/effects/fisheye',
 		comp: EffectsFisheyePreview,
 		schema: fisheye().definition.schema,
 	},
 	{
 		...defaults,
 		id: 'effects-vignette',
+		effectName: 'vignette',
+		effectImportPath: '@remotion/effects/vignette',
 		comp: EffectsVignettePreview,
 		schema: vignette().definition.schema,
 	},
 	{
 		...defaults,
 		id: 'effects-blur',
+		effectName: 'blur',
+		effectImportPath: '@remotion/effects/blur',
 		comp: EffectsBlurPreview,
 		schema: blur({radius: 40}).definition.schema,
 		initialValues: {
@@ -235,36 +285,48 @@ export const effectsDemos: EffectsDemoType[] = [
 	{
 		...defaults,
 		id: 'effects-chromatic-aberration',
+		effectName: 'chromaticAberration',
+		effectImportPath: '@remotion/effects/chromatic-aberration',
 		comp: EffectsChromaticAberrationPreview,
 		schema: chromaticAberration().definition.schema,
 	},
 	{
 		...defaults,
 		id: 'effects-wave',
+		effectName: 'wave',
+		effectImportPath: '@remotion/effects/wave',
 		comp: EffectsWavePreview,
 		schema: wave().definition.schema,
 	},
 	{
 		...defaults,
 		id: 'effects-halftone',
+		effectName: 'halftone',
+		effectImportPath: '@remotion/effects/halftone',
 		comp: EffectsHalftonePreview,
 		schema: halftone().definition.schema,
 	},
 	{
 		...defaults,
 		id: 'effects-halftone-linear-gradient',
+		effectName: 'halftoneLinearGradient',
+		effectImportPath: '@remotion/effects/halftone-linear-gradient',
 		comp: EffectsHalftoneLinearGradientPreview,
 		schema: halftoneLinearGradient().definition.schema,
 	},
 	{
 		...defaults,
 		id: 'effects-dot-grid',
+		effectName: 'dotGrid',
+		effectImportPath: '@remotion/effects/dot-grid',
 		comp: EffectsDotGridPreview,
 		schema: dotGrid().definition.schema,
 	},
 	{
 		...defaults,
 		id: 'effects-starburst',
+		effectName: 'starburst',
+		effectImportPath: '@remotion/starburst',
 		comp: EffectsStarburstPreview,
 		schema: starburstEffectSchema,
 		initialValues: {
@@ -274,6 +336,8 @@ export const effectsDemos: EffectsDemoType[] = [
 	{
 		...defaults,
 		id: 'effects-light-leak',
+		effectName: 'lightLeak',
+		effectImportPath: '@remotion/light-leaks',
 		comp: EffectsLightLeakPreview,
 		schema: lightLeakEffectSchema,
 	},

packages/docs/components/effects-demos/types.ts

@@ -3,6 +3,8 @@ import type {LogLevel, SequenceSchema} from 'remotion';
 
 export type EffectsDemoType = {
 	id: string;
+	effectName: string;
+	effectImportPath: string;
 	comp: React.FC;
 	schema: SequenceSchema;
 	initialValues?: Record<string, unknown>;

packages/docs/package.json

@@ -76,6 +76,7 @@
 		"@remotion/skia": "workspace:*",
 		"@remotion/starburst": "workspace:*",
 		"@remotion/studio": "workspace:*",
+		"@remotion/studio-shared": "workspace:*",
 		"@remotion/svg-3d-engine": "workspace:*",
 		"@remotion/tailwind": "workspace:*",
 		"@remotion/tailwind-v4": "workspace:*",