Relógio React feito de componentes de relógio

423 codex

Abrir no Editor Video Publique Seu Código

Relógio React feito de componentes de relógio

Recomendado

31 May 2025

Um código de Mete

20 September 2025

Demonstração de fogos de artifício animados em CSS, vaga-lumes e girassóis

6 October 2025

Trecho de código de animação de labirinto CSS

HTML

<html lang="en"><head>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="style.css">
  <title>Clock made of clocks</title>
  <script>
  window.console = window.console || function(t) {};
</script>
</head>
<body translate="no">
  <div id="root"><div class="app"><div><div class="clock" style="--hour-angle: 0; --minute-angle: 90; --dur: 0.4;"></div><div class="clock" style="--hour-angle: 0; --minute-angle: 180; --dur: 0.4;"></div><div class="clock" style="--hour-angle: 180; --minute-angle: 450; --dur: 0.4;"></div><div class="clock" style="--hour-angle: 495; --minute-angle: 135; --dur: 0.4;"></div><div class="clock" style="--hour-angle: 360; --minute-angle: 270; --dur: 0.4;"></div><div class="clock" style="--hour-angle: 180; --minute-angle: 90; --dur: 0.4;"></div><div class="clock" style="--hour-angle: 270; --minute-angle: 90; --dur: 0.4;"></div><div class="clock" style="--hour-angle: 495; --minute-angle: 135; --dur: 0.4;"></div><div class="clock" style="--hour-angle: 495; --minute-angle: 135; --dur: 0.4;"></div><div class="clock" style="--hour-angle: 270; --minute-angle: 90; --dur: 0.4;"></div><div class="clock" style="--hour-angle: 270; --minute-angle: 90; --dur: 0.4;"></div><div class="clock" style="--hour-angle: 495; --minute-angle: 135; --dur: 0.4;"></div><div class="clock" style="--hour-angle: 495; --minute-angle: 135; --dur: 0.4;"></div><div class="clock" style="--hour-angle: 270; --minute-angle: 90; --dur: 0.4;"></div><div class="clock" style="--hour-angle: 270; --minute-angle: 90; --dur: 0.4;"></div><div class="clock" style="--hour-angle: 495; --minute-angle: 135; --dur: 0.4;"></div><div class="clock" style="--hour-angle: 360; --minute-angle: 90; --dur: 0.4;"></div><div class="clock" style="--hour-angle: 180; --minute-angle: 270; --dur: 0.4;"></div><div class="clock" style="--hour-angle: 360; --minute-angle: 270; --dur: 0.4;"></div><div class="clock" style="--hour-angle: 540; --minute-angle: 90; --dur: 0.4;"></div><div class="clock" style="--hour-angle: 0; --minute-angle: 270; --dur: 0.4;"></div><div class="clock" style="--hour-angle: 0; --minute-angle: 180; --dur: 0.4;"></div><div class="clock" style="--hour-angle: 0; --minute-angle: 180; --dur: 0.4;"></div><div class="clock" style="--hour-angle: 180; --minute-angle: 270; --dur: 0.4;"></div></div><div><div class="clock" style="--hour-angle: 0; --minute-angle: 90; --dur: 0.4;"></div><div class="clock" style="--hour-angle: 180; --minute-angle: 450; --dur: 0.4;"></div><div class="clock" style="--hour-angle: 0; --minute-angle: 450; --dur: 0.4;"></div><div class="clock" style="--hour-angle: 180; --minute-angle: 90; --dur: 0.4;"></div><div class="clock" style="--hour-angle: 270; --minute-angle: 90; --dur: 0.4;"></div><div class="clock" style="--hour-angle: 270; --minute-angle: 90; --dur: 0.4;"></div><div class="clock" style="--hour-angle: 270; --minute-angle: 90; --dur: 0.4;"></div><div class="clock" style="--hour-angle: 270; --minute-angle: 90; --dur: 0.4;"></div><div class="clock" style="--hour-angle: 270; --minute-angle: 90; --dur: 0.4;"></div><div class="clock" style="--hour-angle: 360; --minute-angle: 270; --dur: 0.4;"></div><div class="clock" style="--hour-angle: 540; --minute-angle: 270; --dur: 0.4;"></div><div class="clock" style="--hour-angle: 270; --minute-angle: 90; --dur: 0.4;"></div><div class="clock" style="--hour-angle: 360; --minute-angle: 270; --dur: 0.4;"></div><div class="clock" style="--hour-angle: 360; --minute-angle: 180; --dur: 0.4;"></div><div class="clock" style="--hour-angle: 540; --minute-angle: 90; --dur: 0.4;"></div><div class="clock" style="--hour-angle: 270; --minute-angle: 90; --dur: 0.4;"></div><div class="clock" style="--hour-angle: 495; --minute-angle: 135; --dur: 0.4;"></div><div class="clock" style="--hour-angle: 135; --minute-angle: 495; --dur: 0.4;"></div><div class="clock" style="--hour-angle: 270; --minute-angle: 450; --dur: 0.4;"></div><div class="clock" style="--hour-angle: 270; --minute-angle: 90; --dur: 0.4;"></div><div class="clock" style="--hour-angle: 135; --minute-angle: 495; --dur: 0.4;"></div><div class="clock" style="--hour-angle: 135; --minute-angle: 495; --dur: 0.4;"></div><div class="clock" style="--hour-angle: 0; --minute-angle: 270; --dur: 0.4;"></div><div class="clock" style="--hour-angle: 180; --minute-angle: 270; --dur: 0.4;"></div></div><div><div class="clock" style="--hour-angle: 0; --minute-angle: 90; --dur: 0.4;"></div><div class="clock" style="--hour-angle: 180; --minute-angle: 450; --dur: 0.4;"></div><div class="clock" style="--hour-angle: 0; --minute-angle: 450; --dur: 0.4;"></div><div class="clock" style="--hour-angle: 180; --minute-angle: 90; --dur: 0.4;"></div><div class="clock" style="--hour-angle: 630; --minute-angle: 450; --dur: 0.4;"></div><div class="clock" style="--hour-angle: 270; --minute-angle: 450; --dur: 0.4;"></div><div class="clock" style="--hour-angle: 270; --minute-angle: 90; --dur: 0.4;"></div><div class="clock" style="--hour-angle: 270; --minute-angle: 90; --dur: 0.4;"></div><div class="clock" style="--hour-angle: 630; --minute-angle: 450; --dur: 0.4;"></div><div class="clock" style="--hour-angle: 360; --minute-angle: 270; --dur: 0.4;"></div><div class="clock" style="--hour-angle: 540; --minute-angle: 270; --dur: 0.4;"></div><div class="clock" style="--hour-angle: 270; --minute-angle: 90; --dur: 0.4;"></div><div class="clock" style="--hour-angle: 720; --minute-angle: 270; --dur: 0.4;"></div><div class="clock" style="--hour-angle: 360; --minute-angle: 540; --dur: 0.4;"></div><div class="clock" style="--hour-angle: 540; --minute-angle: 90; --dur: 0.4;"></div><div class="clock" style="--hour-angle: 270; --minute-angle: 90; --dur: 0.4;"></div><div class="clock" style="--hour-angle: 495; --minute-angle: 135; --dur: 0.4;"></div><div class="clock" style="--hour-angle: 135; --minute-angle: 855; --dur: 0.4;"></div><div class="clock" style="--hour-angle: 270; --minute-angle: 450; --dur: 0.4;"></div><div class="clock" style="--hour-angle: 270; --minute-angle: 90; --dur: 0.4;"></div><div class="clock" style="--hour-angle: 135; --minute-angle: 495; --dur: 0.4;"></div><div class="clock" style="--hour-angle: 135; --minute-angle: 495; --dur: 0.4;"></div><div class="clock" style="--hour-angle: 0; --minute-angle: 270; --dur: 0.4;"></div><div class="clock" style="--hour-angle: 180; --minute-angle: 270; --dur: 0.4;"></div></div><div><div class="clock" style="--hour-angle: 0; --minute-angle: 90; --dur: 0.4;"></div><div class="clock" style="--hour-angle: 0; --minute-angle: 180; --dur: 0.4;"></div><div class="clock" style="--hour-angle: 360; --minute-angle: 540; --dur: 0.4;"></div><div class="clock" style="--hour-angle: 540; --minute-angle: 450; --dur: 0.4;"></div><div class="clock" style="--hour-angle: 360; --minute-angle: 270; --dur: 0.4;"></div><div class="clock" style="--hour-angle: 360; --minute-angle: 180; --dur: 0.4;"></div><div class="clock" style="--hour-angle: 540; --minute-angle: 90; --dur: 0.4;"></div><div class="clock" style="--hour-angle: 630; --minute-angle: 450; --dur: 0.4;"></div><div class="clock" style="--hour-angle: 720; --minute-angle: 450; --dur: 0.4;"></div><div class="clock" style="--hour-angle: 720; --minute-angle: 540; --dur: 0.4;"></div><div class="clock" style="--hour-angle: 900; --minute-angle: 630; --dur: 0.4;"></div><div class="clock" style="--hour-angle: 630; --minute-angle: 450; --dur: 0.4;"></div><div class="clock" style="--hour-angle: 990; --minute-angle: 810; --dur: 0.4;"></div><div class="clock" style="--hour-angle: 720; --minute-angle: 450; --dur: 0.4;"></div><div class="clock" style="--hour-angle: 720; --minute-angle: 180; --dur: 0.4;"></div><div class="clock" style="--hour-angle: 540; --minute-angle: 270; --dur: 0.4;"></div><div class="clock" style="--hour-angle: 990; --minute-angle: 90; --dur: 0.4;"></div><div class="clock" style="--hour-angle: 360; --minute-angle: 630; --dur: 0.4;"></div><div class="clock" style="--hour-angle: 360; --minute-angle: 540; --dur: 0.4;"></div><div class="clock" style="--hour-angle: 540; --minute-angle: 90; --dur: 0.4;"></div><div class="clock" style="--hour-angle: 0; --minute-angle: 270; --dur: 0.4;"></div><div class="clock" style="--hour-angle: 0; --minute-angle: 180; --dur: 0.4;"></div><div class="clock" style="--hour-angle: 0; --minute-angle: 180; --dur: 0.4;"></div><div class="clock" style="--hour-angle: 180; --minute-angle: 270; --dur: 0.4;"></div></div><div><div class="clock" style="--hour-angle: 0; --minute-angle: 90; --dur: 0.4;"></div><div class="clock" style="--hour-angle: 1080; --minute-angle: 1260; --dur: 0.4;"></div><div class="clock" style="--hour-angle: 1260; --minute-angle: 2610; --dur: 0.4;"></div><div class="clock" style="--hour-angle: 1575; --minute-angle: 1215; --dur: 0.4;"></div><div class="clock" style="--hour-angle: 1440; --minute-angle: 1350; --dur: 0.4;"></div><div class="clock" style="--hour-angle: 2340; --minute-angle: 1170; --dur: 0.4;"></div><div class="clock" style="--hour-angle: 2790; --minute-angle: 1530; --dur: 0.4;"></div><div class="clock" style="--hour-angle: 3015; --minute-angle: 2655; --dur: 0.4;"></div><div class="clock" style="--hour-angle: 2655; --minute-angle: 2295; --dur: 0.4;"></div><div class="clock" style="--hour-angle: 1710; --minute-angle: 2610; --dur: 0.4;"></div><div class="clock" style="--hour-angle: 2790; --minute-angle: 2610; --dur: 0.4;"></div><div class="clock" style="--hour-angle: 3015; --minute-angle: 1215; --dur: 0.4;"></div><div class="clock" style="--hour-angle: 4095; --minute-angle: 2655; --dur: 0.4;"></div><div class="clock" style="--hour-angle: 1710; --minute-angle: 2610; --dur: 0.4;"></div><div class="clock" style="--hour-angle: 1710; --minute-angle: 1170; --dur: 0.4;"></div><div class="clock" style="--hour-angle: 1575; --minute-angle: 1215; --dur: 0.4;"></div><div class="clock" style="--hour-angle: 3960; --minute-angle: 1170; --dur: 0.4;"></div><div class="clock" style="--hour-angle: 2340; --minute-angle: 2790; --dur: 0.4;"></div><div class="clock" style="--hour-angle: 2520; --minute-angle: 2430; --dur: 0.4;"></div><div class="clock" style="--hour-angle: 1620; --minute-angle: 90; --dur: 0.4;"></div><div class="clock" style="--hour-angle: 1080; --minute-angle: 1350; --dur: 0.4;"></div><div class="clock" style="--hour-angle: 1080; --minute-angle: 1260; --dur: 0.4;"></div><div class="clock" style="--hour-angle: 0; --minute-angle: 1260; --dur: 0.4;"></div><div class="clock" style="--hour-angle: 180; --minute-angle: 270; --dur: 0.4;"></div></div><div><div class="clock" style="--hour-angle: 0; --minute-angle: 90; --dur: 0.4;"></div><div class="clock" style="--hour-angle: 6840; --minute-angle: 7020; --dur: 0.4;"></div><div class="clock" style="--hour-angle: 7200; --minute-angle: 14220; --dur: 0.4;"></div><div class="clock" style="--hour-angle: 7380; --minute-angle: 7290; --dur: 0.4;"></div><div class="clock" style="--hour-angle: 14040; --minute-angle: 13950; --dur: 0.4;"></div><div class="clock" style="--hour-angle: 14040; --minute-angle: 13860; --dur: 0.4;"></div><div class="clock" style="--hour-angle: 14220; --minute-angle: 6930; --dur: 0.4;"></div><div class="clock" style="--hour-angle: 14310; --minute-angle: 14130; --dur: 0.4;"></div><div class="clock" style="--hour-angle: 21240; --minute-angle: 20970; --dur: 0.4;"></div><div class="clock" style="--hour-angle: 14400; --minute-angle: 21060; --dur: 0.4;"></div><div class="clock" style="--hour-angle: 21420; --minute-angle: 21150; --dur: 0.4;"></div><div class="clock" style="--hour-angle: 14310; --minute-angle: 7290; --dur: 0.4;"></div><div class="clock" style="--hour-angle: 35190; --minute-angle: 28170; --dur: 0.4;"></div><div class="clock" style="--hour-angle: 14400; --minute-angle: 27810; --dur: 0.4;"></div><div class="clock" style="--hour-angle: 14400; --minute-angle: 7020; --dur: 0.4;"></div><div class="clock" style="--hour-angle: 7380; --minute-angle: 7110; --dur: 0.4;"></div><div class="clock" style="--hour-angle: 35190; --minute-angle: 13770; --dur: 0.4;"></div><div class="clock" style="--hour-angle: 20880; --minute-angle: 27990; --dur: 0.4;"></div><div class="clock" style="--hour-angle: 20880; --minute-angle: 21060; --dur: 0.4;"></div><div class="clock" style="--hour-angle: 7380; --minute-angle: 90; --dur: 0.4;"></div><div class="clock" style="--hour-angle: 13680; --minute-angle: 13950; --dur: 0.4;"></div><div class="clock" style="--hour-angle: 13680; --minute-angle: 13860; --dur: 0.4;"></div><div class="clock" style="--hour-angle: 0; --minute-angle: 13860; --dur: 0.4;"></div><div class="clock" style="--hour-angle: 180; --minute-angle: 270; --dur: 0.4;"></div></div></div></div>
  
    <script id="rendered-js" type="module">
