Creating atmospheric background

app/.eslintrc.json

@@ -1,3 +1,6 @@
 {
-  "extends": "next/core-web-vitals"
+  "extends": [
+    "next/core-web-vitals",
+    "next/typescript"
+  ]
 }

app/package.json

@@ -5,9 +5,11 @@
   "scripts": {
     "dev": "next dev",
     "build": "next build",
-    "start": "next start"
+    "start": "next start",
+    "lint": "next lint"
   },
   "dependencies": {
+    "@next/eslint-plugin-next": "^14.2.15",
     "@rainbow-me/rainbowkit": "^2.2.0",
     "@tanstack/react-query": "^5.55.3",
     "next": "^14.2.10",
@@ -19,6 +21,8 @@
   "devDependencies": {
     "@types/node": "^20.14.8",
     "@types/react": "^18.3.5",
+    "eslint": "8.57.0",
+    "eslint-config-next": "14.2.15",
     "typescript": "5.5.2"
   }
 }

app/src/components/Background.tsx

@@ -0,0 +1,18 @@
+import React from "react"
+import styles from '../styles/Background.module.css';
+
+const Background = () => {
+  return <div className={styles.frame}>
+    <div className={`${styles.air} ${styles.background_asset}`} />
+    <div className={`${styles.clouds_small} ${styles.background_asset}`} />
+    <div className={`${styles.clouds_large} ${styles.background_asset}`} />
+    <div className={`${styles.tower} ${styles.background_asset}`} />
+    <div className={`${styles.mountains} ${styles.background_asset}`} />
+    <div className={`${styles.forest} ${styles.background_asset}`} />
+    <div className={`${styles.road} ${styles.background_asset}`} />
+    <div className={`${styles.village} ${styles.background_asset}`} />
+    <div className={`${styles.bonfire} ${styles.background_asset}`} />
+  </div>
+}
+
+export default Background

app/src/components/Header.tsx

@@ -0,0 +1,10 @@
+import React from "react"
+
+const Header = () => {
+  return <header>
+    <h1>mico's Slayery</h1>
+    <p>1213123 million GELD</p>
+  </header>
+}
+
+export default Header

app/src/pages/index.tsx

@@ -2,6 +2,8 @@ import { ConnectButton } from '@rainbow-me/rainbowkit';
 import type { NextPage } from 'next';
 import Head from 'next/head';
 import styles from '../styles/Home.module.css';
