Merge pull request #127 from ReoHakase/126/add-aurora

feat: ✨ (`/docs/[.....slug]`) Apply aurora effects to background of the `/docs` layout (#126)
ReoHakase · Apr 1, 2024 · 3edec5f · 3edec5f
2 parents a1b2f51 + 73cfc74
commit 3edec5f
Show file tree

Hide file tree

Showing 4 changed files with 148 additions and 59 deletions.
diff --git a/apps/web/panda.config.ts b/apps/web/panda.config.ts
@@ -105,6 +105,14 @@ export default defineConfig({
   theme: {
     extend: {
       keyframes: {
+        aurora: {
+          from: {
+            backgroundPosition: '50% 50%, 50% 50%',
+          },
+          to: {
+            backgroundPosition: '350% 50%, 350% 50%',
+          },
+        },
         enter: {
           from: {
             opacity: 'var(--keyframe-enter-opacity, 1)',

diff --git a/apps/web/src/app/docs/layout.tsx b/apps/web/src/app/docs/layout.tsx
@@ -1,4 +1,5 @@
 import type { ReactNode } from 'react';
+import { Aurora } from '@/features/landingPage/components/Aurora/Aurora';
 import { Navbar, NavbarButtonContainer } from '@/features/navigation/components/Navbar/Navbar';
 import { Sidebar } from '@/features/navigation/components/Sidebar/Sidebar';
 import { css } from 'styled-system/css';
@@ -11,74 +12,77 @@ type DocsLayoutProps = {
 };
 
 const DocsLayout = ({ titleIndicator, pageSpecificNavigations, children }: DocsLayoutProps): ReactNode => (
-  <div
-    className={css({
-      pos: 'relative',
-      w: 'full',
-      display: 'grid',
-      gridTemplateColumns: '1fr auto 1fr',
-      alignItems: 'start',
-      lgDown: {
-        gridTemplateColumns: '0 100% 0',
-        gap: '0',
-      },
-      lgToXl: {
-        gridTemplateColumns: '1fr auto 0',
-        gap: '4',
-      },
-      xl: {
-        gridTemplateColumns: '1fr auto 1fr',
-        gap: '4',
-      },
-    })}
-  >
-    <Navbar
-      className={css({
-        zIndex: '1',
-      })}
-    >
-      {titleIndicator}
-      <NavbarButtonContainer>{pageSpecificNavigations}</NavbarButtonContainer>
-    </Navbar>
-    <Sidebar
+  <>
+    <Aurora />
+    <div
       className={css({
+        pos: 'relative',
         w: 'full',
-        maxW: '80',
+        display: 'grid',
+        gridTemplateColumns: '1fr auto 1fr',
+        alignItems: 'start',
         lgDown: {
-          display: 'none',
+          gridTemplateColumns: '0 100% 0',
+          gap: '0',
         },
-      })}
-    />
-    <div
-      className={css({
-        gridColumn: '2 / 3',
-        w: {
-          base: 'full',
-          lg: '800px',
+        lgToXl: {
+          gridTemplateColumns: '1fr auto 0',
+          gap: '4',
         },
-        display: 'flex',
-        flexDir: 'column',
-        justifyContent: 'start',
-        alignItems: 'center',
-      })}
-    >
-      {children}
-    </div>
-    <div
-      className={css({
-        display: 'flex',
-        flexDir: 'column',
-        justifyContent: 'start',
-        alignItems: 'start',
-        xlDown: {
-          display: 'none',
-          srOnly: true,
+        xl: {
+          gridTemplateColumns: '1fr auto 1fr',
+          gap: '4',
         },
       })}
     >
-      {/* Table of Content here */}
+      <Navbar
+        className={css({
+          zIndex: '1',
+        })}
+      >
+        {titleIndicator}
+        <NavbarButtonContainer>{pageSpecificNavigations}</NavbarButtonContainer>
+      </Navbar>
+      <Sidebar
+        className={css({
+          w: 'full',
+          maxW: '80',
+          lgDown: {
+            display: 'none',
+          },
+        })}
+      />
+      <div
+        className={css({
+          gridColumn: '2 / 3',
+          w: {
+            base: 'full',
+            lg: '800px',
+          },
+          display: 'flex',
+          flexDir: 'column',
+          justifyContent: 'start',
+          alignItems: 'center',
+        })}
+      >
+        {children}
+      </div>
+      <div
+        className={css({
+          display: 'flex',
+          flexDir: 'column',
+          justifyContent: 'start',
+          alignItems: 'start',
+          xlDown: {
+            display: 'none',
+            srOnly: true,
+          },
+        })}
+      >
+        {/* Table of Content here */}
+      </div>
     </div>
-  </div>
+  </>
 );
 
 export default DocsLayout;
diff --git a/apps/web/src/features/landingPage/components/Aurora/Aurora.story.tsx b/apps/web/src/features/landingPage/components/Aurora/Aurora.story.tsx
@@ -0,0 +1,15 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Aurora } from './Aurora';
+// import { css } from 'styled-system/css';
+
+type Story = StoryObj<typeof Aurora>;
+
+const meta: Meta<typeof Aurora> = {
+  component: Aurora,
+  tags: ['autodocs'],
+  args: {},
+};
+
+export default meta;
+
+export const Default: Story = {};
diff --git a/apps/web/src/features/landingPage/components/Aurora/Aurora.tsx b/apps/web/src/features/landingPage/components/Aurora/Aurora.tsx
@@ -0,0 +1,62 @@
+import React from 'react';
+import type { ReactNode, ComponentPropsWithoutRef } from 'react';
+import { css, cx } from 'styled-system/css';
+
+export type AuroraProps = ComponentPropsWithoutRef<'div'>;
+
+export const Aurora = ({ className, ...props }: AuroraProps): ReactNode => (
+  <div
+    className={cx(
+      css({
+        pos: 'absolute',
+        top: '0',
+        right: '0',
+        display: 'flex',
+        flexDir: 'column',
+        w: '100vw',
+        h: '500px',
+        alignItems: 'center',
+        justifyContent: 'center',
+        transition: 'background-color 0.5s',
+        overflow: 'hidden',
+      }),
+      className,
+    )}
+    {...props}
+  >
+    <div
+      className={css({
+        pos: 'absolute',
+        inset: '-10px',
+        opacity: 0.3,
+        pointerEvents: 'none',
+        bgImage: {
+          _light:
+            'repeating-linear-gradient( 100deg, #fff 0%, #fff 7%, transparent 10%, transparent 12%, #fff 16% ), repeating-linear-gradient( 100deg, #60a5fa 10%, #e879f9 16%, #5eead4 22%, #60a5fa 30% )',
+          _dark:
+            'repeating-linear-gradient( 100deg, #000 0%, #000 7%, transparent 10%, transparent 12%, #000 16% ), repeating-linear-gradient( 100deg, #60a5fa 10%, #e879f9 16%, #5eead4 22%, #60a5fa 30% )',
+        },
+        bgSize: '300%, 200%',
+        bgPosition: '50% 50%, 50% 50%',
+        animation: 'aurora 180s ease-in-out -70s infinite alternate',
+        _light: {
+          filter: 'blur(10px)',
+        },
+        _dark: {
+          filter: 'blur(10px)',
+        },
+        maskImage: 'radial-gradient(ellipse at 100% 0%, token(colors.keyplate.1) 10%, transparent 70%)',
+        '&::after': {
+          content: '""',
+          pos: 'absolute',
+          inset: '-10px',
+          bgImage:
+            'repeating-linear-gradient( 100deg, #000 0%, #000 7%, transparent 10%, transparent 12%, #000 16% ), repeating-linear-gradient( 100deg, #60a5fa 10%, #e879f9 16%, #5eead4 22%, #60a5fa 30% )',
+          bgSize: '200%, 100%',
+          bgAttachment: 'fixed',
+          mixBlendMode: 'overlay',
+        },
+      })}
+    />
+  </div>
+);