@remotion/promo-pages 4.0.312 → 4.0.314

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>>;

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

@@ -0,0 +1,119 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useCallback, useEffect, useImperativeHandle, useRef, } from 'react';
+import { AbsoluteFill, getRemotionEnvironment } from 'remotion';
+import { DisplayedEmoji } from './DisplayedEmoji';
+const applyTransforms = ({ ref1, ref2, ref3, transforms }) => {
+    ref1.style.transform = `translateX(${transforms[0]}%)`;
+    ref2.style.transform = `translateX(${transforms[1]}%)`;
+    ref3.style.transform = `translateX(${transforms[2]}%)`;
+};
+const waitForRaq = async () => {
+    await new Promise((resolve) => {
+        requestAnimationFrame(resolve);
+    });
+};
+const moveLeft = async ({ ref1, ref2, ref3, transforms }) => {
+    for (let i = 0; i < 20; i++) {
+        for (const idx in transforms) {
+            transforms[idx] -= 5;
+            if (transforms[idx] <= -200) {
+                transforms[idx] += 300;
+            }
+        }
+        applyTransforms({ ref1, ref2, ref3, transforms });
+        await waitForRaq();
+    }
+};
+const moveRight = async ({ ref1, ref2, ref3, transforms }) => {
+    for (let i = 0; i < 20; i++) {
+        for (const idx in transforms) {
+            transforms[idx] += 5;
+            if (transforms[idx] >= 100) {
+                transforms[idx] -= 300;
+            }
+        }
+        applyTransforms({ ref1, ref2, ref3, transforms });
+        await waitForRaq();
+    }
+};
+const emojiStyle = {
+    width: '100%',
+    position: 'absolute',
+    top: 'calc(50% - 50px)',
+};
+const EmojiCardRefFn = ({ emojiIndex }, ref) => {
+    const ref1 = useRef(null);
+    const ref2 = useRef(null);
+    const ref3 = useRef(null);
+    const transforms = useRef([-100, 0, 100]);
+    const onLeft = useCallback(() => {
+        if (!ref1.current || !ref2.current || !ref3.current) {
+            return;
+        }
+        moveLeft({
+            ref1: ref1.current,
+            ref2: ref2.current,
+            ref3: ref3.current,
+            transforms: transforms.current,
+        });
+    }, []);
+    const onRight = useCallback(() => {
+        if (!ref1.current || !ref2.current || !ref3.current) {
+            return;
+        }
+        moveRight({
+            ref1: ref1.current,
+            ref2: ref2.current,
+            ref3: ref3.current,
+            transforms: transforms.current,
+        });
+    }, []);
+    useEffect(() => {
+        if (!ref1.current || !ref2.current || !ref3.current) {
+            return;
+        }
+        applyTransforms({
+            ref1: ref1.current,
+            ref2: ref2.current,
+            ref3: ref3.current,
+            transforms: transforms.current,
+        });
+    }, []);
+    useImperativeHandle(ref, () => {
+        return {
+            onLeft,
+            onRight,
+        };
+    }, [onLeft, onRight]);
+    useEffect(() => {
+        if (!ref1.current || !ref2.current || !ref3.current) {
+            return;
+        }
+        applyTransforms({
+            ref1: ref1.current,
+            ref2: ref2.current,
+            ref3: ref3.current,
+            transforms: transforms.current,
+        });
+    }, []);
+    return (_jsxs(AbsoluteFill, { style: {
+            justifyContent: 'center',
+            alignItems: 'center',
+            overflow: 'hidden',
+        }, children: [_jsx("div", { style: {
+                    color: '#0b84f3',
+                    fontFamily: 'GTPlanar',
+                    fontWeight: '500',
+                    fontSize: 13,
+                    textAlign: 'center',
+                    position: 'absolute',
+                    marginTop: -90,
+                }, children: "Choose an emoji" }), _jsx("div", { style: {
+                    position: 'absolute',
+                    width: '100%',
+                    display: 'flex',
+                    whiteSpace: 'nowrap',
+                    height: '100%',
+                }, children: getRemotionEnvironment().isRendering ? (_jsx("div", { style: emojiStyle, children: _jsx(DisplayedEmoji, { emoji: emojiIndex }) })) : (_jsxs(_Fragment, { children: [_jsx("div", { ref: ref1, style: emojiStyle, children: _jsx(DisplayedEmoji, { emoji: 'melting' }) }), _jsx("div", { ref: ref2, style: emojiStyle, children: _jsx(DisplayedEmoji, { emoji: 'partying-face' }) }), _jsx("div", { ref: ref3, style: emojiStyle, children: _jsx(DisplayedEmoji, { emoji: 'fire' }) })] })) })] }));
+};
+export const EmojiCard = forwardRef(EmojiCardRefFn);

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

