tymur999/braintok
1
0
Fork 0
mirror of https://github.com/tymur999/braintok.git synced 2025-08-05 16:20:37 +00:00
Code Issues Packages Projects Releases Wiki Activity

initial animation

Browse Source
This commit is contained in:
tymur999
2024-10-19 17:51:17 -04:00
committed by Mark Goltsman
parent f5ff74288f
commit e6c58e6daa
3 changed files with 27 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
src/app/landing/page.tsx
View File

@@ -3,16 +3,31 @@
import arrow from "../../img/arrow.png"; import arrow from "../../img/arrow.png";
import gradient from "../../img/gradient.png"; import gradient from "../../img/gradient.png";
import Image from "next/image"; import Image from "next/image";
import { useState } from "react"; import { useEffect, useState } from "react";
import { Time } from "@/app/landing/time"; import { Time } from "@/app/landing/time";
import { motion } from "framer";
import {useAnimate} from "framer-motion";
const slides = [<Time/>];
export default function Landing() { export default function Landing() {
const [clicked1, setClicked1] = useState(false); const [clicked1, setClicked1] = useState(false);
const [scope, animate] = useAnimate();
const [animated, setAnimated] = useState(false);
return clicked1 ? ( useEffect(() => {
<Time /> if(!clicked1)
return;
animate(scope.current, {y:"100vh"});
setAnimated(true);
}, [animate, scope, clicked1]);
return clicked1 && animated ? (
<Time
/>
) : ( ) : (
<div <motion.div
initial={{y: 0}}
ref={scope}
onMouseDown={() => setClicked1(true)} onMouseDown={() => setClicked1(true)}
className="flex-grow flex flex-col" className="flex-grow flex flex-col"
> >
@@ -40,6 +55,6 @@ export default function Landing() {
width={window.innerWidth} width={window.innerWidth}
src={gradient} src={gradient}
/> />
</div> </motion.div>
); );
} }

8
src/app/landing/time.tsx
View File

@@ -1,13 +1,17 @@
"use client" "use client"
import 'react-circular-progressbar/dist/styles.css'; import 'react-circular-progressbar/dist/styles.css';
import { CircularProgressbar, buildStyles } from 'react-circular-progressbar'; import { CircularProgressbar, buildStyles } from 'react-circular-progressbar';
import { motion } from 'framer';
// import { useState } from "react"; // import { useState } from "react";
export function Time() { export function Time() {
// const [secondsLeft, _setSecondsLeft] = useState(100); // const [secondsLeft, _setSecondsLeft] = useState(100);
const percentage = 66; const percentage = 66;
return <div className="absolute top-0 z-[-999] flex flex-col bg-[#ff5757] h-full w-full items-center justify-center"> return <motion.div
initial={{y: 500}}
animate={{y: 0}}
className="absolute top-0 z-[-999] flex flex-col bg-[#ff5757] h-full w-full items-center justify-center">
<h1 className="absolute text-9xl font-bold drop-shadow-md shadow-black"> <h1 className="absolute text-9xl font-bold drop-shadow-md shadow-black">
{ {
Math.trunc(100 / 60) Math.trunc(100 / 60)
@@ -22,5 +26,5 @@ export function Time() {
strokeLinecap: "butt" strokeLinecap: "butt"
})} value={percentage} /> })} value={percentage} />
</div> </div>
</div> </motion.div>
} }

2
src/app/layout.tsx
View File

@@ -19,7 +19,7 @@ export default function RootLayout({
return ( return (
<html lang="en"> <html lang="en">
<body <body
className="antialiased h-[100vh] flex flex-col" className="antialiased overflow-hidden h-[100vh] flex flex-col"
> >
<div className="flex w-100 p-5 text-5xl text-center flex-shrink py-6"> <div className="flex w-100 p-5 text-5xl text-center flex-shrink py-6">
<h1 className={raleway_heavy.className + " top-[20px] absolute left-[50%] translate-x-[-50%]"}> <h1 className={raleway_heavy.className + " top-[20px] absolute left-[50%] translate-x-[-50%]"}>