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

crumble: so bad but looks so cool

Browse source
This commit is contained in:
mehbark 2023-09-07 21:42:33 -04:00
parent 1cb7cb1e18
commit 03c9b5eceb
1 changed files with 7 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

9
html/crumble.tsx
View file

@ -5,7 +5,7 @@ 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) => 8 + 10 * x; const default_shaky_delay = (x: number) => 5 + 20 * 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
@ -27,11 +27,12 @@ export const Shaky = ({
</span> </span>
); );
const default_fall_delay = (x: number) => (3 * x) ** 4; const default_fall_delay = (x: number) => 10 + 25 * x;
// direction should be random but that doesn't need to be as custo // direction should be random but that doesn't need to be as custo
// 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
export const Fall = ({ export const Fall = ({
children, children,
delay = 0, delay = 0,
@ -41,8 +42,12 @@ export const Fall = ({
}) => ( }) => (
<span <span
style={{ style={{
// transform: css.transform(css.translateY(css.rem(413))),
// animation: `20s spin reverse linear ${delay}s once`,
animationDelay: `${delay}s`,
display: css.inline_block, display: css.inline_block,
}} }}
class="bla"
> >
{children} {children}
</span> </span>