From c5a15d1e345bccc8f613645b0b7758c68ddcc57e Mon Sep 17 00:00:00 2001
From: fukurorin219 <22.r.futagawa.nutfes@gmail.com>
Date: Sat, 8 Apr 2023 11:42:27 +0900
Subject: [PATCH 1/2] wip

---
 .../src/components/common/GlassFolderCard.tsx |  53 +++++++++
 .../UsersBackgroundAnimasion.tsx              | 105 ++++++++++++++++++
 .../src/components/icons/AccountCircle.tsx    |   1 +
 .../layout/UsersLayout/UsersLayout.module.css |  22 ++++
 .../layout/UsersLayout/UsersLayout.tsx        |  30 +++++
 .../components/layout/UsersLayout/index.ts    |   1 +
 view/next-project/src/pages/users/index.tsx   |  94 ++++++++++++++--
 7 files changed, 299 insertions(+), 7 deletions(-)
 create mode 100644 view/next-project/src/components/common/GlassFolderCard.tsx
 create mode 100644 view/next-project/src/components/common/UsersBackgroundAnimasion/UsersBackgroundAnimasion.tsx
 create mode 100644 view/next-project/src/components/layout/UsersLayout/UsersLayout.module.css
 create mode 100644 view/next-project/src/components/layout/UsersLayout/UsersLayout.tsx
 create mode 100644 view/next-project/src/components/layout/UsersLayout/index.ts