@@ -0,0 +1,5 @@
+import React from 'react';
+export declare const Minus: React.FC<{
+    readonly leftOffset: number;
+    readonly minusSignOpacity: number;
+}>;

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

@@ -0,0 +1,11 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+export const Minus = ({ leftOffset, minusSignOpacity }) => {
+    return (_jsx("div", { style: {
+            position: 'relative',
+            marginLeft: -40 - leftOffset,
+            marginTop: 5,
+            width: 40,
+            opacity: minusSignOpacity,
+            textAlign: 'right',
+        }, children: "-" }));
+};

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

@@ -0,0 +1,5 @@
+import type { PlayerRef } from '@remotion/player';
+import React from 'react';
+export declare const PlayPauseButton: React.FC<{
+    readonly playerRef: React.RefObject<PlayerRef | null>;
+}>;

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

@@ -0,0 +1,47 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import React, { useCallback, useEffect } from 'react';
+import { PALETTE } from '../layout/colors';
+import { PausedIcon, PlayingIcon } from './icons';
+const playerButtonStyle = {
+    appearance: 'none',
+    border: 'none',
+    borderRadius: 0,
+    background: 'none',
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'center',
+    paddingRight: 20,
+    paddingLeft: 20,
+    cursor: 'pointer',
+    height: 50,
+    color: PALETTE.TEXT_COLOR,
+};
+export const PlayPauseButton = ({ playerRef }) => {
+    const [playing, setPlaying] = React.useState(true);
+    useEffect(() => {
+        const { current } = playerRef;
+        if (!current) {
+            return;
+        }
+        const onPlay = () => {
+            setPlaying(true);
+        };
+        const onPause = () => {
+            setPlaying(false);
+        };
+        current.addEventListener('play', onPlay);
+        current.addEventListener('pause', onPause);
+        return () => {
+            current.removeEventListener('play', onPlay);
+            current.removeEventListener('pause', onPause);
+        };
+    }, [playerRef]);
+    const onToggle = useCallback(() => {
+        var _a;
+        (_a = playerRef.current) === null || _a === void 0 ? void 0 : _a.toggle();
+    }, [playerRef]);
+    const playPauseIconStyle = {
+        width: 15,
+    };
+    return (_jsx("button", { type: "button", style: playerButtonStyle, onClick: onToggle, children: playing ? (_jsx(PlayingIcon, { style: playPauseIconStyle })) : (_jsx(PausedIcon, { style: playPauseIconStyle })) }));
+};

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

@@ -0,0 +1,8 @@
+import type { PlayerRef } from '@remotion/player';
+import React from 'react';
+export declare const PlayerControls: React.FC<{
+    readonly playerRef: React.RefObject<PlayerRef | null>;
+    readonly durationInFrames: number;
+    readonly fps: number;
+    readonly children: React.ReactNode;
+}>;

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

@@ -0,0 +1,15 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { PALETTE } from '../layout/colors';
+import { PlayerSeekBar } from './PlayerSeekBar';
+import { PlayerVolume } from './PlayerVolume';
+import { PlayPauseButton } from './PlayPauseButton';
+import { TimeDisplay } from './TimeDisplay';
+const Separator = () => {
+    return (_jsx("div", { style: {
+            borderRight: `2px solid ${PALETTE.BOX_STROKE}`,
+            height: 50,
+        } }));
+};
+export const PlayerControls = ({ playerRef, durationInFrames, fps, children }) => {
+    return (_jsxs("div", { className: 'flex flex-row items-center bg-pane', children: [_jsx(PlayPauseButton, { playerRef: playerRef }), _jsx(Separator, {}), _jsx(PlayerVolume, { playerRef: playerRef }), _jsx(Separator, {}), _jsx("div", { style: { width: 15 } }), _jsx(TimeDisplay, { playerRef: playerRef, fps: fps }), _jsx("div", { style: { width: 15 } }), _jsx(PlayerSeekBar, { durationInFrames: durationInFrames, playerRef: playerRef, inFrame: null, outFrame: null, onSeekEnd: () => undefined, onSeekStart: () => undefined }), _jsx("div", { style: { width: 20 } }), _jsx(Separator, {}), children] }));
+};

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

