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 // well should it
// i think i'll try without that first // i think i'll try without that first
// a slow fall is fun // 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 = ({ export const Fall = ({
children, children,
delay = 0, delay = 0,
@ -42,9 +44,8 @@ export const Fall = ({
}) => ( }) => (
<span <span
style={{ style={{
// transform: css.transform(css.translateY(css.rem(413))), transform: css.transform(css.translateY(css.rem(413))),
// animation: `20s spin reverse linear ${delay}s once`, animation: `15s ${delay}s linear once spin`,
animationDelay: `${delay}s`,
display: css.inline_block, display: css.inline_block,
}} }}
class="bla" class="bla"
@ -64,6 +65,7 @@ so. yeah. if you see anything like that on any of my posts let me know
`.trim(); `.trim();
// should probably do it word wise so they don't break // should probably do it word wise so they don't break
// where did the cool bug go???
export const Crumble = ({ export const Crumble = ({
msg, msg,
shaky_delay_fn = default_shaky_delay, shaky_delay_fn = default_shaky_delay,
@ -77,8 +79,9 @@ export const Crumble = ({
{msg.split("").map(c => { {msg.split("").map(c => {
if (/[^\s]/.test(c)) { if (/[^\s]/.test(c)) {
const seed = Math.random(); const seed = Math.random();
const fall_delay = fall_delay_fn(seed);
return ( return (
<Fall delay={fall_delay_fn(seed)}> <Fall delay={fall_delay}>
<Shaky delay={shaky_delay_fn(seed)}>{c}</Shaky> <Shaky delay={shaky_delay_fn(seed)}>{c}</Shaky>
</Fall> </Fall>
); );