diff --git a/view/next-project/src/components/common/GlassFolderCard.tsx b/view/next-project/src/components/common/GlassFolderCard.tsx
new file mode 100644
index 0000000..85e602a
--- /dev/null
+++ b/view/next-project/src/components/common/GlassFolderCard.tsx
@@ -0,0 +1,53 @@
+import React from 'react';
+import styled from 'styled-components';
+
+type CardContentsProps = {
+  width?: string;
+  height?: string;
+  align?: string;
+  justify?: string;
+  gap?: string;
+  padding?: string;
+  children: React.ReactNode;
+  background?: string;
+};
+
+function GlassFolderCard(props: CardContentsProps): JSX.Element {
+  const GlassFolderTab = styled.div`
+    width: 150px; /* 幅 */
+    height: 100px;
+    border-bottom: 100px 
+    border-left: 25px 
+    border-right: 25px 
+    box-sizing: border-box;
+    background: 'radial-gradient(ellipse at top left, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.4))'} 
+    border-top: solid 1px #505050;
+  `;
+  const GlassCardContainer = styled.div`
+    width: ${props.width};
+    height: ${props.height};
+    padding: ${props.padding || '18px 22px'};
+    background: ${props.background ||
+    'radial-gradient(ellipse at top left, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.4))'};
+    box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
+    backdrop-filter: blur(4px);
+    flex-grow: 1;
+    display: flex;
+    flex-flow: column;
+    align-items: ${props.align || 'start'};
+    justify-content: ${props.justify || 'start'};
+    gap: ${props.gap || '0px'};
+    font-size: 16px;
+    flex: none;
+    
+  `;
+  
+
+  return (
+    <>
+      <GlassCardContainer>{props.children}</GlassCardContainer>
+    </>
+  );
+}
+
+export default GlassFolderCard;
diff --git a/view/next-project/src/components/common/UsersBackgroundAnimasion/UsersBackgroundAnimasion.tsx b/view/next-project/src/components/common/UsersBackgroundAnimasion/UsersBackgroundAnimasion.tsx
new file mode 100644
index 0000000..8f340a0
--- /dev/null
+++ b/view/next-project/src/components/common/UsersBackgroundAnimasion/UsersBackgroundAnimasion.tsx
@@ -0,0 +1,105 @@
+import css from '@emotion/css'
+import React from 'react'
+import Particles from 'react-particles'
+
+export const AdventCalendarHeroAnimation = () => {
+  {/*表示領域を取得するライブラリを使用しています。直接値を入れても使えます。*/}
+  const { currentWidth, currentHeight } = useWindowSize()
+
+  return (
+    <div css={heroStyle(heroBackgroundImage)}>
+        {/* Qiita Advent Calendar の ロゴを入れます */}
+        <img src={'./logo-advent_calendar.svg'} css={heroAnimationLogoStyle} />
+        {/* react-particles-jsで雪を表現しています */}
+        <Particles
+            width={`${currentWidth}px`}
+            height={`${currentHeight}px`} 
+            style={{ display: 'block' }}
+            params={{
+                particles: {
+                    number: {
+                        value: 20,
+                        density: {
+                            enable: true,
+                            value_area: 2000,
+                        },
+                    },
+                    size: {
+                        value: 8,
+                        random: true,
+                    },
+                    opacity: {
+                        anim: {
+                            enable: false,
+                        },
+                        value: 1,
+                        random: false,
+                    },
+                    move: {
+                        direction: 'bottom',
+                        out_mode: 'out',
+                        speed: 6,
+                        random: false,
+                    },
+                    line_linked: {
+                        enable: false,
+                    },
+                },
+            }}
+        />
+        {/* 画面下にある丘の画像を入れます */}
+        <img src={'./image-back_hill.svg'} css={heroHillStyle} />
+        <img src={'./image-front_hill.svg'} css={heroHillStyle} /> 
+    </div>
+  )
+}
+const heroStyle = (heroBackgroundImage: string) =>
+  css({
+    backgroundImage: `url(${heroBackgroundImage: string})`, // 背景画像を設定しています。
+    backgroundSize: 'contain',
+    position: 'relative',
+    width: '100%',
+  })
+
+const logoAnimation = keyframes({
+  '0%': {
+    opacity: 0,
+    transform: 'translate(-50%, -100%) scale(1.5)',
+    ...viewportXS({
+      transform: 'translate(0, 0) scale(1.5)',
+    }),
+  },
+  '100%': {
+    opacity: 1,
+    transform: 'translate(-50%, -100%) scale(1)',
+    ...viewportXS({
+      transform: 'translate(0, 0) scale(1)',
+    }),
+  },
+})
+
+const heroAnimationLogoStyle = css({
+  animationDelay: '0s',
+  animationDuration: '3s',
+  animationName: logoAnimation,
+  left: '50%',
+  maxWidth: 752,
+  padding: `0 ${getSpace(2)}px`,
+  position: 'absolute',
+  top: '50%',
+  transform: 'translate(-50%, -100%)',
+  width: '100%',
+  zIndex: 10,
+})
+
+
+const heroHillStyle = css({
+  bottom: 0,
+  left: '50%',
+  minWidth: 1280,
+  position: 'absolute',
+  transform: 'translateX(-50%)',
+  width: '100%',
+  zIndex: 10,
+  filter: 'drop-shadow(0px 4px 16px rgba(0, 0, 0, 0.5))',
+})
\ No newline at end of file
diff --git a/view/next-project/src/components/icons/AccountCircle.tsx b/view/next-project/src/components/icons/AccountCircle.tsx
index 2bd8f8b..40a5550 100644
--- a/view/next-project/src/components/icons/AccountCircle.tsx
+++ b/view/next-project/src/components/icons/AccountCircle.tsx
@@ -1,3 +1,4 @@
+import { relative } from 'path';
 import styled from 'styled-components';
 
 type Props = {
diff --git a/view/next-project/src/components/layout/UsersLayout/UsersLayout.module.css b/view/next-project/src/components/layout/UsersLayout/UsersLayout.module.css
new file mode 100644
index 0000000..f726197
--- /dev/null
+++ b/view/next-project/src/components/layout/UsersLayout/UsersLayout.module.css
@@ -0,0 +1,22 @@
+.userLayoutContainer {
+  width: 100%;
+  display: flex;
+  flex-flow: column;
+  align-items: center;
+  padding: 100px 200px;
+  margin-top: 60px;
+  gap: 50px 0px;
+  animation: fadeIn 0.5s ease 0s 1 alternate none running;
+  background-color: #FFF9F5;
+}
+
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+  }
+
+  to {
+    opacity: 1;
+  }
+}
\ No newline at end of file
diff --git a/view/next-project/src/components/layout/UsersLayout/UsersLayout.tsx b/view/next-project/src/components/layout/UsersLayout/UsersLayout.tsx
new file mode 100644
index 0000000..e2737fb
--- /dev/null
+++ b/view/next-project/src/components/layout/UsersLayout/UsersLayout.tsx
@@ -0,0 +1,30 @@
+import React, { FC } from 'react';
+import Header from '@components/common/Header';
+import s from './UsersLayout.module.css';
+import styled from 'styled-components';
+
+interface LayoutProps {
+  children?: React.ReactNode;
+}
+
+const UsersLayout: FC<LayoutProps> = (props) => {
+  return (
+    <>
+      <Header />
+      <section>
+        <main className={s.UserLayoutContainer}>{props.children}</main>
+          <div>
+            
+          </div>
+      </section>
+    </>
+  );
+};
+
+
+
+
+
+
+
+export default UsersLayout;
diff --git a/view/next-project/src/components/layout/UsersLayout/index.ts b/view/next-project/src/components/layout/UsersLayout/index.ts
new file mode 100644
index 0000000..53ae81c
--- /dev/null
+++ b/view/next-project/src/components/layout/UsersLayout/index.ts
@@ -0,0 +1 @@
+export { default } from './UsersLayout';
diff --git a/view/next-project/src/pages/users/index.tsx b/view/next-project/src/pages/users/index.tsx
index cd7dd80..aeff048 100644
--- a/view/next-project/src/pages/users/index.tsx
+++ b/view/next-project/src/pages/users/index.tsx
@@ -1,13 +1,15 @@
 import { useState } from 'react';
 import { useRouter } from 'next/router';
 import { get } from '@utils/api_methods';
