feat: Aceternity bg dot, Spotlight (#165)

noelrohi · Mar 7, 2024 · 0d3d0da · 0d3d0da
1 parent bbb7e17
commit 0d3d0da
Show file tree

Hide file tree

Showing 6 changed files with 161 additions and 14 deletions.
diff --git a/package.json b/package.json
@@ -41,7 +41,9 @@
     "drizzle-orm": "^0.29.4",
     "embla-carousel-autoplay": "8.0.0",
     "embla-carousel-react": "8.0.0",
+    "framer-motion": "^11.0.8",
     "geist": "^1.2.1",
+    "mini-svg-data-uri": "^1.4.4",
     "next": "14.1.3",
     "next-auth": "5.0.0-beta.15",
     "next-pwa": "5.6.0",

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/app/(lobby)/page.tsx b/src/app/(lobby)/page.tsx
@@ -1,3 +1,4 @@
+import { Spotlight } from "@/components/aceternity/spotlight";
 import { Icons } from "@/components/icons";
 import ShimmerButton from "@/components/magicui/shimmer-button";
 // import { Badge } from "@/components/ui/badge";
@@ -9,7 +10,11 @@ export default function IndexPage() {
   return (
     <>
       <section className="space-y-6 pt-6 pb-8 lg:py-32 md:pt-10 md:pb-12">
-        <div className="container flex max-w-5xl flex-col items-center gap-4 text-center">
+        <div className="container relative flex max-w-5xl flex-col items-center gap-4 text-center">
+          <Spotlight
+            className="-top-40 md:-top-20 left-0 md:left-60"
+            fill="white"
+          />
           {/* <Link href={"/notifications"}>
             <Badge variant={"pill"}>We added anilist notifications 🎉</Badge>
           </Link> */}

diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -2,7 +2,6 @@ import "./globals.css";
 
 import type { Metadata, Viewport } from "next";
 
-import GridPattern from "@/components/magicui/grid-pattern";
 import PostHogPageview, { PHProvider } from "@/components/posthog-provider";
 import { StaffToolbar } from "@/components/staff-toolbar";
 import { TailwindIndicator } from "@/components/tailwind-indicator";
@@ -77,7 +76,7 @@ export default function RootLayout({ children }: RootLayoutProps) {
     <>
       <html lang="en" className={geistVariable} suppressHydrationWarning>
         <head />
-        <body className="min-h-screen bg-background font-sans antialiased">
+        <body className="min-h-screen bg-background bg-dot-black/[0.1] font-sans antialiased dark:bg-dot-white/[0.1]">
           <ThemeProvider attribute="class" defaultTheme="system" enableSystem>
             <PHProvider>{children}</PHProvider>
             <TailwindIndicator />
@@ -89,15 +88,6 @@ export default function RootLayout({ children }: RootLayoutProps) {
           <Suspense>
             <StaffToolbar />
           </Suspense>
-          <GridPattern
-            width={40}
-            height={40}
-            x={-1}
-            y={-1}
-            className={
-              "-z-10 stroke-gray-300/30 [mask-image:linear-gradient(to_bottom_left,white,transparent,transparent)]"
-            }
-          />
         </body>
       </html>
     </>

diff --git a/src/components/aceternity/spotlight.tsx b/src/components/aceternity/spotlight.tsx
@@ -0,0 +1,56 @@
+import { cn } from "@/lib/utils";
+import React from "react";
+
+type SpotlightProps = {
+  className?: string;
+  fill?: string;
+};
+
+export const Spotlight = ({ className, fill }: SpotlightProps) => {
+  return (
+    <svg
+      className={cn(
+        "pointer-events-none absolute z-[1] h-[169%] w-[138%] animate-spotlight opacity-0 lg:w-[84%]",
+        className,
+      )}
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 3787 2842"
+      fill="none"
+    >
+      <g filter="url(#filter)">
+        <ellipse
+          cx="1924.71"
+          cy="273.501"
+          rx="1924.71"
+          ry="273.501"
+          transform="matrix(-0.822377 -0.568943 -0.568943 0.822377 3631.88 2291.09)"
+          fill={fill || "white"}
+          fillOpacity="0.21"
+        />
+      </g>
+      <defs>
+        <filter
+          id="filter"
+          x="0.860352"
+          y="0.838989"
+          width="3785.16"
+          height="2840.26"
+          filterUnits="userSpaceOnUse"
+          colorInterpolationFilters="sRGB"
+        >
+          <feFlood floodOpacity="0" result="BackgroundImageFix" />
+          <feBlend
+            mode="normal"
+            in="SourceGraphic"
+            in2="BackgroundImageFix"
+            result="shape"
+          />
+          <feGaussianBlur
+            stdDeviation="151"
+            result="effect1_foregroundBlur_1065_8"
+          />
+        </filter>
+      </defs>
+    </svg>
+  );
+};
diff --git a/tailwind.config.js b/tailwind.config.js
@@ -1,3 +1,10 @@
+const svgToDataUri = require("mini-svg-data-uri");
+
+const {
+  default: flattenColorPalette,
+} = require("tailwindcss/lib/util/flattenColorPalette");
+
+
 /** @type {import('tailwindcss').Config} */
 module.exports = {
   darkMode: ["class"],
@@ -142,6 +149,7 @@ module.exports = {
         sm: "calc(var(--radius) - 4px)",
       },
       animation: {
+        spotlight: "spotlight 2s ease .75s 1 forwards",
         "accordion-down": "accordion-down 0.2s ease-out",
         "accordion-up": "accordion-up 0.2s ease-out",
         spinLinear: "spin calc(var(--speed) * 2) infinite linear",
@@ -157,7 +165,16 @@ module.exports = {
           from: { height: "var(--radix-accordion-content-height)" },
           to: { height: 0 },
         },
-
+        spotlight: {
+          "0%": {
+            opacity: 0,
+            transform: "translate(-72%, -62%) scale(0.5)",
+          },
+          "100%": {
+            opacity: 1,
+            transform: "translate(-50%,-40%) scale(1)",
+          },
+        },
         spin: {
           "0%": {
             rotate: "0deg",
@@ -222,5 +239,39 @@ module.exports = {
   plugins: [
     require("@headlessui/tailwindcss"),
     require("tailwindcss-animate"),
+    addVariablesForColors,
+    ({ matchUtilities, theme }) => {
+      matchUtilities(
+        {
+          "bg-grid": (value) => ({
+            backgroundImage: `url("${svgToDataUri(
+              `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="32" height="32" fill="none" stroke="${value}"><path d="M0 .5H31.5V32"/></svg>`
+            )}")`,
+          }),
+          "bg-grid-small": (value) => ({
+            backgroundImage: `url("${svgToDataUri(
+              `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="8" height="8" fill="none" stroke="${value}"><path d="M0 .5H31.5V32"/></svg>`
+            )}")`,
+          }),
+          "bg-dot": (value) => ({
+            backgroundImage: `url("${svgToDataUri(
+              `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="16" height="16" fill="none"><circle fill="${value}" id="pattern-circle" cx="10" cy="10" r="1.6257413380501518"></circle></svg>`
+            )}")`,
+          }),
+        },
+        { values: flattenColorPalette(theme("backgroundColor")), type: "color" }
+      );
+    },
   ],
-};
+};
+
+function addVariablesForColors({ addBase, theme }) {
+  const allColors = flattenColorPalette(theme("colors"));
+  const newVars = Object.fromEntries(
+    Object.entries(allColors).map(([key, val]) => [`--${key}`, val])
+  );
+
+  addBase({
+    ":root": newVars,
+  });
+}