-
-
Sword Stream
-
- MODE: {mode}
-
-
- Move to Guide |
- Click & Hold to Orbit & Charge
-
+
+
+ {item.icon}
+
+ {st.label}
+
-
+
+
{item.category}
+
{item.title}
+
{item.desc}
+
+
+
+ {item.tags.map((t) => (
+ {t}
+ ))}
+
+
→
+
+
);
};
+const EffectLab = () => (
+
+
+
+
+ {LAB_ITEMS.map((item) => (
+
+ ))}
+
+
+);
+
export default EffectLab;
diff --git a/src/pages/effect-lab/SwordStream.css b/src/pages/effect-lab/SwordStream.css
new file mode 100644
index 0000000..2561383
--- /dev/null
+++ b/src/pages/effect-lab/SwordStream.css
@@ -0,0 +1,82 @@
+.sword-stream {
+ position: relative;
+ width: 100%;
+ height: 100%;
+ min-height: calc(100vh - 80px);
+ overflow: hidden;
+ background-color: #050505;
+ border-radius: 20px;
+ border: 1px solid var(--line);
+}
+
+.sword-stream canvas {
+ display: block;
+ outline: none;
+}
+
+.sword-stream__overlay {
+ position: absolute;
+ top: 20px;
+ left: 20px;
+ color: rgba(255, 255, 255, 0.7);
+ pointer-events: none;
+ z-index: 10;
+ display: flex;
+ flex-direction: column;
+ gap: 8px;
+}
+
+.sword-stream__back {
+ pointer-events: all;
+ display: inline-flex;
+ align-items: center;
+ gap: 6px;
+ font-size: 12px;
+ font-weight: 600;
+ color: rgba(68, 170, 221, 0.7);
+ text-decoration: none;
+ padding: 5px 10px;
+ border: 1px solid rgba(68, 170, 221, 0.2);
+ border-radius: 6px;
+ background: rgba(68, 170, 221, 0.06);
+ transition: color 0.2s, border-color 0.2s, background 0.2s;
+ width: fit-content;
+}
+
+.sword-stream__back:hover {
+ color: #44aadd;
+ border-color: rgba(68, 170, 221, 0.5);
+ background: rgba(68, 170, 221, 0.12);
+}
+
+.sword-stream__overlay h2 {
+ margin: 0;
+ font-family: var(--font-display);
+ font-size: 28px;
+ color: var(--text);
+ text-shadow: 0 0 20px rgba(68, 170, 221, 0.5);
+}
+
+.sword-stream__mode {
+ display: inline-block;
+ background: rgba(68, 170, 221, 0.1);
+ border: 1px solid rgba(68, 170, 221, 0.3);
+ padding: 6px 12px;
+ border-radius: 99px;
+ font-size: 12px;
+ color: #44aadd;
+ font-weight: 600;
+ width: fit-content;
+}
+
+.sword-stream__mode span {
+ color: #fff;
+}
+
+.sword-stream__overlay p {
+ margin: 0;
+ font-size: 14px;
+ color: var(--muted);
+ max-width: 400px;
+ line-height: 1.5;
+}
diff --git a/src/pages/effect-lab/SwordStream.jsx b/src/pages/effect-lab/SwordStream.jsx
new file mode 100644
index 0000000..27d498b
--- /dev/null
+++ b/src/pages/effect-lab/SwordStream.jsx
@@ -0,0 +1,184 @@
+import React, { useEffect, useRef, useState } from 'react';
+import { Link } from 'react-router-dom';
+import * as THREE from 'three';
+import './SwordStream.css';
+
+const SwordStream = () => {
+ const containerRef = useRef(null);
+ const requestRef = useRef();
+ const [mode, setMode] = useState('HOVER'); // HOVER, ORBIT
+
+ useEffect(() => {
+ if (!containerRef.current) return;
+
+ const COUNT = 1500;
+ const SWORD_COLOR = 0x44aadd;
+ const SWORD_EMISSIVE = 0x112244;
+
+ const rand = (min, max) => Math.random() * (max - min) + min;
+
+ const width = containerRef.current.clientWidth;
+ const height = containerRef.current.clientHeight;
+
+ const scene = new THREE.Scene();
+ scene.fog = new THREE.FogExp2(0x050505, 0.002);
+
+ const camera = new THREE.PerspectiveCamera(75, width / height, 0.1, 1000);
+ camera.position.z = 80;
+
+ const renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });
+ renderer.setSize(width, height);
+ renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
+ renderer.toneMapping = THREE.ACESFilmicToneMapping;
+ containerRef.current.appendChild(renderer.domElement);
+
+ const ambientLight = new THREE.AmbientLight(0x404040);
+ scene.add(ambientLight);
+
+ const pointLight = new THREE.PointLight(SWORD_COLOR, 2, 100);
+ scene.add(pointLight);
+
+ const geometry = new THREE.CylinderGeometry(0.1, 0.4, 4, 8);
+ geometry.rotateX(Math.PI / 2);
+
+ const material = new THREE.MeshPhongMaterial({
+ color: SWORD_COLOR,
+ emissive: SWORD_EMISSIVE,
+ shininess: 100,
+ flatShading: true,
+ });
+
+ const mesh = new THREE.InstancedMesh(geometry, material, COUNT);
+ scene.add(mesh);
+
+ const dummy = new THREE.Object3D();
+ const particles = [];
+
+ for (let i = 0; i < COUNT; i++) {
+ particles.push({
+ pos: new THREE.Vector3(rand(-100, 100), rand(-100, 100), rand(-50, 50)),
+ vel: new THREE.Vector3(),
+ acc: new THREE.Vector3(),
+ angle: rand(0, Math.PI * 2),
+ radius: rand(15, 30),
+ speed: rand(0.02, 0.05),
+ offset: new THREE.Vector3(rand(-5, 5), rand(-5, 5), rand(-5, 5)),
+ });
+ }
+
+ const mouse = new THREE.Vector3();
+ const target = new THREE.Vector3();
+ const mousePlane = new THREE.Plane(new THREE.Vector3(0, 0, 1), 0);
+ const raycaster = new THREE.Raycaster();
+
+ let isMouseDown = false;
+ let time = 0;
+
+ const handleMouseMove = (e) => {
+ const rect = renderer.domElement.getBoundingClientRect();
+ const x = ((e.clientX - rect.left) / rect.width) * 2 - 1;
+ const y = -((e.clientY - rect.top) / rect.height) * 2 + 1;
+
+ raycaster.setFromCamera(new THREE.Vector2(x, y), camera);
+ raycaster.ray.intersectPlane(mousePlane, mouse);
+
+ pointLight.position.copy(mouse);
+ pointLight.position.z = 20;
+ };
+
+ const handleMouseDown = () => { isMouseDown = true; setMode('ORBIT'); };
+ const handleMouseUp = () => { isMouseDown = false; setMode('HOVER'); };
+
+ window.addEventListener('mousemove', handleMouseMove);
+ window.addEventListener('mousedown', handleMouseDown);
+ window.addEventListener('mouseup', handleMouseUp);
+
+ const animate = () => {
+ requestRef.current = requestAnimationFrame(animate);
+ time += 0.01;
+
+ for (let i = 0; i < COUNT; i++) {
+ const p = particles[i];
+
+ if (isMouseDown) {
+ p.angle += p.speed + 0.02;
+ const orbitX = mouse.x + Math.cos(p.angle + time) * p.radius;
+ const orbitY = mouse.y + Math.sin(p.angle + time) * p.radius;
+ const orbitZ = Math.sin(p.angle * 2 + time) * 10;
+ target.set(orbitX, orbitY, orbitZ);
+ p.acc.subVectors(target, p.pos).multiplyScalar(0.08);
+ } else {
+ const noiseX = Math.sin(time + i * 0.1) * 5;
+ const noiseY = Math.cos(time + i * 0.1) * 5;
+ target.copy(mouse).add(p.offset).add(new THREE.Vector3(noiseX, noiseY, 0));
+ p.acc.subVectors(target, p.pos).multiplyScalar(0.008);
+ }
+
+ p.vel.add(p.acc);
+ p.vel.multiplyScalar(isMouseDown ? 0.90 : 0.94);
+ p.pos.add(p.vel);
+
+ dummy.position.copy(p.pos);
+
+ const lookPos = new THREE.Vector3().copy(p.pos).add(p.vel.clone().multiplyScalar(5));
+ if (p.vel.lengthSq() > 0.01) {
+ dummy.lookAt(lookPos);
+ }
+
+ const speedScale = 1 + Math.min(p.vel.length(), 2) * 0.5;
+ dummy.scale.set(1, 1, speedScale);
+
+ dummy.updateMatrix();
+ mesh.setMatrixAt(i, dummy.matrix);
+ }
+
+ mesh.instanceMatrix.needsUpdate = true;
+ renderer.render(scene, camera);
+ };
+
+ animate();
+
+ const handleResize = () => {
+ if (!containerRef.current) return;
+ const newWidth = containerRef.current.clientWidth;
+ const newHeight = containerRef.current.clientHeight;
+ camera.aspect = newWidth / newHeight;
+ camera.updateProjectionMatrix();
+ renderer.setSize(newWidth, newHeight);
+ };
+
+ window.addEventListener('resize', handleResize);
+
+ return () => {
+ window.removeEventListener('mousemove', handleMouseMove);
+ window.removeEventListener('mousedown', handleMouseDown);
+ window.removeEventListener('mouseup', handleMouseUp);
+ window.removeEventListener('resize', handleResize);
+ cancelAnimationFrame(requestRef.current);
+ if (containerRef.current && renderer.domElement) {
+ containerRef.current.removeChild(renderer.domElement);
+ }
+ geometry.dispose();
+ material.dispose();
+ renderer.dispose();
+ };
+ }, []);
+
+ return (
+
+
+
← Lab
+
Sword Stream
+
+ MODE: {mode}
+
+
+ Move to Guide |
+ Click & Hold to Orbit & Charge
+
+
+
+ );
+};
+
+export default SwordStream;
diff --git a/src/routes.jsx b/src/routes.jsx
index 095ca85..b4e7ccf 100644
--- a/src/routes.jsx
+++ b/src/routes.jsx
@@ -19,6 +19,8 @@ const StockTrade = lazy(() => import('./pages/stock/StockTrade'));
const RealEstate = lazy(() => import('./pages/realestate/RealEstate'));
const Subscription = lazy(() => import('./pages/subscription/Subscription'));
const EffectLab = lazy(() => import('./pages/effect-lab/EffectLab'));
+const SwordStream = lazy(() => import('./pages/effect-lab/SwordStream'));
+const DayCalc = lazy(() => import('./pages/effect-lab/DayCalc'));
const Todo = lazy(() => import('./pages/todo/Todo'));
export const navLinks = [
@@ -133,6 +135,14 @@ export const appRoutes = [
path: 'lab',
element:
,
},
+ {
+ path: 'lab/sword-stream',
+ element:
,
+ },
+ {
+ path: 'lab/day-calc',
+ element:
,
+ },
{
path: 'todo',
element:
,