Canvas

cspell.json

@@ -2,5 +2,5 @@
   "ignorePaths": ["node_modules/**", "*.svg"],
   "version": "0.2",
   "language": "en",
-  "words": ["NATSUMATSURI", "yatai", "Dela", "Yuji", "Syuku", "zustand", "wadaiko", "qrcode"]
+  "words": ["NATSUMATSURI", "yatai", "Dela", "Yuji", "Syuku", "zustand", "wadaiko", "qrcode","nobori","Garelly","natsu","matsuri"]
 }

src/components/Garelly/index.module.css

@@ -0,0 +1,61 @@
+h1{
+    font-size: 40px;
+}
+
+.title{
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: 1;
+    padding: 16px;
+    margin: 0;
+}
+.nobori img{
+    position: absolute;
+    bottom: 0;
+    left: -240px;
+    height: 80vh;
+    aspect-ratio: 1 / 1;
+    z-index: -1;
+}
+
+.light img{
+    position: absolute;
+    top: 0;
+    left: 0px;
+    height: 80vh;
+    aspect-ratio: 1 / 1;
+    z-index: -1;
+}
+
+.container {
+    display: flex;
+    align-items: flex-end; 
+    position: absolute;
+    bottom: 16px; 
+    left: 4vw; 
+    z-index: 1;
+}
+
+.logo img {
+    height: 16vh;
+    aspect-ratio: 1 / 1;
+    margin-right: 2vw;
+}
+
+.shop {
+    color: var(--white);
+    font-size: 4vw;
+    padding: 16px;
+    margin: 0;
+}
+
+.light-right img{
+    position: absolute;
+    top: 0;
+    right: 0px;
+    height: 80vh;
+    aspect-ratio: 1 / 1;
+    z-index: -1;
+    transform: scale(-1, 1);
+}

src/components/Garelly/index.tsx

@@ -0,0 +1,32 @@
+import styles from "./index.module.css";
+
+function Garelly() {
+	return (
+		<div>
+			{/* biome-ignore lint/a11y/useMediaCaption: 夏祭りの音を再生します。 */}
+			<audio
+				src="/sound/natsu_matsuri.mp3"
+				autoPlay
+				loop
+				aria-label="夏祭りの音"
+			/>
+			<h1 className={styles.title}>VIRTUAL_NATSUMATSURI</h1>
+			<div className={styles.nobori}>
+				<img src="/2D_material/nobori.webp" alt="夏祭り_のぼり" />
+			</div>
+			<div className={styles.light}>
+				<img src="/2D_material/red_small_lite.webp" alt="提灯" />
+			</div>
+			<div className={styles.container}>
+				<div className={styles.logo}>
+					<img src="/logo.webp" alt="logo" />
+				</div>
+				<p className={styles.shop}>VIRTUAL_NATSUMATSURI</p>
+			</div>
+			<div className={styles["light-right"]}>
+				<img src="/2D_material/red_small_lite.webp" alt="提灯" />
+			</div>
+		</div>
+	);
+}
+export default Garelly;

src/pages/yatai/index.module.css

@@ -12,6 +12,7 @@
 .canvas {
   width: 100%;
   height: 100%;
+  background-color: transparent;
 }
 
 .target {

src/pages/yatai/index.tsx

@@ -9,6 +9,7 @@ import type {
 	Object3DEventMap,
 } from "three";
 import { randFloat } from "three/src/math/MathUtils.js";
+import Garelly from "../../components/Garelly";
 import { useSocketRefStore } from "../../store";
 import {
 	type ActionSchema,
@@ -216,6 +217,7 @@ function Yatai() {
 		<div className={styles.container}>
 			<YataiStage />
 			<TargetOverlay />
+			<Garelly />
 		</div>
 	);
 }