Jeroen Reumkens PRO
Preview
import { useAnimate } from 'motion/react';
import { useEffect } from 'react';
export const App = () => {
const [scope, animate] = useAnimate();
useEffect(() => {
const controls = animate("h1", { opacity: 0.5, x: 200 }, { autoplay: false });
setTimeout(() => {
controls.play();
}, 2000);
}, [])
return (
<div ref={scope} className="grid min-h-dvh place-items-center text-white">
<div className="flex flex-col items-center">
<img
className="mb-8 h-12 w-12"
src="https://sandpack.frontend.fyi/img/fefyi.svg"
/>
<h1
className="mb-6 max-w-[60%] text-balance text-center font-mono text-3xl text-white opacity-0"
>
Time to draw some rectangles
</h1>
<a
href="https://www.frontend.fyi/dev"
target="_blank"
className="text-sm uppercase"
>
Frontend.FYI Dev Playgrounds
</a>
</div>
</div>
);
}