@remotion/promo-pages 4.0.362 → 4.0.364

package/dist/components/homepage/Demo/Comp.js

@@ -0,0 +1,71 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useMemo, useState } from 'react';
+import { AbsoluteFill, Html5Audio, prefetch, staticFile, } from 'remotion';
+import { Cards } from './Cards';
+export const getDataAndProps = async () => {
+    const location = (await fetch('https://bugs-git-homepage-player-remotion.vercel.app/api/location').then((res) => res.json()));
+    const trending = await fetch(`https://bugs.remotion.dev/trending?lat=${location.latitude}&lng=${location.longitude}&country=${location.country}`)
+        .then((res) => res.json())
+        .then((data) => {
+        return {
+            repos: data.trending.repos.slice(0, 3),
+            date: data.trending.dateFetched,
+            temperatureInCelsius: Math.round(data.temperature),
+            countryLabel: data.countryLabel,
+            countryPaths: data.countryPaths,
+        };
+    });
+    return { trending, location };
+};
+export const calculateMetadata = ({ props, }) => {
+    return {
+        durationInFrames: 120,
+        fps: 30,
+        height: 360,
+        width: 640,
+        props: {
+            ...props,
+        },
+    };
+};
+const fireAudio = staticFile('fire.mp3');
+const partyHornAudio = staticFile('partyhorn.mp3');
+const sadAudio = staticFile('sad.mp3');
+export const HomepageVideoComp = ({ theme, onToggle, cardOrder, updateCardOrder, location, trending, emojiIndex, onClickLeft, onClickRight, }) => {
+    const [rerenders, setRerenders] = useState(0);
+    const onUpdate = useCallback((newIndices) => {
+        setRerenders(rerenders + 1);
+        updateCardOrder(newIndices);
+    }, [rerenders, updateCardOrder]);
+    const emoji = useMemo(() => {
+        if ((emojiIndex + 10000 * 3) % 3 === 1) {
+            return 'melting';
+        }
+        if ((emojiIndex + 10000 * 3) % 3 === 2) {
+            return 'fire';
+        }
+        return 'partying-face';
+    }, [emojiIndex]);
+    const audioSrc = useMemo(() => {
+        if (emoji === 'fire') {
+            return fireAudio;
+        }
+        if (emoji === 'partying-face') {
+            return partyHornAudio;
+        }
+        return sadAudio;
+    }, [emoji]);
+    useEffect(() => {
+        const a = prefetch(fireAudio);
+        const b = prefetch(partyHornAudio);
+        const c = prefetch(sadAudio);
+        return () => {
+            a.free();
+            b.free();
+            c.free();
+        };
+    }, []);
+    return (_jsxs(AbsoluteFill, { style: {
+            backgroundColor: theme === 'dark' ? '#222' : '#fafafa',
+        }, children: [_jsx(Cards, { onUpdate: onUpdate, indices: cardOrder, theme: theme, location: location, trending: trending, onToggle: onToggle, onLeft: onClickLeft, onRight: onClickRight, emojiName: emoji }, rerenders), audioSrc ? _jsx(Html5Audio, { src: audioSrc }) : null] }));
+};

package/dist/components/homepage/Demo/CurrentCountry.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+export declare const CurrentCountry: React.FC<{
+    readonly theme: 'dark' | 'light';
+    readonly countryPaths: {
+        d: string;
+        class: string;
+    }[] | null;
+    readonly countryLabel: string | null;
+}>;

package/dist/components/homepage/Demo/CurrentCountry.js