import React, { useState, useEffect, useRef } from "https://esm.sh/react@19";
import { createRoot } from "https://esm.sh/react-dom@19/client";

const H = { h: 0, m: 180 },
V = { h: 270, m: 90 },
TL = { h: 180, m: 270 },
TR = { h: 0, m: 270 },
BL = { h: 180, m: 90 },
BR = { h: 0, m: 90 },
E = { h: 135, m: 135 };

const digits = [
[
BR, H, H, BL,
V, BR, BL, V,
V, V, V, V,
V, V, V, V,
V, TR, TL, V,
TR, H, H, TL],

[
BR, H, BL, E,
TR, BL, V, E,
E, V, V, E,
E, V, V, E,
BR, TL, TR, BL,
TR, H, H, TL],

[
BR, H, H, BL,
TR, H, BL, V,
BR, H, TL, V,
V, BR, H, TL,
V, TR, H, BL,
TR, H, H, TL],

[
BR, H, H, BL,
TR, H, BL, V,
E, BR, TL, V,
E, TR, BL, V,
BR, H, TL, V,
TR, H, H, TL],

[
BR, BL, BR, BL,
V, V, V, V,
V, TR, TL, V,
TR, H, BL, V,
E, E, V, V,
E, E, TR, TL],

[
BR, H, H, BL,
V, BR, H, TL,
V, TR, H, BL,
TR, H, BL, V,
BR, H, TL, V,
TR, H, H, TL],

[
BR, H, H, BL,
V, BR, H, TL,
V, TR, H, BL,
V, BR, BL, V,
V, TR, TL, V,
TR, H, H, TL],

[
BR, H, H, BL,
TR, H, BL, V,
E, E, V, V,
E, E, V, V,
E, E, V, V,
E, E, TR, TL],

[
BR, H, H, BL,
V, BR, BL, V,
V, TR, TL, V,
V, BR, BL, V,
V, TR, TL, V,
TR, H, H, TL],

[
BR, H, H, BL,
V, BR, BL, V,
V, TR, TL, V,
TR, H, BL, V,
BR, H, TL, V,
TR, H, H, TL]];

