cohost/html/sunshine-curved-text.tsx

74 lines
1.8 KiB
TypeScript
Raw Normal View History

import { css, render_and_copy, svg_url } from "./common.tsx";
2023-09-06 21:01:47 -04:00
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(
2023-09-06 21:01:47 -04:00
<TextBox
lines={["Use that FLUDD to", "move around and", "get red coins."]}
/>
);