@@ -0,0 +1,48 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { getBoundingBox, resetPath } from '@remotion/paths';
+import { AbsoluteFill, interpolate, spring, useCurrentFrame, useVideoConfig, } from 'remotion';
+export const CurrentCountry = ({ theme, countryPaths, countryLabel }) => {
+    const { fps } = useVideoConfig();
+    const frame = useCurrentFrame();
+    if (!countryPaths) {
+        return null;
+    }
+    const joined = countryPaths.map((p) => p.d).join(' ');
+    const reset = resetPath(joined);
+    const boundingBox = getBoundingBox(reset);
+    const progress = spring({
+        fps,
+        frame,
+        delay: 10,
+    });
+    return (_jsxs(AbsoluteFill, { style: { overflow: 'hidden' }, children: [_jsx(AbsoluteFill, { style: {
+                    transform: `scale(${progress})`,
+                }, children: _jsx("svg", { viewBox: boundingBox.viewBox, style: {
+                        scale: '0.8',
+                    }, children: _jsx("path", { fill: theme === 'light' ? '#bbb' : '#222', d: reset }) }) }), _jsxs(AbsoluteFill, { style: {
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                }, children: [_jsx("div", { style: {
+                            color: '#0b84f3',
+                            fontFamily: 'GTPlanar',
+                            fontWeight: '500',
+                            fontSize: 13,
+                            textAlign: 'center',
+                            marginTop: -10,
+                            width: '100%',
+                            paddingLeft: 20,
+                            paddingRight: 20,
+                            transform: 'translateX(' + interpolate(progress, [0, 1], [-100, 0]) + '%)',
+                        }, children: "Your country" }), _jsx("div", { style: {
+                            lineHeight: 1.1,
+                            fontFamily: 'GTPlanar',
+                            textAlign: 'center',
+                            fontWeight: '500',
+                            fontSize: 30,
+                            color: theme === 'dark' ? 'white' : 'black',
+                            width: '100%',
+                            paddingLeft: 20,
+                            paddingRight: 20,
+                            transform: 'translateX(' + interpolate(progress, [0, 1], [100, 0]) + '%)',
+                        }, children: countryLabel })] })] }));
+};

package/dist/components/homepage/Demo/DemoError.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const DemoError: React.FC;

package/dist/components/homepage/Demo/DemoError.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { FONTS, RED } from '../layout/colors';
+export const DemoError = () => {
+    return (_jsx("div", { style: {
+            color: RED,
+            fontFamily: FONTS.GTPLANAR,
+            position: 'absolute',
+            paddingTop: 15,
+        }, children: "Sorry, we limit the amount of renders possible per day on this page. Come back tomorrow!" }));
+};

package/dist/components/homepage/Demo/DemoErrorIcon.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const DemoErrorIcon: React.FC;

