cohost/html/sunshine-curved-text.tsx

import { css, render_and_copy, svg_url } from "./common.tsx";

const displace =
    (width: number, amplitude = 1) =>
    (t: number) =>
        amplitude * Math.sin((Math.PI / width) * t);

const rotation = css.rotate(css.deg(-20));

const Row = ({
    children,
    max_width = 10,
}: {
    children: string;
    max_width?: number;
}) => {
    const d = displace(max_width);
    const out = children.split("").map((c, i) => (
        <div
            style={{
                transform: css.transform(
                    css.translateY(css.rem(-d(i)))
                    // rotation
                ),
                // width: css.min_content,
                // height: css.min_content,
                color: "black",
            }}
        >
            {c}
        </div>
    ));

    return (
        <div
            style={{
                // transform: css.transform(
                //     css.rotate(css.deg(-20)),
                //     css.translate(css.rem(2), css.rem(-4))
                // ),
                display: css.flex,
                fontFamily: css.fontstack(
                    "Comic Sans MS",
                    "cursive",
                    "sans-serif"
                ),
            }}
        >
            {...out}
        </div>
    );
};

const TextBox = ({ lines }: { lines: string[] }) => {
    const max_width = Math.max(...lines.map(l => l.length));
    return (
        <div
            style={{
                transform: css.transform(rotation),
                height: css.rem(30),
                alignItems: "center",
            }}
        >
            {...lines.map(line => <Row max_width={max_width}>{line}</Row>)}
        </div>
    );
};

render_and_copy(
    <TextBox
        lines={["Use that FLUDD to", "move around and", "get red coins."]}
    />
);