+import Header from '../components/Header';
+import Background from '../components/Background';
 
 const Home: NextPage = () => {
   return (
@@ -17,65 +19,12 @@ const Home: NextPage = () => {
 
       <main className={styles.main}>
         <ConnectButton />
-
-        <h1 className={styles.title}>
-          Welcome to <a href="">RainbowKit</a> + <a href="">wagmi</a> +{' '}
-          <a href="https://nextjs.org">Next.js!</a>
-        </h1>
-
-        <p className={styles.description}>
-          Get started by editing{' '}
-          <code className={styles.code}>pages/index.tsx</code>
-        </p>
-
-        <div className={styles.grid}>
-          <a className={styles.card} href="https://rainbowkit.com">
-            <h2>RainbowKit Documentation &rarr;</h2>
-            <p>Learn how to customize your wallet connection flow.</p>
-          </a>
-
-          <a className={styles.card} href="https://wagmi.sh">
-            <h2>wagmi Documentation &rarr;</h2>
-            <p>Learn how to interact with Ethereum.</p>
-          </a>
-
-          <a
-            className={styles.card}
-            href="https://github.com/rainbow-me/rainbowkit/tree/main/examples"
-          >
-            <h2>RainbowKit Examples &rarr;</h2>
-            <p>Discover boilerplate example RainbowKit projects.</p>
-          </a>
-
-          <a className={styles.card} href="https://nextjs.org/docs">
-            <h2>Next.js Documentation &rarr;</h2>
-            <p>Find in-depth information about Next.js features and API.</p>
-          </a>
-
-          <a
-            className={styles.card}
-            href="https://github.com/vercel/next.js/tree/canary/examples"
-          >
-            <h2>Next.js Examples &rarr;</h2>
-            <p>Discover and deploy boilerplate example Next.js projects.</p>
-          </a>
-
-          <a
-            className={styles.card}
-            href="https://vercel.com/new?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
-          >
-            <h2>Deploy &rarr;</h2>
-            <p>
-              Instantly deploy your Next.js site to a public URL with Vercel.
-            </p>
-          </a>
-        </div>
+        <Header />
+        <Background />
       </main>
 
       <footer className={styles.footer}>
-        <a href="https://rainbow.me" rel="noopener noreferrer" target="_blank">
-          Made with ❤️ by your frens at 🌈
-        </a>
+        Made with ❤️ by your fren mic0
       </footer>
     </div>
   );

app/src/styles/Background.module.css

@@ -0,0 +1,121 @@
+.frame {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  border-width: 8px;
+  border-image: url("/background/frame.png") 22 fill / auto space;
+  width: 100%;
+  max-width: 720px;
+  height: 100vh;
+  z-index: -1;
+}
+
+.background_asset {
+  position: absolute;
+  left: 22px;
+  right: 22px;
+  background-size: cover;
+}
+
+.air {
+  background: rgb(0, 0, 0);
+  background: linear-gradient(
+    180deg,
+    rgba(0, 0, 0, 1) 0%,
+    rgba(28, 28, 51, 1) 17%,
+    rgba(255, 0, 0, 1) 43%,
+    rgba(0, 0, 0, 1) 45%
+  );
+  top: 22px;
+  bottom: 22px;
+  animation: thunder_hue 12s linear infinite;
+}
+.clouds_large {
+  top: 250px;
+  height: 150px;
+  background-image: url("/background/clouds_large.png");
+  animation:
+    scrollBackground 80s linear infinite,
+    thunder 4s linear infinite;
+}
+.clouds_small {
+  top: 270px;
+  height: 82px;
+  background-image: url("/background/clouds_small.png");
+  animation:
+    scrollBackground 20s linear infinite,
+    thunder 12s linear infinite;
+}
+.tower {
+  background-image: url("/background/tower.png");
+  width: 218px;
+  height: 240px;
+  top: 200px;
+  animation: thunder_hue_hard 12s linear infinite;
+}
+.mountains {
+  background-image: url("/background/mountains.png");
+  height: 181px;
+  top: 285px;
+  animation: thunder_hue 12s linear infinite;
+}
+.forest {
+  background-image: url("/background/forest.png");
+}
+.road {
+  background-image: url("/background/road.png");
+}
+.village {
+  background-image: url("/background/village.png");
+}
+.bonfire {
+  background-image: url("/background/bonfire.png");
+}
+
+@keyframes scrollBackground {
+  0% {
+    background-position: 0 0;
+  }
+  100% {
+    background-position: 2000% 0;
+  }
+}
+
+@keyframes thunder {
+  1% {
+    filter: saturate(1);
+    transform: scale(1, 1);
+  }
+  5% {
+    filter: saturate(4);
+    transform: scale(1, 1.05);
+  }
+  10% {
+    filter: saturate(1);
+    transform: scale(1, 1);
+  }
+}
+
+@keyframes thunder_hue {
+  1% {
+    filter: saturate(1);
+  }
+  5% {
+    filter: saturate(130%);
+  }
+  10% {
+    filter: saturate(1);
+  }
+}
+
+@keyframes thunder_hue_hard {
+  1% {
+    filter: saturate(1);
+  }
+  5% {
+    filter: saturate(3);
+  }
+  10% {
+    filter: saturate(1);
+  }
+}

app/src/styles/Home.module.css

@@ -3,13 +3,13 @@
 }
 
 .main {
-  min-height: 100vh;
-  padding: 4rem 0;
-  flex: 1;
   display: flex;
   flex-direction: column;
-  justify-content: center;
   align-items: center;
+  width: 100%;
+  max-width: 720px;
+  height: 100vh;
+  margin: 0 auto;
 }
 
 .footer {

app/src/styles/globals.css

@@ -53,7 +53,6 @@ button:hover {
 
 header,
 footer {
-  background-color: var(--border-color);
   padding: 20px;
   text-align: center;
 }
@@ -68,3 +67,8 @@ input {
 * {
   box-sizing: border-box;
 }
+
+.main-wrapper {
+  width: 720px;
+  padding: 2rem 0;
+}