mbk/cohost
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

crumble: did that, change to px to avoid blur

Browse source
This commit is contained in:
mehbark 2023-09-07 21:27:45 -04:00
parent 3c51871fe0
commit df57bcdcd9
1 changed files with 21 additions and 24 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

45
html/crumble.tsx
View file

@ -5,25 +5,21 @@ import { css, render_and_copy } from "./common.tsx";
// we want outliers (a few letters falling before than others) // we want outliers (a few letters falling before than others)
// exponentials should do // exponentials should do
const default_shaky_delay = (x: number) => 5 + 10 * x; const default_shaky_delay = (x: number) => 8 + 10 * x;
export type DelayFn = (_: number) => number; export type DelayFn = (_: number) => number;
// exporting these in case they turn out to be useful // exporting these in case they turn out to be useful
export const Shaky = ({ export const Shaky = ({
children, children,
delay_fn = default_shaky_delay, delay = 0,
}: { }: {
children: ComponentChildren; children: ComponentChildren;
delay_fn?: DelayFn; delay?: number;
}) => ( }) => (
<div <div
style={{ style={{
transform: css.transform( transform: css.transform(css.translate(css.px(-1), css.px(-1))),
css.translate(css.rem(-0.1), css.rem(-0.1)) animation: `0.2s spin alternate-reverse linear ${delay}s infinite`,
),
animation: `0.2s spin alternate-reverse linear ${delay_fn(
Math.random()
)}s infinite`,
display: css.inline_block, display: css.inline_block,
}} }}
> >
@ -34,10 +30,10 @@ export const Shaky = ({
const default_fall_delay = (x: number) => (3 * x) ** 4; const default_fall_delay = (x: number) => (3 * x) ** 4;
export const Fall = ({ export const Fall = ({
children, children,
delay_fn = default_fall_delay, delay = 0,
}: { }: {
children: ComponentChildren; children: ComponentChildren;
delay_fn?: DelayFn; delay?: number;
}) => ( }) => (
<div <div
style={{ style={{
@ -61,25 +57,26 @@ so. yeah. if you see anything like that on any of my posts let me know
// should probably do it word wise so they don't break // should probably do it word wise so they don't break
export const Crumble = ({ export const Crumble = ({
msg, msg,
shaky_delay_fn, shaky_delay_fn = default_shaky_delay,
fall_delay_fn, fall_delay_fn = default_fall_delay,
}: { }: {
msg: string; msg: string;
shaky_delay_fn?: DelayFn; shaky_delay_fn?: DelayFn;
fall_delay_fn?: DelayFn; fall_delay_fn?: DelayFn;
}) => ( }) => (
<div> <div>
{msg.split("").map(c => {msg.split("").map(c => {
/[^\s]/.test(c) ? ( if (/[^\s]/.test(c)) {
<Fall delay_fn={fall_delay_fn}> const seed = Math.random();
<Shaky delay_fn={shaky_delay_fn}>{c}</Shaky> return (
</Fall> <Fall delay={fall_delay_fn(seed)}>
) : c == "\n" ? ( <Shaky delay={shaky_delay_fn(seed)}>{c}</Shaky>
<br /> </Fall>
) : ( );
c }
) if (c == "\n") return <br />;
)} return c;
})}
</div> </div>
); );