Created
December 10, 2025 22:51
-
-
Save btn0s/0bfb1c60c02171ff61611fa40e053edc to your computer and use it in GitHub Desktop.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| "use client"; | |
| import { useEffect, useRef, useState } from "react"; | |
| const FRAMERATE = 1000 / 60; | |
| const Clock = () => { | |
| const [time, setTime] = useState<Date | null>(null); | |
| const intervalRef = useRef<NodeJS.Timeout | null>(null); | |
| const [sHandRotation, setSHandRotation] = useState(-90); | |
| const [mHandRotation, setMHandRotation] = useState(-45); | |
| const [hHandRotation, setHHandRotation] = useState(-90); | |
| useEffect(() => { | |
| const updateTime = () => { | |
| const nowTime = new Date(Date.now()); | |
| const newSRotation = 6 * nowTime.getSeconds() - 90; | |
| const newMRotation = 6 * nowTime.getMinutes() - 90; | |
| const newHRotation = 30 * nowTime.getHours() - 90; | |
| setSHandRotation(newSRotation); | |
| setMHandRotation(newMRotation); | |
| setHHandRotation(newHRotation); | |
| setTime(nowTime); | |
| }; | |
| const interval = setInterval(updateTime, FRAMERATE); | |
| intervalRef.current = interval; | |
| return () => { | |
| if (!intervalRef.current) return; | |
| }; | |
| }, []); | |
| // {`${time?.getHours()}:${time?.getMinutes()}:${time?.getSeconds()}`} | |
| return ( | |
| <div className="w-[160px] aspect-square border-2 border-black rounded-full shadow-2xl"> | |
| <div | |
| id="seconds-hand" | |
| className="w-[64px] h-px bg-black origin-left absolute top-1/2 left-1/2" | |
| style={{ | |
| transform: `rotate(${sHandRotation}deg)`, | |
| }} | |
| ></div> | |
| <div | |
| id="minutes-hand" | |
| className="w-[48px] h-[2px] bg-black origin-left absolute top-1/2 left-1/2" | |
| style={{ | |
| transform: `rotate(${mHandRotation}deg)`, | |
| }} | |
| ></div> | |
| <div | |
| id="hours-hand" | |
| className="w-[32px] h-[2px] bg-black origin-left absolute top-1/2 left-1/2" | |
| style={{ | |
| transform: `rotate(${hHandRotation}deg)`, | |
| }} | |
| ></div> | |
| </div> | |
| ); | |
| }; | |
| export default function Home() { | |
| return ( | |
| <div className="p-6 flex items-center justify-center h-svh"> | |
| <Clock /> | |
| </div> | |
| ); | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment