tymur999/braintok
1
0
Fork 0
mirror of https://github.com/tymur999/braintok.git synced 2025-08-03 15:20:38 +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 gradient from "../../img/gradient.png";
import Image from "next/image";
import { useState } from "react";
import { useEffect, useState } from "react";
import { Time } from "@/app/landing/time";
import { motion } from "framer";
import {useAnimate} from "framer-motion";
const slides = [<Time/>];
export default function Landing() {
const [clicked1, setClicked1] = useState(false);
const [scope, animate] = useAnimate();
const [animated, setAnimated] = useState(false);
return clicked1 ? (
<Time />
useEffect(() => {
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)}
className="flex-grow flex flex-col"
>
@@ -40,6 +55,6 @@ export default function Landing() {
width={window.innerWidth}
src={gradient}
/>
</div>
</motion.div>
);
}

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

@@ -1,13 +1,17 @@
"use client"
import 'react-circular-progressbar/dist/styles.css';
import { CircularProgressbar, buildStyles } from 'react-circular-progressbar';
import { motion } from 'framer';
// import { useState } from "react";
export function Time() {
// const [secondsLeft, _setSecondsLeft] = useState(100);
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">
{
Math.trunc(100 / 60)
@@ -22,5 +26,5 @@ export function Time() {
strokeLinecap: "butt"
})} value={percentage} />
</div>
</div>
</motion.div>
}

2
src/app/layout.tsx
View File

@@ -19,7 +19,7 @@ export default function RootLayout({
return (
<html lang="en">
<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">
<h1 className={raleway_heavy.className + " top-[20px] absolute left-[50%] translate-x-[-50%]"}>