var Component=(()=>{var y=Object.create;var a=Object.defineProperty;var F=Object.getOwnPropertyDescriptor;var C=Object.getOwnPropertyNames;var m=Object.getPrototypeOf,B=Object.prototype.hasOwnProperty;var N=(e,l)=>()=>(l||e((l={exports:{}}).exports,l),l.exports),x=(e,l)=>{for(var s in l)a(e,s,{get:l[s],enumerable:!0})},d=(e,l,s,r)=>{if(l&&typeof l=="object"||typeof l=="function")for(let c of C(l))!B.call(e,c)&&c!==s&&a(e,c,{get:()=>l[c],enumerable:!(r=F(l,c))||r.enumerable});return e};var u=(e,l,s)=>(s=e!=null?y(m(e)):{},d(l||!e||!e.__esModule?a(s,"default",{value:e,enumerable:!0}):s,e)),v=e=>d(a({},"__esModule",{value:!0}),e);var p=N((R,h)=>{h.exports=_jsx_runtime});var w={};x(w,{default:()=>g,frontmatter:()=>A});var n=u(p()),A={title:"Particle Digital clock",description:"Display a particle digital clock with animations.",featured:!0,component:!0};function D(e){let l=Object.assign({div:"div",pre:"pre",code:"code",span:"span",h2:"h2",a:"a"},e.components),{ComponentPreviewCode:s,Tabs:r,TabsContent:c,Steps:i,Step:t}=l;return s||o("ComponentPreviewCode",!0),t||o("Step",!0),i||o("Steps",!0),r||o("Tabs",!0),c||o("TabsContent",!0),(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(s,{name:"super-clock",description:"A particle digital clock",children:(0,n.jsx)(l.div,{"data-rehype-pretty-code-fragment":"",children:(0,n.jsx)(l.pre,{"data-language":"tsx","data-theme":"default",__rawString__:`"use client"; import { useEffect, useRef } from "react" interface Particle { x: number y: number size: number moveTo: (tx: number, ty: number) => void draw: () => void } export function ParticleClock() { const canvasRef = useRef(null) const particlesRef = useRef([]) const timeTextRef = useRef(null) // \u83B7\u53D6\u8303\u56F4\u503C\u5185\u7684\u968F\u673A\u6574\u6570 const getRandom = (min: number, max: number) => { return Math.floor(Math.random() * (max + 1 - min) + min) } // \u751F\u6210\u7C92\u5B50\u7C7B class Particle { x: number y: number size: number constructor(canvas: HTMLCanvasElement) { this.size = getRandom(2, 6) const r = Math.min(canvas.width, canvas.height) / 2 const rad = (getRandom(0, 360) * Math.PI) / 100 const cx = canvas.width / 2 const cy = canvas.height / 2 this.x = cx + r * Math.cos(rad) this.y = cy + r * Math.sin(rad) } draw(ctx: CanvasRenderingContext2D) { ctx.beginPath() ctx.arc(this.x, this.y, this.size, 0, 2 * Math.PI) ctx.fillStyle = "#5445544d" ctx.fill() } moveTo(tx: number, ty: number) { const duration = 500 const sx = this.x const sy = this.y const xSpeed = (tx - sx) / duration const ySpeed = (ty - sy) / duration const startTime = Date.now() const _move = () => { const t = Date.now() - startTime const x = sx + xSpeed * t const y = sy + ySpeed * t this.x = x this.y = y if (t >= duration) { this.x = tx this.y = ty return } requestAnimationFrame(_move) } _move() } } // \u521D\u59CB\u5316\u753B\u5E03\u5927\u5C0F const initCanvasSize = (canvas: HTMLCanvasElement) => { canvas.width = window.innerWidth canvas.height = window.innerHeight } // \u6E05\u7A7A\u753B\u5E03 const clear = (ctx: CanvasRenderingContext2D, canvas: HTMLCanvasElement) => { ctx.clearRect(0, 0, canvas.width, canvas.height) } // \u83B7\u53D6\u5F53\u524D\u65F6\u95F4\u5B57\u7B26\u4E32 const getTimeText = () => { return new Date().toTimeString().substring(0, 8) } // \u83B7\u53D6\u6240\u6709\u9ED1\u8272\u50CF\u7D20\u70B9\u5750\u6807 const getPoints = ( ctx: CanvasRenderingContext2D, canvas: HTMLCanvasElement ) => { const points: [number, number][] = [] const { data } = ctx.getImageData(0, 0, canvas.width, canvas.height) const gap = 5 for (let i = 0; i < canvas.width; i += gap) { for (let j = 0; j < canvas.height; j += gap) { const index = (i + j * canvas.width) * 4 const r = data[index] const g = data[index + 1] const b = data[index + 2] const a = data[index + 3] if (r === 0 && g === 0 && b === 0 && a === 255) { points.push([i, j]) } } } return points } // \u66F4\u65B0\u7C92\u5B50 const update = (ctx: CanvasRenderingContext2D, canvas: HTMLCanvasElement) => { const curTimeText = getTimeText() if (timeTextRef.current === curTimeText) { return } timeTextRef.current = curTimeText const { width, height } = canvas ctx.fillStyle = "#000" ctx.textBaseline = "middle" ctx.font = "240px 'DS-Digital', sans-serif" ctx.textAlign = "center" ctx.fillText(curTimeText, width / 2, height / 2) const points = getPoints(ctx, canvas) clear(ctx, canvas) for (let i = 0; i < points.length; i++) { const [x, y] = points[i] let p = particlesRef.current[i] if (!p) { p = new Particle(canvas) particlesRef.current.push(p) } p.moveTo(x, y) } if (points.length < particlesRef.current.length) { particlesRef.current.splice(points.length) } } // \u7ED8\u5236\u51FD\u6570 const draw = (ctx: CanvasRenderingContext2D, canvas: HTMLCanvasElement) => { clear(ctx, canvas) update(ctx, canvas) for (const p of particlesRef.current) { p.draw(ctx) } requestAnimationFrame(() => draw(ctx, canvas)) } useEffect(() => { const canvas = canvasRef.current if (!canvas) return const ctx = canvas.getContext("2d", { willReadFrequently: true, }) if (!ctx) return initCanvasSize(canvas) draw(ctx, canvas) const handleResize = () => { initCanvasSize(canvas) } window.addEventListener("resize", handleResize) return () => window.removeEventListener("resize", handleResize) }, []) return

Particle Digital clock

Installation

Copy and paste the clock code into your project.