From 8ce3834cf4d124847ddbbe52d3c46208739be7db Mon Sep 17 00:00:00 2001 From: MapleLeaf <19603573+itsMapleLeaf@users.noreply.github.com> Date: Wed, 12 Jan 2022 19:29:20 -0600 Subject: [PATCH] fun landing animation --- packages/website/app/assets/blob-comfy.png | Bin 0 -> 10546 bytes packages/website/app/assets/cursor-ibeam.png | Bin 0 -> 1372 bytes packages/website/app/assets/cursor.png | Bin 0 -> 1660 bytes packages/website/app/modules/app/app-logo.tsx | 20 ++ packages/website/app/root.tsx | 2 + packages/website/app/routes/index.tsx | 231 ++++++++++++++++-- 6 files changed, 235 insertions(+), 18 deletions(-) create mode 100644 packages/website/app/assets/blob-comfy.png create mode 100644 packages/website/app/assets/cursor-ibeam.png create mode 100644 packages/website/app/assets/cursor.png create mode 100644 packages/website/app/modules/app/app-logo.tsx diff --git a/packages/website/app/assets/blob-comfy.png b/packages/website/app/assets/blob-comfy.png new file mode 100644 index 0000000000000000000000000000000000000000..4c099204a035fccf7232415e329707d511115fc4 GIT binary patch literal 10546 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 literal 0 HcmV?d00001 diff --git a/packages/website/app/assets/cursor-ibeam.png b/packages/website/app/assets/cursor-ibeam.png new file mode 100644 index 0000000000000000000000000000000000000000..44e541137431ca67820a203e42e4997e4b891ffc GIT binary patch literal 1372 zcmeAS@N?(olHy`uVBq!ia0y~yU~m9o4mJh`hET15(o7GBX3S?IJvG^*5K=S%KcCMueGeNEX1 z4<1jtdhlpuID5FGKuv>%m8Iq`kIv_6tzw397I*sp&--8SZfC=V6$WQtNwJ&UHM@MW zWyaaHT?@lm1Qxz=4oI73sP3ux7IUpM#V(c1|L~E2XI*Cu z*UnQ3Pa+&drBbf*|6|`@o-L}TzQ^w&%Z0y>Eaa6PGQ=~k$v*#mqi~kG!w1P7mu~;d zVxI9+W$(RfN$w8+%?b+dUYlb3pom?f#waDYY^lQ101bxs>0f*;6CQ}Yi2eNS+OFd- znI|laU7FX>?3}R0WAF9adv`DI++Lp@_4_yDev_hj_IO7X1_lPUByV>YhW{YAVDIwD z3=9mM1s;*b3=G`DAk4@xYmNj10|R@Br>`sfGe%xU0nw*&_V*bWm?J%1978H@y`35B z5#lIv{D1nhcctFmr?(ZDo<3oeeVB{IQKxFv0;h#dRWCOxd@$_jkXyC<#mallTv|#8 zCxkA(zGTt#Q+8`QOwN32-k_TM{hp<5Nq(I9S`L{zum2?6h<&GX_~-rNXJ_UxOYpEY zA51U+QHk#yH<$SGEoLw|`@E!WGoPYP@3G&`Ec^Ub8|^=~kd(ifW^s<(OZCdn36 zh688xns;+r>oiB+f1(< z4+{?wVL0%&z29zYX~{dL3ycRi_tc(qWmMZ~xAR2u!A~C+HqZXc`CIz?y7(Olj#vKY z-u^auTi-cH2BC)6f2SXQz^Jr%&O?sdQ&z0rzctIX^53_$yxz0>7`gMzHxR+*_aA!sR`R>~Ab@wak{#<#P zciq=ML0tLe#*px=iXHL?%Jq3d*0nhp)QK`Y_pX1h%;4YsSi9`h3R(VhvUUIW9W}1H zQ~Y1jzjc?>gXs(mMhq%~JAFt{-&ADAQB@N5+Whn}ADSHf{__xBDG8!r>h6@T^gR&%`v3f#G=Jk7sYEO@DnoRP?%vkg92?%gO5@T6bsp)O~R}==kCn zQ%68e?$=TS_T)d|rX3wI2K+B?@swU;sa*2@?&C!jmGh=75;-HpmG!6kRjG=U?nD)C z$0ZUHr)#`RUuw;ou*`Ic`nI>cr=@Sc{_T2^NA1+(b3S=(yKEdPkEI#}{-3|<>(lb) zzn6A!HM9HJG5ehRxWAQCZPlTFGcJa#2yUpieVMx4j<1>h&-<#)%c^p~sT-Wg7d~RQ Y+Gf(nvBUEN0|Nttr>mdKI;Vst07A@aQUCw| literal 0 HcmV?d00001 diff --git a/packages/website/app/assets/cursor.png b/packages/website/app/assets/cursor.png new file mode 100644 index 0000000000000000000000000000000000000000..f097a66a2858ef51bc81b9aa069567d2e9df8570 GIT binary patch literal 1660 zcmeAS@N?(olHy`uVBq!ia0y~yU~m9o4mJh`hET15(o7GBX3S?IJvG^*5K=S%KcCMueGeNEX1 z4<1jtdhlpuID5FGKuv>%m8Iq`kIv_6tzw397I*sp&--8SZfC=V6$WQtNwJ&UHM@MW zWyaaHT?@lm1Qxz=4oI73sP3ux7IUpM#V(c1|L~E2XI*Cu z*UnQ3Pa+&drBbf*|6|`@o-L}TzQ^w&%Z0y>Eaa6PGQ=~k$v*#mqi~kG!w1P7mu~;d zVxI9+W$(RfN$w8+%?b+dUYlb3pom?f#waDYY^lQ101bxs>0f*;6CQ}Yi2eNS+OFd- znI|laU7FX>?3}R0WAF9adv`DI++Lp@_4_yDev_hj_IO7X1_lPUByV>YhW{YAVDIwD z3=9mM1s;*b3=G`DAk4@xYmNj10|R@Br>`sfGe%xU0fo(LfB#`%V5#(UaSW-r^>$W# zMs%pm@%_)|ROesXl36v`%=5O1`QO9W&f4aLa`)w)S?g-vCamVOJS_6>;VC;G**~*- zz2eHNZi@+-tl_WZj?F2S<+AGtDcsuBF!#@QZDt0cWsf#1H9jqPIx{3_*G$hGd5)U_FUnSL4qsk(woLkhjA{c@f>5H} zIm_2|kH7XZ+>8nf{@yXst7@{?$=fVCVy=uQTJ=h07nbUuMk3o@efKk+zes=CML?0)`o+O#YsZ~kdnrr+0XX^ByNaLl>W z@Y26m-n02_w)iJ++OuCLWP7fv>XQft|HvL4&n>GT|G36p_LeK4Q&xkwRVv)8>8a3$ zjzt=8_HN(3?R{R}x(PErEm@U0yC+tAv5<~714E9PwDr$((YLqf-h4D&wK_Y~pu&Bb zYD5$RgM|#=&gV~dTT8vq`CxdoY{eR*kbDn?nLixTD;XIc=xA-Ky;QvF<+@&8yQl>+ zMeNO6m(ARu!&#}wz|b|h%D}+ErsaL^>)d-QSIzU$5eZ;C=it*(Xza}`8$Ff>dMD={}S*}*AbFqc2ik~PRqT)zAG*JO38_I+{^Gh$}+ z*G)XfGvU+DAB$zx+s@UMC7Q_fertDculIYdIcduKqsN~;|8+Q7xtZY+L&@VqYfqi< zX4Ky<|Nr5iqu$9IckcZ6;m3(o25yF=HkN%;RGw6DOxhw>GjD&z%l8#I508KNaYCVC zh2nuZ4Bp%)j)==!T|LfIT16?}>%$TGi8r(3UDedv8P7=Xc2J7t4Ex>M5y@j36=J4x;#l>ri$>3M4c=NN zv`$v=|2RwK>-IdCxhh+Il4d^V^j3M0rt9P@?kTk>^X=cXf6QI$B4XAse(7UiU|{fc L^>bP0l+XkKvZVmN literal 0 HcmV?d00001 diff --git a/packages/website/app/modules/app/app-logo.tsx b/packages/website/app/modules/app/app-logo.tsx new file mode 100644 index 0000000..3043616 --- /dev/null +++ b/packages/website/app/modules/app/app-logo.tsx @@ -0,0 +1,20 @@ +import * as React from "react" + +export function AppLogo(props: React.SVGProps) { + return ( + + + + + + ) +} diff --git a/packages/website/app/root.tsx b/packages/website/app/root.tsx index 6c057c0..bf728a5 100644 --- a/packages/website/app/root.tsx +++ b/packages/website/app/root.tsx @@ -5,6 +5,7 @@ import { LiveReload, Meta, Outlet, + Scripts, ScrollRestoration, useLoaderData, } from "remix" @@ -72,6 +73,7 @@ export default function App() { + {process.env.NODE_ENV === "development" && } diff --git a/packages/website/app/routes/index.tsx b/packages/website/app/routes/index.tsx index bfee2e5..88e663b 100644 --- a/packages/website/app/routes/index.tsx +++ b/packages/website/app/routes/index.tsx @@ -1,7 +1,11 @@ -import packageJson from "reacord/package.json" +import clsx from "clsx" +import { useEffect, useRef, useState } from "react" +import blobComfyUrl from "~/assets/blob-comfy.png" +import cursorIbeamUrl from "~/assets/cursor-ibeam.png" +import cursorUrl from "~/assets/cursor.png" import dotsBackgroundUrl from "~/assets/dots-background.svg" import { AppFooter } from "~/modules/app/app-footer" -import LandingExample from "~/modules/landing/landing-example.mdx" +import { AppLogo } from "~/modules/app/app-logo" import { MainNavigation } from "~/modules/navigation/main-navigation" import { maxWidthContainer } from "~/modules/ui/components" @@ -12,27 +16,218 @@ export default function Landing() { className="fixed inset-0 rotate-6 scale-125 opacity-20" style={{ backgroundImage: `url(${dotsBackgroundUrl})` }} /> -
+
-
-
-

reacord

-
- -
-

{packageJson.description}

- - Get Started - -
+
+ +
+ +
+

+ Create interactive Discord messages with React. +

+ {/* */} +
+
+
-
) } + +const defaultState = { + chatInputText: "", + chatInputCursorVisible: true, + messageVisible: false, + count: 0, + cursorLeft: "25%", + cursorBottom: "-15px", +} + +const delay = (ms: number) => new Promise((resolve) => setTimeout(resolve, ms)) + +const animationFrame = () => + new Promise((resolve) => requestAnimationFrame(resolve)) + +function LandingAnimation() { + const [state, setState] = useState(defaultState) + const chatInputRef = useRef(null) + const addRef = useRef(null) + const deleteRef = useRef(null) + const cursorRef = useRef(null) + + useEffect(() => { + const animateClick = (element: HTMLElement) => + element.animate( + [{ transform: `translateY(2px)` }, { transform: `translateY(0px)` }], + 300, + ) + + let running = true + + void (async () => { + await delay(1000) + + while (running) { + setState(defaultState) + await delay(1000) + + for (const letter of "/counter") { + setState((state) => ({ + ...state, + chatInputText: state.chatInputText + letter, + })) + await delay(100) + } + + await delay(1000) + + setState((state) => ({ + ...state, + messageVisible: true, + chatInputText: "", + })) + await delay(1000) + + setState((state) => ({ + ...state, + cursorLeft: "70px", + cursorBottom: "40px", + })) + await delay(1500) + + for (let i = 0; i < 3; i++) { + setState((state) => ({ + ...state, + count: state.count + 1, + chatInputCursorVisible: false, + })) + animateClick(addRef.current!) + await delay(700) + } + + await delay(500) + + setState((state) => ({ + ...state, + cursorLeft: "140px", + })) + await delay(1000) + + animateClick(deleteRef.current!) + setState((state) => ({ ...state, messageVisible: false })) + await delay(1000) + + setState(() => ({ + ...defaultState, + chatInputCursorVisible: false, + })) + await delay(500) + } + })() + + return () => { + running = false + } + }, []) + + useEffect(() => { + let running = true + + void (async () => { + while (running) { + // check if the cursor is in the input + const cursorRect = cursorRef.current!.getBoundingClientRect() + const chatInputRect = chatInputRef.current!.getBoundingClientRect() + + const isOverInput = + cursorRef.current && + chatInputRef.current && + cursorRect.top + cursorRect.height / 2 > chatInputRect.top + + cursorRef.current!.src = isOverInput ? cursorIbeamUrl : cursorUrl + + await animationFrame() + } + })() + + return () => { + running = false + } + }) + + return ( +
+
+
+
+ +
+
+

comfybot

+

this button was clicked {state.count} times

+
+ + +
+
+
+
+
+ + {state.chatInputText || ( + + Message #showing-off-reacord + + )} + +
+ + +
+ ) +}