package/dist/components/homepage/Demo/DemoErrorIcon.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { RED } from '../layout/colors';
+export const DemoErrorIcon = () => {
+    return (_jsx("div", { style: {
+            height: 26,
+            width: 26,
+            borderRadius: 13,
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            animation: 'jump 0.2s ease-out',
+        }, children: _jsx("svg", { style: {
+                flexShrink: 0,
+                width: 26,
+            }, xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 512 512", children: _jsx("path", { fill: RED, d: "M17.1 292c-12.9-22.3-12.9-49.7 0-72L105.4 67.1c12.9-22.3 36.6-36 62.4-36l176.6 0c25.7 0 49.5 13.7 62.4 36L494.9 220c12.9 22.3 12.9 49.7 0 72L406.6 444.9c-12.9 22.3-36.6 36-62.4 36l-176.6 0c-25.7 0-49.5-13.7-62.4-36L17.1 292zM256 128c-13.3 0-24 10.7-24 24l0 112c0 13.3 10.7 24 24 24s24-10.7 24-24l0-112c0-13.3-10.7-24-24-24zm32 224a32 32 0 1 0 -64 0 32 32 0 1 0 64 0z" }) }) }));
+};

package/dist/components/homepage/Demo/DemoRender.d.ts

@@ -0,0 +1,102 @@
+import React from 'react';
+import { z } from 'zod';
+declare const data: z.ZodObject<{
+    trending: z.ZodObject<{
+        repos: z.ZodArray<z.ZodString, "many">;
+        date: z.ZodUnion<[z.ZodString, z.ZodNumber]>;
+        temperatureInCelsius: z.ZodNumber;
+        countryLabel: z.ZodString;
+        countryPaths: z.ZodArray<z.ZodObject<{
+            d: z.ZodString;
+            class: z.ZodString;
+        }, "strip", z.ZodTypeAny, {
+            d: string;
+            class: string;
+        }, {
+            d: string;
+            class: string;
+        }>, "many">;
+    }, "strip", z.ZodTypeAny, {
+        countryPaths: {
+            d: string;
+            class: string;
+        }[];
+        countryLabel: string;
+        temperatureInCelsius: number;
+        date: string | number;
+        repos: string[];
+    }, {
+        countryPaths: {
+            d: string;
+            class: string;
+        }[];
+        countryLabel: string;
+        temperatureInCelsius: number;
+        date: string | number;
+        repos: string[];
+    }>;
+    location: z.ZodObject<{
+        country: z.ZodString;
+        city: z.ZodString;
+        latitude: z.ZodUnion<[z.ZodNumber, z.ZodString]>;
+        longitude: z.ZodUnion<[z.ZodNumber, z.ZodString]>;
+    }, "strip", z.ZodTypeAny, {
+        city: string;
+        country: string;
+        latitude: string | number;
+        longitude: string | number;
+    }, {
+        city: string;
+        country: string;
+        latitude: string | number;
+        longitude: string | number;
+    }>;
+    emojiIndex: z.ZodNumber;
+    theme: z.ZodEnum<["light", "dark"]>;
+    cardOrder: z.ZodArray<z.ZodNumber, "many">;
+}, "strip", z.ZodTypeAny, {
+    theme: "light" | "dark";
+    emojiIndex: number;
+    trending: {
+        countryPaths: {
+            d: string;
+            class: string;
+        }[];
+        countryLabel: string;
+        temperatureInCelsius: number;
+        date: string | number;
+        repos: string[];
+    };
+    location: {
+        city: string;
+        country: string;
+        latitude: string | number;
+        longitude: string | number;
+    };
+    cardOrder: number[];
+}, {
+    theme: "light" | "dark";
+    emojiIndex: number;
+    trending: {
+        countryPaths: {
+            d: string;
+            class: string;
+        }[];
+        countryLabel: string;
+        temperatureInCelsius: number;
+        date: string | number;
+        repos: string[];
+    };
+    location: {
+        city: string;
+        country: string;
+        latitude: string | number;
+        longitude: string | number;
+    };
+    cardOrder: number[];
+}>;
+export declare const RenderButton: React.FC<{
+    readonly renderData: z.infer<typeof data> | null;
+    readonly onError: () => void;
+}>;
+export {};

package/dist/components/homepage/Demo/DemoRender.js

@@ -0,0 +1,95 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import React, { useCallback } from 'react';
+import { z } from 'zod';
+import { PALETTE } from '../layout/colors';
+import { DemoErrorIcon } from './DemoErrorIcon';
+import { DoneCheckmark } from './DoneCheckmark';
+import { Progress } from './Progress';
+import { Spinner } from './Spinner';
+const countryPath = z.object({
+    d: z.string(),
+    class: z.string(),
+});
+const remoteData = z.object({
+    repos: z.array(z.string()),
+    date: z.string().or(z.number()),
+    temperatureInCelsius: z.number(),
+    countryLabel: z.string(),
+    countryPaths: z.array(countryPath),
+});
+const location = z.object({
+    country: z.string(),
+    city: z.string(),
+    latitude: z.number().or(z.string()),
+    longitude: z.number().or(z.string()),
+});
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+const data = z.object({
+    trending: remoteData,
+    location,
+    emojiIndex: z.number(),
+    theme: z.enum(['light', 'dark']),
+    cardOrder: z.array(z.number()),
+});
+const style = {
+    appearance: 'none',
+    border: 'none',
+    outline: 'none',
+    backgroundColor: 'transparent',
+    cursor: 'pointer',
+    width: 55,
+    height: 50,
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+};
+export const RenderButton = ({ renderData, onError }) => {
+    const [state, setState] = React.useState({
+        type: 'idle',
+    });
+    const triggerRender = useCallback(async () => {
+        if (renderData === null) {
+            return;
+        }
+        try {
+            setState({ type: 'invoking' });
+            const { renderId, bucketName } = await (await fetch('https://bugs.remotion.dev/render', {
+                method: 'post',
+                headers: { 'content-type': 'application/json' },
+                body: JSON.stringify(renderData),
+            })).json();
+            setState({ type: 'progress', progress: 0 });
+            let done = false;
+            while (!done) {
+                const progress = (await (await fetch('https://bugs.remotion.dev/progress', {
+                    method: 'post',
+                    headers: { 'content-type': 'application/json' },
+                    body: JSON.stringify({ renderId, bucketName }),
+                })).json());
+                setState({
+                    type: 'progress',
+                    progress: progress.overallProgress,
+                });
+                if (progress.outputFile) {
+                    done = true;
+                    const a = document.createElement('a');
+                    a.href = progress.outputFile;
+                    a.download = 'remotion.dev.mp4';
+                    a.click();
+                    setState({ type: 'done' });
+                }
+                if (progress.fatalErrorEncountered) {
+                    done = true;
+                }
+            }
+        }
+        catch (_a) {
+            setState({ type: 'error' });
+            onError();
+        }
+    }, [onError, renderData]);
+    return (_jsx("button", { type: "button", onClick: triggerRender, style: style, disabled: !renderData || state.type !== 'idle', children: state.type === 'error' ? (_jsx(DemoErrorIcon, {})) : state.type === 'done' ? (_jsx(DoneCheckmark, {})) : state.type === 'progress' ? (_jsx(Progress, { progress: state.progress })) : state.type === 'invoking' ? (_jsx(Spinner, { size: 20, duration: 1 })) : (_jsx("svg", { style: {
+                width: 18,
+                opacity: renderData ? 1 : 0.5,
+            }, xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 384 512", children: _jsx("path", { fill: PALETTE.TEXT_COLOR, d: "M214.6 342.6L192 365.3l-22.6-22.6-128-128L18.7 192 64 146.7l22.6 22.6L160 242.7 160 64l0-32 64 0 0 32 0 178.7 73.4-73.4L320 146.7 365.3 192l-22.6 22.6-128 128zM32 416l320 0 32 0 0 64-32 0L32 480 0 480l0-64 32 0z" }) })) }));
+};

package/dist/components/homepage/Demo/DigitWheel.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+export declare const NUM_WIDTH = 36;
+export declare const Wheel: React.FC<{
+    readonly delay: number;
+    readonly digits: number[];
+    readonly renderDigit: (i: number) => React.ReactNode;
+    readonly isLeadingDigit: boolean;
+    readonly isNegative: boolean[];
+}>;

package/dist/components/homepage/Demo/DigitWheel.js

@@ -0,0 +1,94 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { AbsoluteFill, interpolate, spring, useCurrentFrame, useVideoConfig, } from 'remotion';
+import { Minus } from './Minus';
+const DURATION = 25;
+const items = 10;
+export const NUM_WIDTH = 36;
+export const Wheel = ({ delay, digits, renderDigit, isLeadingDigit, isNegative }) => {
+    const frame = useCurrentFrame();
+    const { fps } = useVideoConfig();
+    const singleDur = DURATION;
+    const progressesMaker = (springConfig, durationInFrames) => new Array(digits.length - 1).fill(true).map((_, i) => {
+        const current = digits[i];
+        const next = digits[i + 1];
+        if (current === next) {
+            return 1;
+        }
+        return spring({
+            fps,
+            frame,
+            config: springConfig,
+            durationInFrames,
+            delay: i * 50 + delay,
+        });
+    });
+    const progresses = progressesMaker({
+        mass: 0.7,
+        damping: 12,
+    }, singleDur);
+    const softProgresses = progressesMaker({
+        damping: 200,
+    }, singleDur / 2);
+    const rotations = digits.map((d) => 1 / items + d / 10);
+    const offsets = rotations.map((r, i) => {
+        const next = rotations[i + 1];
+        if (next === undefined) {
+            return 0;
+        }
+        return next - r;
+    });
+    const opacity = isLeadingDigit
+        ? interpolate(softProgresses.reduce((a, b) => a + b, 0), new Array(digits.length).fill(true).map((_, i) => i), digits.map((digit) => (digit === 0 ? 0 : 1)))
+        : 1;
+    const minusSignOpacity = isLeadingDigit
+        ? interpolate(softProgresses.reduce((a, b) => a + b, 0), new Array(digits.length).fill(true).map((_, i) => i), isNegative.map((negative) => (negative ? 1 : 0)))
+        : 1;
+    const minusSignMarginLeft = interpolate(minusSignOpacity, [0, 1], [10, 0]);
+    const shiftLeft = isLeadingDigit
+        ? interpolate(softProgresses.reduce((a, b) => a + b, 0), new Array(digits.length).fill(true).map((_, i) => i), digits.map((digit) => (digit === 0 ? -40 : 0)))
+        : 1;
+    const rotation = progresses
+        .map((p, i) => {
+        return p * offsets[i];
+    })
+        .reduce((a, b) => a + b, 0) + rotations[0];
+    return (_jsxs("div", { style: {
+            position: 'relative',
+            width: NUM_WIDTH,
+            display: 'inline-block',
+            height: 80,
+            marginLeft: shiftLeft,
+        }, children: [isLeadingDigit ? (_jsx(Minus, { minusSignOpacity: minusSignOpacity, leftOffset: shiftLeft + minusSignMarginLeft })) : null, _jsx(AbsoluteFill, { style: {
+                    perspective: 5000,
+                    maskImage: `linear-gradient(to bottom, transparent 0%, #000 28%, #000 80%, transparent 100%)`,
+                    WebkitMaskImage: `linear-gradient(to bottom, transparent 0%, #000 28%, #000 80%, transparent 100%)`,
+                }, children: new Array(items).fill(true).map((_, i) => {
+                    const index = i / items + rotation;
+                    const z = Math.cos(index * -Math.PI * 2) * 120;
+                    const y = Math.sin(index * Math.PI * 2) * -120;
+                    const r = interpolate(index, [0, 1], [0, Math.PI * 2]);
+                    return (_jsx(AbsoluteFill
+                    // eslint-disable-next-line react/no-array-index-key
+                    , { style: {
+                            justifyContent: 'center',
+                            alignItems: 'center',
+                            fontSize: 60,
+                            fontVariationSettings: `"wght" 400`,
+                            transform: `translateZ(${z}px) translateY(${y}px) rotateX(${r}deg)`,
+                            backfaceVisibility: 'hidden',
+                            perspective: 1000,
+                        }, children: _jsx("div", { style: {
+                                transform: `rotateX(-${r}rad)`,
+                                backfaceVisibility: 'hidden',
+                                display: 'flex',
+                                flexDirection: 'row',
+                                alignItems: 'center',
+                                justifyContent: 'center',
+                                opacity,
+                            }, children: _jsx("div", { style: {
+                                    lineHeight: 1,
+                                    display: 'inline',
+                                    fontFeatureSettings: "'ss03' on",
+                                }, children: renderDigit(i) }) }) }, i));
+                }) })] }));
+};

package/dist/components/homepage/Demo/DisplayedEmoji.d.ts

@@ -0,0 +1,5 @@
+import type { EmojiName } from '@remotion/animated-emoji';
+import React from 'react';
+export declare const DisplayedEmoji: React.FC<{
+    readonly emoji: EmojiName;
+}>;

package/dist/components/homepage/Demo/DisplayedEmoji.js

@@ -0,0 +1,64 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useMemo, useState } from 'react';
+import { cancelRender, useDelayRender, useVideoConfig } from 'remotion';
+export const DisplayedEmoji = ({ emoji }) => {
+    const [data, setData] = useState(null);
+    const { durationInFrames, fps } = useVideoConfig();
+    const [browser, setBrowser] = useState(typeof document !== 'undefined');
+    const { delayRender, continueRender } = useDelayRender();
+    const src = useMemo(() => {
+        if (emoji === 'melting') {
+            return 'https://fonts.gstatic.com/s/e/notoemoji/latest/1fae0/lottie.json';
+        }
+        if (emoji === 'partying-face') {
+            return 'https://fonts.gstatic.com/s/e/notoemoji/latest/1f973/lottie.json';
+        }
+        if (emoji === 'fire') {
+            return 'https://fonts.gstatic.com/s/e/notoemoji/latest/1f525/lottie.json';
+        }
+        throw new Error('Unknown emoji');
+    }, [emoji]);
+    const [handle] = useState(() => delayRender());
+    useEffect(() => {
+        Promise.all([
+            fetch(src).then((res) => res.json()),
+            import('@remotion/lottie').then(({ Lottie, getLottieMetadata }) => ({
+                Lottie,
+                getLottieMetadata,
+            })),
+        ])
+            .then(([json, { Lottie, getLottieMetadata }]) => {
+            var _a;
+            setData({
+                Lottie,
+                duration: (_a = getLottieMetadata(json)) === null || _a === void 0 ? void 0 : _a.durationInSeconds,
+                data: json,
+            });
+            continueRender(handle);
+        })
+            .catch((err) => {
+            cancelRender(err);
+        });
+    }, [handle, src, continueRender]);
+    useEffect(() => {
+        if (typeof document !== 'undefined') {
+            setBrowser(true);
+        }
+    }, []);
+    if (!browser) {
+        return null;
+    }
+    if (!data) {
+        return null;
+    }
+    const animDurtion = data.duration;
+    const ratio = durationInFrames / fps / animDurtion;
+    const closestInteger = ratio;
+    const closestRatio = closestInteger / ratio;
+    return (_jsx(data.Lottie, { style: {
+            height: 100,
+            width: '100%',
+            display: 'flex',
+            justifyContent: 'center',
+        }, loop: true, animationData: data.data, playbackRate: closestRatio }));
+};

package/dist/components/homepage/Demo/DoneCheckmark.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const DoneCheckmark: React.FC;

package/dist/components/homepage/Demo/DoneCheckmark.js

@@ -0,0 +1,20 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { PALETTE } from '../layout/colors';
+export const DoneCheckmark = () => {
+    return (_jsx("div", { style: {
+            backgroundColor: PALETTE.BRAND,
+            height: 26,
+            width: 26,
+            borderRadius: 13,
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            animation: 'jump 0.2s ease-out',
+        }, children: _jsxs("svg", { viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", style: {
+                flexShrink: 0,
+                width: 26,
+            }, children: [_jsx("circle", { cx: "10", cy: "10", r: "10", fill: "#0B84F3" }), _jsx("path", { d: "M14.7908 7.20505C15.0697 7.47844 15.0697 7.92243 14.7908 8.19583L9.07711 13.795C8.79813 14.0683 8.34505 14.0683 8.06606 13.795L5.20924 10.9954C4.93025 10.722 4.93025 10.278 5.20924 10.0046C5.48823 9.73121 5.9413 9.73121 6.22029 10.0046L8.5727 12.3077L13.7819 7.20505C14.0609 6.93165 14.514 6.93165 14.793 7.20505H14.7908Z", fill: "white", style: {
+                        transform: 'scale(1.2)',
+                        transformOrigin: 'center',
+                    } })] }) }));
+};

package/dist/components/homepage/Demo/DownloadNudge.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const DownloadNudge: React.FC;

package/dist/components/homepage/Demo/DownloadNudge.js

@@ -0,0 +1,27 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { FONTS } from '../layout/colors';
+const origWidth = 77;
+const scale = 0.4;
+const Icon = () => {
+    return (_jsx("svg", { style: {
+            width: origWidth * scale,
+        }, viewBox: "0 0 77 160", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: _jsx("path", { d: "M5 154.5C51 121 79 81 69 5", stroke: "currentColor", strokeWidth: "8", strokeLinecap: "round" }) }));
+};
+export const DownloadNudge = () => {
+    return (_jsx("div", { style: {
+            position: 'relative',
+            flexDirection: 'row',
+            display: 'flex',
+            justifyContent: 'flex-end',
+            textAlign: 'right',
+            paddingRight: 22,
+            paddingTop: 20,
+        }, children: _jsxs("div", { children: [_jsx(Icon, {}), _jsxs("div", { style: {
+                        fontFamily: FONTS.GTPLANAR,
+                        fontSize: 15,
+                        width: 280,
+                        position: 'absolute',
+                        right: 70,
+                        top: 60,
+                    }, children: ["Export the video using", _jsx("br", {}), ' ', _jsx("a", { href: "/lambda", className: "bluelink", children: "Remotion Lambda" }), "."] })] }) }));
+};

package/dist/components/homepage/Demo/DragAndDropNudge.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+export declare const Icon: React.FC;
+export declare const DragAndDropNudge: React.FC;

package/dist/components/homepage/Demo/DragAndDropNudge.js

@@ -0,0 +1,26 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { FONTS, PALETTE } from '../layout/colors';
+const origWidth = 37;
+const scale = 0.4;
+export const Icon = () => {
+    return (_jsx("svg", { style: {
+            width: origWidth * scale,
+            overflow: 'visible',
+        }, viewBox: "0 0 37 59", fill: "none", children: _jsx("path", { d: "M5.00003 5C5.00002 36.5 16 44 32.0002 54", stroke: PALETTE.TEXT_COLOR, strokeWidth: "8", strokeLinecap: "round" }) }));
+};
+export const DragAndDropNudge = () => {
+    return (_jsx("div", { style: {
+            position: 'absolute',
+            flexDirection: 'row',
+            display: 'flex',
+            justifyContent: 'flex-start',
+            paddingBottom: 5,
+            marginTop: 50,
+        }, className: 'ml-4 lg:-ml-5', children: _jsxs("div", { children: [_jsx("div", { style: {
+                        fontFamily: FONTS.GTPLANAR,
+                        fontSize: 15,
+                        width: 280,
+                        paddingBottom: 8,
+                        textWrap: 'balance',
+                    }, className: '-ml-3 lg:-ml-5', children: "Drag and drop the cards to reorder them." }), _jsx(Icon, {})] }) }));
+};

package/dist/components/homepage/Demo/EmojiCard.d.ts

@@ -0,0 +1,10 @@
+import type { EmojiName } from '@remotion/animated-emoji';
+import React from 'react';
+export type EmojiCardRef = {
+    onLeft: () => void;
+    onRight: () => void;
+};
+export type EmojiCardProps = {
+    readonly emojiIndex: EmojiName;
+};
+export declare const EmojiCard: React.ForwardRefExoticComponent<EmojiCardProps & React.RefAttributes<EmojiCardRef>>;