@@ -0,0 +1,11 @@
+import type { PlayerRef } from '@remotion/player';
+import React from 'react';
+export declare const useHoverState: (ref: React.RefObject<HTMLDivElement | null>, hideControlsWhenPointerDoesntMove: boolean | number) => boolean;
+export declare const PlayerSeekBar: React.FC<{
+    readonly durationInFrames: number;
+    readonly onSeekStart: () => void;
+    readonly onSeekEnd: () => void;
+    readonly inFrame: number | null;
+    readonly outFrame: number | null;
+    readonly playerRef: React.RefObject<PlayerRef | null>;
+}>;

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

@@ -0,0 +1,216 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { interpolate } from 'remotion';
+import { useElementSize } from '../layout/use-el-size';
+const getFrameFromX = (clientX, durationInFrames, width) => {
+    const pos = clientX;
+    const frame = Math.round(interpolate(pos, [0, width], [0, durationInFrames - 1], {
+        extrapolateLeft: 'clamp',
+        extrapolateRight: 'clamp',
+    }));
+    return frame;
+};
+const BAR_HEIGHT = 5;
+const KNOB_SIZE = 12;
+const VERTICAL_PADDING = 4;
+const containerStyle = {
+    userSelect: 'none',
+    WebkitUserSelect: 'none',
+    paddingTop: VERTICAL_PADDING,
+    paddingBottom: VERTICAL_PADDING,
+    boxSizing: 'border-box',
+    cursor: 'pointer',
+    position: 'relative',
+    touchAction: 'none',
+    flex: 1,
+};
+const barBackground = {
+    height: BAR_HEIGHT,
+    backgroundColor: 'rgba(0, 0, 0, 0.25)',
+    width: '100%',
+    borderRadius: BAR_HEIGHT / 2,
+};
+const findBodyInWhichDivIsLocated = (div) => {
+    let current = div;
+    while (current.parentElement) {
+        current = current.parentElement;
+    }
+    return current;
+};
+export const useHoverState = (ref, hideControlsWhenPointerDoesntMove) => {
+    const [hovered, setHovered] = useState(false);
+    useEffect(() => {
+        const { current } = ref;
+        if (!current) {
+            return;
+        }
+        let hoverTimeout;
+        const addHoverTimeout = () => {
+            if (hideControlsWhenPointerDoesntMove) {
+                clearTimeout(hoverTimeout);
+                hoverTimeout = setTimeout(() => {
+                    setHovered(false);
+                }, hideControlsWhenPointerDoesntMove === true
+                    ? 3000
+                    : hideControlsWhenPointerDoesntMove);
+            }
+        };
+        const onHover = () => {
+            setHovered(true);
+            addHoverTimeout();
+        };
+        const onLeave = () => {
+            setHovered(false);
+            clearTimeout(hoverTimeout);
+        };
+        const onMove = () => {
+            setHovered(true);
+            addHoverTimeout();
+        };
+        current.addEventListener('mouseenter', onHover);
+        current.addEventListener('mouseleave', onLeave);
+        current.addEventListener('mousemove', onMove);
+        return () => {
+            current.removeEventListener('mouseenter', onHover);
+            current.removeEventListener('mouseleave', onLeave);
+            current.removeEventListener('mousemove', onMove);
+            clearTimeout(hoverTimeout);
+        };
+    }, [hideControlsWhenPointerDoesntMove, ref]);
+    return hovered;
+};
+export const PlayerSeekBar = ({ durationInFrames, onSeekEnd, onSeekStart, inFrame, outFrame, playerRef, }) => {
+    var _a;
+    const containerRef = useRef(null);
+    const barHovered = useHoverState(containerRef, false);
+    const size = useElementSize(containerRef.current);
+    const [playing, setPlaying] = useState(false);
+    const [frame, setFrame] = useState(0);
+    useEffect(() => {
+        const { current } = playerRef;
+        if (!current) {
+            return;
+        }
+        const onFrameUpdate = () => {
+            setFrame(playerRef.current.getCurrentFrame());
+        };
+        current.addEventListener('frameupdate', onFrameUpdate);
+        return () => {
+            current.removeEventListener('frameupdate', onFrameUpdate);
+        };
+    }, [playerRef]);
+    useEffect(() => {
+        const { current } = playerRef;
+        if (!current) {
+            return;
+        }
+        const onPlay = () => {
+            setPlaying(true);
+        };
+        const onPause = () => {
+            setPlaying(false);
+        };
+        current.addEventListener('play', onPlay);
+        current.addEventListener('pause', onPause);
+        return () => {
+            current.removeEventListener('play', onPlay);
+            current.removeEventListener('pause', onPause);
+        };
+    }, [playerRef]);
+    const [dragging, setDragging] = useState({
+        dragging: false,
+    });
+    const width = (_a = size === null || size === void 0 ? void 0 : size.width) !== null && _a !== void 0 ? _a : 0;
+    const onPointerDown = useCallback((e) => {
+        var _a;
+        if (e.button !== 0) {
+            return;
+        }
+        const posLeft = (_a = containerRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect().left;
+        const _frame = getFrameFromX(e.clientX - posLeft, durationInFrames, width);
+        playerRef.current.pause();
+        playerRef.current.seekTo(_frame);
+        setDragging({
+            dragging: true,
+            wasPlaying: playing,
+        });
+        onSeekStart();
+    }, [durationInFrames, width, playerRef, playing, onSeekStart]);
+    const onPointerMove = useCallback((e) => {
+        var _a;
+        if (!size) {
+            throw new Error('Player has no size');
+        }
+        if (!dragging.dragging) {
+            return;
+        }
+        const posLeft = (_a = containerRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect().left;
+        const _frame = getFrameFromX(e.clientX - posLeft, durationInFrames, size.width);
+        playerRef.current.seekTo(_frame);
+    }, [dragging.dragging, durationInFrames, playerRef, size]);
+    const onPointerUp = useCallback(() => {
+        setDragging({
+            dragging: false,
+        });
+        if (!dragging.dragging) {
+            return;
+        }
+        if (dragging.wasPlaying) {
+            playerRef.current.play();
+        }
+        else {
+            playerRef.current.pause();
+        }
+        onSeekEnd();
+    }, [dragging, onSeekEnd, playerRef]);
+    useEffect(() => {
+        if (!dragging.dragging) {
+            return;
+        }
+        const body = findBodyInWhichDivIsLocated(containerRef.current);
+        body.addEventListener('pointermove', onPointerMove);
+        body.addEventListener('pointerup', onPointerUp);
+        return () => {
+            body.removeEventListener('pointermove', onPointerMove);
+            body.removeEventListener('pointerup', onPointerUp);
+        };
+    }, [dragging.dragging, onPointerMove, onPointerUp]);
+    const knobStyle = useMemo(() => {
+        return {
+            height: KNOB_SIZE,
+            width: KNOB_SIZE,
+            borderRadius: KNOB_SIZE / 2,
+            position: 'absolute',
+            top: VERTICAL_PADDING - KNOB_SIZE / 2 + 5 / 2,
+            backgroundColor: 'var(--ifm-font-color-base)',
+            left: Math.max(0, (frame / Math.max(1, durationInFrames - 1)) * width - KNOB_SIZE / 2),
+            outline: '2px solid var(--ifm-background-color)',
+            opacity: Number(barHovered),
+            transition: 'opacity 0.s ease',
+        };
+    }, [barHovered, durationInFrames, frame, width]);
+    const fillStyle = useMemo(() => {
+        return {
+            height: BAR_HEIGHT,
+            backgroundColor: 'var(--ifm-font-color-base)',
+            width: ((frame - (inFrame !== null && inFrame !== void 0 ? inFrame : 0)) / (durationInFrames - 1)) * 100 + '%',
+            marginLeft: ((inFrame !== null && inFrame !== void 0 ? inFrame : 0) / (durationInFrames - 1)) * 100 + '%',
+            borderRadius: BAR_HEIGHT / 2,
+        };
+    }, [durationInFrames, frame, inFrame]);
+    const active = useMemo(() => {
+        return {
+            height: BAR_HEIGHT,
+            backgroundColor: 'var(--ifm-font-color-base)',
+            opacity: 0.2,
+            width: (((outFrame !== null && outFrame !== void 0 ? outFrame : durationInFrames - 1) - (inFrame !== null && inFrame !== void 0 ? inFrame : 0)) /
+                (durationInFrames - 1)) *
+                100 +
+                '%',
+            marginLeft: ((inFrame !== null && inFrame !== void 0 ? inFrame : 0) / (durationInFrames - 1)) * 100 + '%',
+            borderRadius: BAR_HEIGHT / 2,
+            position: 'absolute',
+        };
+    }, [durationInFrames, inFrame, outFrame]);
+    return (_jsxs("div", { ref: containerRef, onPointerDown: onPointerDown, style: containerStyle, children: [_jsxs("div", { style: barBackground, children: [_jsx("div", { style: active }), _jsx("div", { style: fillStyle })] }), _jsx("div", { style: knobStyle })] }));
+};

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

@@ -0,0 +1,5 @@
+import type { PlayerRef } from '@remotion/player';
+import React from 'react';
+export declare const PlayerVolume: React.FC<{
+    readonly playerRef: React.RefObject<PlayerRef | null>;
+}>;

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

@@ -0,0 +1,53 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { PALETTE } from '../layout/colors';
+import { IsMutedIcon, NotMutedIcon } from './icons';
+export const PlayerVolume = ({ playerRef }) => {
+    const [muted, setIsMuted] = useState(() => { var _a, _b; return (_b = (_a = playerRef.current) === null || _a === void 0 ? void 0 : _a.isMuted()) !== null && _b !== void 0 ? _b : true; });
+    const [isHovered, setIsHovered] = useState(false);
+    const timerRef = useRef(null);
+    useEffect(() => {
+        const { current } = playerRef;
+        if (!current) {
+            return;
+        }
+        const onMutedChange = (e) => {
+            setIsMuted(e.detail.isMuted);
+        };
+        current.addEventListener('mutechange', onMutedChange);
+        return () => {
+            current.removeEventListener('mutechange', onMutedChange);
+        };
+    }, [playerRef]);
+    useEffect(() => {
+        if (isHovered) {
+            document.body.style.userSelect = 'none';
+        }
+        else {
+            document.body.style.userSelect = 'auto';
+        }
+    }, [isHovered]);
+    const onClick = useCallback(() => {
+        if (timerRef.current !== null) {
+            clearTimeout(timerRef.current);
+            timerRef.current = null;
+        }
+        if (playerRef.current.isMuted()) {
+            playerRef.current.unmute();
+        }
+        else {
+            playerRef.current.mute();
+        }
+    }, [playerRef]);
+    return (_jsx("div", { className: 'relative cursor-pointer block pl-4 pr-4 h-full', onMouseEnter: () => setIsHovered(true), children: _jsx("button", { type: "button", onClick: onClick, style: {
+                background: 'transparent',
+                border: 0,
+                cursor: 'pointer',
+                padding: 0,
+                display: 'flex',
+                height: 50,
+                justifyContent: 'center',
+                alignItems: 'center',
+                color: PALETTE.TEXT_COLOR,
+            }, children: muted ? (_jsx(IsMutedIcon, { style: { height: 20 } })) : (_jsx(NotMutedIcon, { style: { height: 20 } })) }) }));
+};

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

@@ -0,0 +1,4 @@
+import React from 'react';
+export declare const Progress: React.FC<{
+    readonly progress: number;
+}>;

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

@@ -0,0 +1,14 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { makeCircle, makePie } from '@remotion/shapes';
+import { PALETTE } from '../layout/colors';
+export const Progress = ({ progress }) => {
+    const inner = makeCircle({
+        radius: 10,
+    });
+    const outer = makePie({
+        progress,
+        closePath: false,
+        radius: 10,
+    });
+    return (_jsxs("svg", { viewBox: `0 0 ${inner.width} ${inner.height}`, style: { overflow: 'visible', height: 22 }, children: [_jsx("path", { d: inner.path, stroke: PALETTE.BORDER_COLOR, strokeWidth: 4, fill: "transparent" }), _jsx("path", { d: outer.path, stroke: PALETTE.BRAND, strokeWidth: 4, fill: "transparent", strokeLinecap: "round" })] }));
+};

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

@@ -0,0 +1,5 @@
+import React from 'react';
+export declare const Spinner: React.FC<{
+    readonly size: number;
+    readonly duration: number;
+}>;

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

@@ -0,0 +1,37 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo } from 'react';
+import { PALETTE } from '../layout/colors';
+const viewBox = 100;
+const lines = 8;
+const className = '__remotion_spinner_line';
+const remotionSpinnerAnimation = '__remotion_spinner_animation';
+// Generated from https://github.com/remotion-dev/template-next/commit/9282c93f7c51ada31a42e18a94680fa09a14eee3
+const translated = 'M 44 0 L 50 0 a 6 6 0 0 1 6 6 L 56 26 a 6 6 0 0 1 -6 6 L 50 32 a 6 6 0 0 1 -6 -6 L 44 6 a 6 6 0 0 1 6 -6 Z';
+export const Spinner = ({ size, duration }) => {
+    const style = useMemo(() => {
+        return {
+            width: size,
+            height: size,
+        };
+    }, [size]);
+    return (_jsxs(_Fragment, { children: [_jsx("style", { type: "text/css", children: `
+				@keyframes ${remotionSpinnerAnimation} {
+          0% {
+            opacity: 1;
+          }
+          100% {
+            opacity: 0.15;
+          }
+        }
+        
+        .${className} {
+            animation: ${remotionSpinnerAnimation} ${duration}s linear infinite;
+        }        
+			` }), _jsx("svg", { style: style, viewBox: `0 0 ${viewBox} ${viewBox}`, children: new Array(lines).fill(true).map((_, index) => {
+                    return (_jsx("path", { className: className, style: {
+                            rotate: `${(index * Math.PI * 2) / lines}rad`,
+                            transformOrigin: 'center center',
+                            animationDelay: `${index * (duration / lines) - duration}s`,
+                        }, d: translated, fill: PALETTE.TEXT_COLOR }, index));
+                }) })] }));
+};

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

@@ -0,0 +1,6 @@
+import React from 'react';
+export declare const Switcher: React.FC<{
+    readonly type: 'left' | 'right';
+    readonly theme: 'dark' | 'light';
+    readonly onTap: () => void;
+}>;

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

@@ -0,0 +1,25 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback } from 'react';
+export const Switcher = ({ type, theme, onTap }) => {
+    const onPointerDown = useCallback((e) => {
+        e.stopPropagation();
+        onTap();
+    }, [onTap]);
+    const switcherSize = 40;
+    return (_jsx("div", { onPointerDown: onPointerDown, style: {
+            height: switcherSize,
+            width: switcherSize,
+            borderRadius: switcherSize / 2,
+            position: 'absolute',
+            marginLeft: -switcherSize / 2,
+            top: '50%',
+            left: type === 'left' ? 0 : '100%',
+            marginTop: -switcherSize / 2,
+            backgroundColor: theme === 'dark' ? '#222' : '#fafafa',
+            color: theme === 'dark' ? 'white' : '#222',
+            cursor: 'pointer',
+            justifyContent: 'center',
+            alignItems: 'center',
+            display: 'flex',
+        }, children: _jsxs("svg", { style: { height: switcherSize / 2 }, viewBox: "0 0 320 512", children: [type === 'left' ? (_jsx("path", { fill: "currentcolor", d: "M9.4 233.4c-12.5 12.5-12.5 32.8 0 45.3l192 192c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L77.3 256 246.6 86.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0l-192 192z" })) : null, type === 'right' ? (_jsx("path", { fill: "currentcolor", d: "M310.6 233.4c12.5 12.5 12.5 32.8 0 45.3l-192 192c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L242.7 256 73.4 86.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l192 192z" })) : null] }) }));
+};

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

