feat: add background

poooi · Sep 29, 2024 · fbbeb4a · fbbeb4a
1 parent 0a5fbd3
commit fbbeb4a
Show file tree

Hide file tree

Showing 5 changed files with 170 additions and 34 deletions.
diff --git a/package.json b/package.json
@@ -19,8 +19,11 @@
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.1",
     "geist": "^1.3.0",
+    "lodash": "^4.17.21",
     "lucide-react": "^0.446.0",
     "next": "^14.2.4",
+    "polished": "^4.3.1",
+    "random": "^5.1.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "tailwind-merge": "^2.5.2",
@@ -31,6 +34,7 @@
     "@cloudflare/workers-types": "^4.20240925.0",
     "@playwright/test": "^1.47.2",
     "@types/eslint": "^8.56.10",
+    "@types/lodash": "^4.17.9",
     "@types/node": "^20.14.10",
     "@types/react": "^18.3.3",
     "@types/react-dom": "^18.3.0",

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -3,6 +3,8 @@ import '~/styles/globals.css'
 import { GeistSans } from 'geist/font/sans'
 import { type Metadata } from 'next'
 
+import { Background } from '~/components/background'
+
 export const metadata: Metadata = {
   title: 'Create T3 App',
   description: 'Generated by create-t3-app',
@@ -14,7 +16,10 @@ export default function RootLayout({
 }: Readonly<{ children: React.ReactNode }>) {
   return (
     <html lang="en" className={`${GeistSans.variable}`}>
-      <body>{children}</body>
+      <body>
+        <Background />
+        {children}
+      </body>
     </html>
   )
 }
diff --git a/src/app/page.tsx b/src/app/page.tsx
@@ -1,37 +1,5 @@
-import Link from 'next/link'
-
 export default function HomePage() {
   return (
-    <main className="flex min-h-screen flex-col items-center justify-center bg-gradient-to-b from-[#2e026d] to-[#15162c] text-white">
-      <div className="container flex flex-col items-center justify-center gap-12 px-4 py-16">
-        <h1 className="text-5xl font-extrabold tracking-tight text-white sm:text-[5rem]">
-          Create <span className="text-[hsl(280,100%,70%)]">T3</span> App
-        </h1>
-        <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 md:gap-8">
-          <Link
-            className="flex max-w-xs flex-col gap-4 rounded-xl bg-white/10 p-4 text-white hover:bg-white/20"
-            href="https://create.t3.gg/en/usage/first-steps"
-            target="_blank"
-          >
-            <h3 className="text-2xl font-bold">First Steps →</h3>
-            <div className="text-lg">
-              Just the basics - Everything you need to know to set up your
-              database and authentication.
-            </div>
-          </Link>
-          <Link
-            className="flex max-w-xs flex-col gap-4 rounded-xl bg-white/10 p-4 text-white hover:bg-white/20"
-            href="https://create.t3.gg/en/introduction"
-            target="_blank"
-          >
-            <h3 className="text-2xl font-bold">Documentation →</h3>
-            <div className="text-lg">
-              Learn more about Create T3 App, the libraries it uses, and how to
-              deploy it.
-            </div>
-          </Link>
-        </div>
-      </div>
-    </main>
+    <main className="flex min-h-screen flex-col items-center justify-center"></main>
   )
 }
diff --git a/src/components/background.tsx b/src/components/background.tsx
@@ -0,0 +1,110 @@
+'use client'
+
+import debounce from 'lodash/debounce'
+import times from 'lodash/times'
+import { rgba } from 'polished'
+import random from 'random'
+import { useEffect, useRef } from 'react'
+
+/**
+ * Draws an hexagone
+ * @param ctx canvas context
+ * @param x x coordinate
+ * @param y y coordinate
+ * @param r radius or edge length
+ * @param fillStyle fill style
+ * @param strokeStyle stroke style
+ */
+const drawHexagone = (
+  ctx: CanvasRenderingContext2D,
+  x: number,
+  y: number,
+  r: number,
+  fillStyle: CanvasFillStrokeStyles['fillStyle'],
+  strokeStyle: CanvasFillStrokeStyles['strokeStyle'],
+) => {
+  ctx.beginPath()
+
+  ctx.moveTo(x, y - r)
+
+  const unit = Math.PI / 3
+  // anti-clockwise
+  times(6, (n: number) => {
+    const angle = Math.PI / 2 + unit * (n + 1)
+    ctx.lineTo(x + r * Math.cos(angle), y - r * Math.sin(angle))
+  })
+  ctx.closePath()
+  ctx.fillStyle = fillStyle
+  ctx.strokeStyle = strokeStyle
+  ctx.lineWidth = 1
+  ctx.fill()
+  ctx.stroke()
+}
+
+const normal = random.normal(0.75, 0.25)
+
+/**
+ * get a random x,y coordinate with provide width and height
+ * @param w width
+ * @param h height
+ */
+const getRandomXY = (w: number, h: number) => {
+  const x = Math.floor(w * Math.random())
+  const y = Math.floor(h * normal())
+
+  return { x, y }
+}
+
+export const Background = () => {
+  const canvas = useRef<HTMLCanvasElement>(null)
+
+  // const theme = useContext(ThemeContext)
+
+  const drawCanvasRef = useRef<() => void>()
+
+  useEffect(() => {
+    const drawCanvas = () => {
+      const foreground = `hsl(${getComputedStyle(
+        document.documentElement,
+      ).getPropertyValue('--foreground')})`
+
+      console.log(foreground)
+      if (!canvas.current) {
+        return
+      }
+      const cvs = canvas.current
+      const ctx = cvs.getContext('2d')!
+      const pr = window.devicePixelRatio || 1
+      const w = window.innerWidth
+      const h = window.innerHeight
+
+      cvs.width = w * pr
+      cvs.height = h * pr
+      cvs.style.width = `${w}px`
+      cvs.style.height = `${h}px`
+      ctx.scale(pr, pr)
+      ctx.clearRect(0, 0, w, h)
+
+      times(30, () => {
+        const { x, y } = getRandomXY(w, h)
+
+        drawHexagone(ctx, x, y, 50, `${rgba(foreground, 0.1)}`, 'transparent')
+      })
+      times(30, () => {
+        const { x, y } = getRandomXY(w, h)
+
+        drawHexagone(ctx, x, y, 50, 'transparent', `${rgba(foreground, 0.1)}`)
+      })
+    }
+
+    if (drawCanvasRef.current) {
+      window.removeEventListener('resize', drawCanvasRef.current)
+    }
+    drawCanvasRef.current = debounce(drawCanvas, 100)
+
+    drawCanvas()
+    window.addEventListener('resize', drawCanvasRef.current)
+  }, [canvas])
+
+  return <canvas className="-z-1 t-0 l-0 fixed bg-background" ref={canvas} />
+}