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 like the wrong way to do it
// i think the best way to do it is jump-hackery (jump 0s in to the start
// (which is 0 displacement when reversed)), then wait, then jump to the real animation
export const Fall = ({
    children,
    delay = 0,
}: {
    children: ComponentChildren;
    delay?: number;
}) => (
    <span
        style={{
            transform: css.transform(css.translateY(css.rem(413))),
            animation: `15s ${delay}s linear once  spin`,
            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
// where did the cool bug go???
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();
                const fall_delay = fall_delay_fn(seed);
                return (
                    <Fall delay={fall_delay}>
                        <Shaky delay={shaky_delay_fn(seed)}>{c}</Shaky>
                    </Fall>
                );
            }
            if (c == "\n") return <br />;
            return c;
        })}
    </div>
);

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