cohost/html/crumble.tsx

import { ComponentChildren } from "preact";
import { css, render_and_copy } from "./common.tsx";
// combine a shake with a fall
// fall should be more delayed than shake
// we want outliers (a few letters falling before than others)
// exponentials should do

const default_shaky_delay = (x: number) => 5 + 20 * x;
export type DelayFn = (_: number) => number;

// exporting these in case they turn out to be useful
export const Shaky = ({
    children,
    delay = 0,
}: {
    children: ComponentChildren;
    delay?: number;
}) => (
    <span
        style={{
            transform: css.transform(css.translate(css.px(-1), css.px(-1))),
            animation: `0.2s spin alternate-reverse linear ${delay}s infinite`,
            display: css.inline_block,
        }}
    >
        {children}
    </span>
);

const default_fall_delay = (x: number) => 10 + 25 * x;
// direction should be random but that doesn't need to be as custo
// well should it
// i think i'll try without that first
// a slow fall is fun
// i could have some weird hack where there's another copy that's hidden but that seems liek the wrong way to do it
export const Fall = ({
    children,
    delay = 0,
}: {
    children: ComponentChildren;
    delay?: number;
}) => (
    <span
        style={{
            // transform: css.transform(css.translateY(css.rem(413))),
            // animation: `20s spin reverse linear ${delay}s once`,
            animationDelay: `${delay}s`,
            display: css.inline_block,
        }}
        class="bla"
    >
        {children}
    </span>
);

const msg = `
i haven't seen this on other blogs, but some of the posts on mine seem to be kinda unstable?
if that makes sense?
like, sometimes i see them shake, and i swear i saw some letters fall

i know i'm a (convicted?) css criminal, so i'm thinking that this might just be the w3 gods punishing me.

so. yeah. if you see anything like that on any of my posts let me know
`.trim();

// should probably do it word wise so they don't break
export const Crumble = ({
    msg,
    shaky_delay_fn = default_shaky_delay,
    fall_delay_fn = default_fall_delay,
}: {
    msg: string;
    shaky_delay_fn?: DelayFn;
    fall_delay_fn?: DelayFn;
}) => (
    <div>
        {msg.split("").map(c => {
            if (/[^\s]/.test(c)) {
                const seed = Math.random();
                return (
                    <Fall delay={fall_delay_fn(seed)}>
                        <Shaky delay={shaky_delay_fn(seed)}>{c}</Shaky>
                    </Fall>
                );
            }
            if (c == "\n") return <br />;
            return c;
        })}
    </div>
);

render_and_copy(<Crumble msg={msg} />);