const normalizeAngle = (next, prev) => {
  const delta = ((next - prev) % 360 + 360) % 360;
  return prev + delta;
};

const getTimeDigits = () => {
  const now = new Date();
  return [
  now.getHours(),
  now.getMinutes(),
  now.getSeconds()].
  flatMap(val => String(val).padStart(2, "0").split("").map(Number));
};

const randomAngle = () => Math.floor(Math.random() * 360);

return /*#__PURE__*/(
    React.createElement("div", {
      className: "clock",
      style: {
        "--hour-angle": initial ? randomAngle() : hourAngle,
        "--minute-angle": initial ? randomAngle() : minuteAngle,
        "--dur": initial ? 1 : 0.4 } }));

};

const App = () => {
  const [time, setTime] = useState(Array(6).fill(0));
  const [initial, setInitial] = useState(true);

useEffect(() => {
    let updateTimerId;
    const updateTime = () => {
      setTime(getTimeDigits());
      const now = Date.now();
      const delay = 1000 - now % 1000;
      updateTimerId = setTimeout(updateTime, delay);
    };

const initialTimerId = setTimeout(() => {
      setInitial(false);
      updateTime();
    }, 600);

return () => {
      clearTimeout(updateTimerId);
      clearTimeout(initialTimerId);
    };
  }, []);

return /*#__PURE__*/(
    React.createElement("div", { className: "app" },
    time.map((t, i) => /*#__PURE__*/
    React.createElement("div", { key: i },
    digits[t].map(({ h, m }, j) => /*#__PURE__*/React.createElement(Clock, { key: j, h: h, m: m, initial: initial }))))));

};