-import MainLayout from '@components/layout/MainLayout';
+import MainLayout from '@components/layout/UsersLayout';
 import GlassCard from '@components/common/GlassCard';
 import styled from 'styled-components';
 import HeaderLogo from '@components/icons/HeaderLogo';
 import AccountCircle from '@components/icons/AccountCircle';
 import Button from '@components/common/TransButton';
 import { join } from 'path/posix';
+import GlassFolderCard from '@components/common/GlassFolderCard';
+
 
 type Users = {
   id: number;
@@ -45,8 +47,34 @@ export default function UserList(props: Props) {
     flex-wrap: wrap;
     justify-content: center;
   `;
+  const UserContainer = styled.div`
+    display: flex;
+  `;
+  const AccountColorCircle = styled.div`
+    width: 90px;
+    height: 90px;
+    border-radius: 50%;
+    border: 3px solid #818181; //色の設定は個人で
+    box-sizing: border-box;
+
+    position: absolute;
+    top: 10%;
+    left: 16.5%;
+  `;
+  const UserInfo = styled.div`
+    display: column
+    width: 120px;
+    height: 100px;
+    padding: 10px;
+  `;
   const UserNameContainer = styled.div`
     font-size: 2rem;
+    text-decoration:underline;
+    padding: 5px;
+  `;
+  const TypeNameContainer = styled.div`
+    font-size: 1rem;
+    padding: 5px;
   `;
   const FocusUserNameContainer = styled.div`
     font-size: 2rem;
@@ -59,6 +87,41 @@ export default function UserList(props: Props) {
   const AccountPosition = styled.div`
     padding: 20px 0;
   `;
+  const GlassFolderTabLine = styled.div`
+    // width: 140px;
+    // height: 14px;
+    // background: #505050;
+    // clip-path: polygon(0% 100%, 10% 0%, 90% 0%, 100% 100%);
+    // border-top: solid 1px #505050;
+    //  border-top: solid 1px #505050;
+    // position: absolute;
+    // z-index: 50;
+  `;
+  const GlassFolderTab = styled.div`
+    position: relative;
+    width: 150px;
+    height: 21px;
+    background: #505050;
+    clip-path: polygon(0% 100%, 10% 0%, 90% 0%, 100% 100%);
+  `;
+  const GlassFolderTabInner = styled.div`
+    display: block;
+    position: absolute;
+    top: 1px; bottom: 0px;
+    left: 1px; right: 1px;
+    content: '';
+    background: #FFDDBD;
+    clip-path: polygon(0% 100%, 10% 0%, 90% 0%, 100% 100%);
+  `;
+  const FolderLine = styled.div`
+    position: absolute;
+    top: -7px;
+    left: -7px;
+    width: 100%;
+    height: 100%;
+    border: 3px solid #000;
+    content: '';
+  `
 
   // プロジェクトのカードにマウスホバーした時の処理
   const onHover = (id: number) => {
@@ -85,15 +148,32 @@ export default function UserList(props: Props) {
       );
     } else {
       return (
-        <GlassCard width='275px' height='250px' align={'center'}>
-          <div onMouseEnter={() => onHover(user.id)}>
-            <AccountCircle height={120} width={120} color={'var(--accent-6)'} />
-          </div>
-          <UserNameContainer>{user.name}</UserNameContainer>
-        </GlassCard>
+      <div>
+        <div>
+            <GlassFolderTabLine></GlassFolderTabLine>
+            <GlassFolderTab><GlassFolderTabInner/></GlassFolderTab>
+        </div>
+        <GlassFolderCard width='300px' height='120px' align={'center'}>
+            
+          <UserContainer>
+            <div onMouseEnter={() => onHover(user.id)}>
+              <div >
+                <AccountCircle height={80} width={80} color={'var(--accent-6)'} />
+                <AccountColorCircle></AccountColorCircle>
+              </div>
+            </div>
+            
+            <UserInfo>
+              <UserNameContainer>{user.name}</UserNameContainer>
+              <TypeNameContainer>{user.name}</TypeNameContainer>
+            </UserInfo>
+          </UserContainer>
+        </GlassFolderCard>
+        </div>
       );
     }
   };
+  console.log(props.users)
 
   return (
     <MainLayout>

From 9fc97a03ee034bdc085b2abcd47b7f5333610897 Mon Sep 17 00:00:00 2001
From: fukurorin219 <22.r.futagawa.nutfes@gmail.com>
Date: Sat, 8 Apr 2023 15:56:12 +0900
Subject: [PATCH 2/2] =?UTF-8?q?=E3=83=A1=E3=83=B3=E3=83=90=E3=83=BC?=
 =?UTF-8?q?=E4=B8=80=E8=A6=A7=E3=83=9A=E3=83=BC=E3=82=B8=E3=81=AE=E8=83=8C?=
 =?UTF-8?q?=E6=99=AF=E3=81=A7=E3=81=8D=E3=81=9F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 view/next-project/public/Union.svg            |  30 ++++
 .../UsersBackgroundAnimasion.tsx              | 105 -------------
 .../UsersBackgroundAnimation.module.css       |   5 +
 .../UsersBackgroundAnimation.tsx              | 138 ++++++++++++++++++
 .../common/UsersBackgroundAnimation/index.ts  |   1 +
 view/next-project/src/pages/users/index.tsx   |   3 +-
 6 files changed, 176 insertions(+), 106 deletions(-)
 create mode 100644 view/next-project/public/Union.svg
 delete mode 100644 view/next-project/src/components/common/UsersBackgroundAnimasion/UsersBackgroundAnimasion.tsx
 create mode 100644 view/next-project/src/components/common/UsersBackgroundAnimation/UsersBackgroundAnimation.module.css
 create mode 100644 view/next-project/src/components/common/UsersBackgroundAnimation/UsersBackgroundAnimation.tsx
 create mode 100644 view/next-project/src/components/common/UsersBackgroundAnimation/index.ts

diff --git a/view/next-project/public/Union.svg b/view/next-project/public/Union.svg
new file mode 100644
index 0000000..c2474a4
--- /dev/null
+++ b/view/next-project/public/Union.svg
@@ -0,0 +1,30 @@
+<svg width="200" height="200" viewBox="0 0 200 200" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g filter="url(#filter0_d_305_997)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M70.5038 64.1748L55.5 32L40.4962 64.1747C38.9115 67.434 38 71.2519 38 75.3333C38 87.2995 45.835 97 55.5 97C65.165 97 73 87.2995 73 75.3333C73 71.2519 72.0885 67.434 70.5038 64.1748Z" fill="#FFAC5D"/>
+</g>
+<g filter="url(#filter1_d_305_997)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M159.504 135.175L144.5 103L129.496 135.175C127.912 138.434 127 142.252 127 146.333C127 158.299 134.835 168 144.5 168C154.165 168 162 158.299 162 146.333C162 142.252 161.089 138.434 159.504 135.175Z" fill="#FFDDBD"/>
+</g>
+<defs>
+<filter id="filter0_d_305_997" x="34" y="32" width="43" height="73" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="4"/>
+<feGaussianBlur stdDeviation="2"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.1 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_305_997"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_305_997" result="shape"/>
+</filter>
+<filter id="filter1_d_305_997" x="123" y="103" width="43" height="73" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="4"/>
+<feGaussianBlur stdDeviation="2"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.1 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_305_997"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_305_997" result="shape"/>
+</filter>
+</defs>
+</svg>
diff --git a/view/next-project/src/components/common/UsersBackgroundAnimasion/UsersBackgroundAnimasion.tsx b/view/next-project/src/components/common/UsersBackgroundAnimasion/UsersBackgroundAnimasion.tsx
deleted file mode 100644
index 8f340a0..0000000
--- a/view/next-project/src/components/common/UsersBackgroundAnimasion/UsersBackgroundAnimasion.tsx
+++ /dev/null
@@ -1,105 +0,0 @@
-import css from '@emotion/css'
-import React from 'react'
-import Particles from 'react-particles'
-
-export const AdventCalendarHeroAnimation = () => {
-  {/*表示領域を取得するライブラリを使用しています。直接値を入れても使えます。*/}
-  const { currentWidth, currentHeight } = useWindowSize()
-
-  return (
-    <div css={heroStyle(heroBackgroundImage)}>
-        {/* Qiita Advent Calendar の ロゴを入れます */}
-        <img src={'./logo-advent_calendar.svg'} css={heroAnimationLogoStyle} />
-        {/* react-particles-jsで雪を表現しています */}
-        <Particles
-            width={`${currentWidth}px`}
-            height={`${currentHeight}px`} 
-            style={{ display: 'block' }}
-            params={{
-                particles: {
-                    number: {
-                        value: 20,
-                        density: {
-                            enable: true,
-                            value_area: 2000,
-                        },
-                    },
-                    size: {
-                        value: 8,
-                        random: true,
-                    },
-                    opacity: {
-                        anim: {
-                            enable: false,
-                        },
-                        value: 1,
-                        random: false,
-                    },
-                    move: {
-                        direction: 'bottom',
-                        out_mode: 'out',
-                        speed: 6,
-                        random: false,
-                    },
-                    line_linked: {
-                        enable: false,
-                    },
-                },
-            }}
-        />
-        {/* 画面下にある丘の画像を入れます */}
-        <img src={'./image-back_hill.svg'} css={heroHillStyle} />
-        <img src={'./image-front_hill.svg'} css={heroHillStyle} /> 
-    </div>
-  )
-}
-const heroStyle = (heroBackgroundImage: string) =>
-  css({
-    backgroundImage: `url(${heroBackgroundImage: string})`, // 背景画像を設定しています。
-    backgroundSize: 'contain',
-    position: 'relative',
-    width: '100%',
-  })
-
-const logoAnimation = keyframes({
-  '0%': {
-    opacity: 0,
-    transform: 'translate(-50%, -100%) scale(1.5)',
-    ...viewportXS({
-      transform: 'translate(0, 0) scale(1.5)',
-    }),
-  },
-  '100%': {
-    opacity: 1,
-    transform: 'translate(-50%, -100%) scale(1)',
-    ...viewportXS({
-      transform: 'translate(0, 0) scale(1)',
-    }),
-  },
-})
-
-const heroAnimationLogoStyle = css({
-  animationDelay: '0s',
-  animationDuration: '3s',
-  animationName: logoAnimation,
-  left: '50%',
-  maxWidth: 752,
-  padding: `0 ${getSpace(2)}px`,
-  position: 'absolute',
-  top: '50%',
-  transform: 'translate(-50%, -100%)',
-  width: '100%',
-  zIndex: 10,
-})
-
-
-const heroHillStyle = css({
-  bottom: 0,
-  left: '50%',
-  minWidth: 1280,
-  position: 'absolute',
-  transform: 'translateX(-50%)',
-  width: '100%',
-  zIndex: 10,
-  filter: 'drop-shadow(0px 4px 16px rgba(0, 0, 0, 0.5))',
-})
\ No newline at end of file
diff --git a/view/next-project/src/components/common/UsersBackgroundAnimation/UsersBackgroundAnimation.module.css b/view/next-project/src/components/common/UsersBackgroundAnimation/UsersBackgroundAnimation.module.css
new file mode 100644
index 0000000..1ebe33f
--- /dev/null
+++ b/view/next-project/src/components/common/UsersBackgroundAnimation/UsersBackgroundAnimation.module.css
@@ -0,0 +1,5 @@
+.BackgroundAnimationContainer{
+  background-size: contain;
+  position: relative;
+  width: 100%;
+}
\ No newline at end of file
diff --git a/view/next-project/src/components/common/UsersBackgroundAnimation/UsersBackgroundAnimation.tsx b/view/next-project/src/components/common/UsersBackgroundAnimation/UsersBackgroundAnimation.tsx
new file mode 100644
index 0000000..7e3d14b
--- /dev/null
+++ b/view/next-project/src/components/common/UsersBackgroundAnimation/UsersBackgroundAnimation.tsx
@@ -0,0 +1,138 @@
+import React, {useCallback} from 'react'
+import type { Engine } from "tsparticles-engine";
+import Particles from 'react-particles'
+import { loadFull } from "tsparticles";
+import s from './UsersBackgroundAnimation.module.css'
+
+const UserBackgroundAnimation = () => {
+
+const particlesInit = useCallback(async (engine: Engine) => {
+  await loadFull(engine);
+}, []);
+
+  return (
+    <div className={s.BackgroundAnimationContainer}>
+       {/* react-particles-jsで雪を表現しています */}
+       <Particles
+            id="tsparticles"
+            init={particlesInit}
+            options={{
+              background: {
+                color: {
+                    value: "#FFF9F5",
+                },
+            },
+              "particles": {
+                "number": {
+                  "value": 15,
+                  "density": {
+                    "enable": true,
+                    "value_area": 1262.6362266116362
+                  }
+                },
+                "color": {
+                  "value": "#fff"
+                },
+                "shape": {
+                  "type": "image",
+                  "stroke": {
+                    "width": 0,
+                    "color": "#000000"
+                  },
+                 
+                  "image": {
+                    "src": "Union.svg",
+                    "width": 200,
+                    "height": 200
+                  }
+                },
+                "opacity": {
+                  "value": 1,
+                  "random": false,
+                  "anim": {
+                    "enable": false,
+                    "speed": 1,
+                    "opacity_min": 0.1,
+                    "sync": false
+                  }
+                },
+                "size": {
+                  "value": 150,
+                  "random": false,
+                  "anim": {
+                    "enable": false,
+                    "speed": 40,
+                    "size_min": 0.1,
+                    "sync": true
+                  }
+                },
+                "line_linked": {
+                  "enable": false,
+                  "distance": 256.54592973848366,
+                  "color": "#ffffff",
+                  "opacity": 0.4,
+                  "width": 2
+                },
+                "move": {
+                  "enable": true,
+                  "speed": 6,
+                  "direction": "bottom",
+                  "random": false,
+                  "straight": true,
+                  "out_mode": "out",
+                  "bounce": false,
+                  "attract": {
+                    "enable": false,
+                    "rotateX": 600,
+                    "rotateY": 1200
+                  }
+                }
+              },
+              "interactivity": {
+                "detect_on": "canvas",
+                "events": {
+                  "onhover": {
+                    "enable": false,
+                    "mode": "bubble"
+                  },
+                  "onclick": {
+                    "enable": false,
+                    "mode": "repulse"
+                  },
+                  "resize": true
+                },
+                "modes": {
+                  "grab": {
+                    "distance": 400,
+                    "line_linked": {
+                      "opacity": 0.5
+                    }
+                  },
+                  "bubble": {
+                    "distance": 400,
+                    "size": 4,
+                    "duration": 0.3,
+                    "opacity": 1,
+                    "speed": 3
+                  },
+                  "repulse": {
+                    "distance": 200,
+                    "duration": 0.4
+                  },
+                  "push": {
+                    "particles_nb": 4
+                  },
+                  "remove": {
+                    "particles_nb": 2
+                  }
+                }
+              },
+              "retina_detect": true
+            }}
+        />
+        
+    </div>
+  )
+}
+
+export default UserBackgroundAnimation
diff --git a/view/next-project/src/components/common/UsersBackgroundAnimation/index.ts b/view/next-project/src/components/common/UsersBackgroundAnimation/index.ts
new file mode 100644
index 0000000..a146e61
--- /dev/null
+++ b/view/next-project/src/components/common/UsersBackgroundAnimation/index.ts
@@ -0,0 +1 @@
+export { default } from './UsersBackgroundAnimation';
diff --git a/view/next-project/src/pages/users/index.tsx b/view/next-project/src/pages/users/index.tsx
index 7aa0df3..1cade34 100644
--- a/view/next-project/src/pages/users/index.tsx
+++ b/view/next-project/src/pages/users/index.tsx
@@ -9,7 +9,7 @@ import AccountCircle from '@components/icons/AccountCircle';
 import Button from '@components/common/TransButton';
 import { join } from 'path/posix';
 import GlassFolderCard from '@components/common/GlassFolderCard';
-
+import UserBackgroundAnimation from '@components/common/UsersBackgroundAnimation/UsersBackgroundAnimation'
 
 type Users = {
   id: number;
@@ -176,6 +176,7 @@ export default function UserList(props: Props) {
 
   return (
     <MainLayout>
+      <UserBackgroundAnimation />
       <UserListContainer>
         {props.users.map((user) => (
           <div key={user.id} onMouseLeave={() => leaveHover(user.id)}>