@@ -0,0 +1,6 @@
+import React from 'react';
+export declare const Temperature: React.FC<{
+    readonly theme: 'dark' | 'light';
+    readonly city: string | null;
+    readonly temperatureInCelsius: number | null;
+}>;

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

@@ -0,0 +1,21 @@
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { AbsoluteFill } from 'remotion';
+import { TemperatureNumber } from './TemperatureNumber';
+export const Temperature = ({ theme, city, temperatureInCelsius }) => {
+    if (temperatureInCelsius === null) {
+        return null;
+    }
+    return (_jsx(AbsoluteFill, { children: _jsxs(AbsoluteFill, { style: {
+                alignItems: 'center',
+                justifyContent: 'center',
+                paddingLeft: 20,
+                paddingRight: 20,
+            }, children: [_jsxs("div", { style: {
+                        color: '#0b84f3',
+                        fontFamily: 'GTPlanar',
+                        fontWeight: '500',
+                        fontSize: 13,
+                        textAlign: 'center',
+                        marginTop: 5,
+                    }, children: ["Temperature in ", city] }), _jsx(TemperatureNumber, { theme: theme, temperatureInCelsius: temperatureInCelsius })] }) }));
+};

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

@@ -0,0 +1,5 @@
+import React from 'react';
+export declare const TemperatureNumber: React.FC<{
+    readonly theme: 'dark' | 'light';
+    readonly temperatureInCelsius: number;
+}>;