createRoot(document.getElementById('root')).render( /*#__PURE__*/React.createElement(App, null));

</script>

</body></html>

CSS

body {
  padding: 0;
  margin: 0;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

.app {
  --clock-size: 3vw;
  --gap: calc(var(--clock-size) * 0.05);
  --clock-segment-w: calc(var(--clock-size) * 4 + var(--gap) * 5);
  --clock-segment-h: calc(var(--clock-size) * 6 + var(--gap) * 5);
  font-family: sans-serif;
  text-align: center;
  display: flex;
  gap: var(--gap);
  align-items: center;
  justify-content: center;
  height: 100vh;
  padding-left: calc(var(--clock-size) + var(--gap) * 2);
}

.app > div {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap);
  width: var(--clock-segment-w);
  height: var(--clock-segment-h);
}

.app > div:nth-of-type(even) {
  margin-right: var(--clock-size);
}

.clock {
  --w: 47%;
  --h: 3px;
  --dur: 0.4s;
  position: relative;
  width: var(--clock-size);
  height: var(--clock-size);
  border-radius: 50%;
  flex-shrink: 0;
  border: 2px solid white;
  background: linear-gradient(225deg, #d0d0d0 10%, white);
  box-shadow: -2px 2px 6px #d0d0d0,
               2px -2px 6px #ffffff;
}

.clock::before,
.clock::after {
  position: absolute;
  content: '';
  top: calc(50% - var(--h) * 0.5);
  left: 50%;
  transform-origin: 0% 50%;
  width: var(--w);
  height: var(--h);
  background: black;
  border-radius: 9999px;
  transition: calc(var(--dur) * 1s) ease-in-out;
  transform: rotate(calc(var(--angle) * 1deg));
}

.clock::before {
  --angle: var(--hour-angle);
}

.clock::after {
  --angle: var(--minute-angle);
}

@media (max-width: 700px) {
  .clock {
    --h: 2px;
    border: 1px solid white;
  }
}

@media (max-width: 500px) {
  .clock {
    --h: 1px;
    --w: 50%;
  }
}

Recomendado

Um código de Mete

Demonstração de fogos de artifício animados em CSS, vaga-lumes e girassóis

Trecho de código de animação de labirinto CSS

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS