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

crumble: better plan

Browse source
This commit is contained in:
mehbark 2023-09-07 21:58:39 -04:00
parent 03c9b5eceb
commit c816bd4956
1 changed files with 8 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

13
html/crumble.tsx
View file

@ -32,7 +32,9 @@ const default_fall_delay = (x: number) => 10 + 25 * x;
// 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
// 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,
@ -42,9 +44,8 @@ export const Fall = ({
}) => (
<span
style={{
// transform: css.transform(css.translateY(css.rem(413))),
// animation: `20s spin reverse linear ${delay}s once`,
animationDelay: `${delay}s`,
transform: css.transform(css.translateY(css.rem(413))),
animation: `15s ${delay}s linear once spin`,
display: css.inline_block,
}}
class="bla"
@ -64,6 +65,7 @@ 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,
@ -77,8 +79,9 @@ export const Crumble = ({
{msg.split("").map(c => {
if (/[^\s]/.test(c)) {
const seed = Math.random();
const fall_delay = fall_delay_fn(seed);
return (
<Fall delay={fall_delay_fn(seed)}>
<Fall delay={fall_delay}>
<Shaky delay={shaky_delay_fn(seed)}>{c}</Shaky>
</Fall>
);