MythEclipse/GMW
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat(frontend): tema monokrom + sidebar animasi game-menu + gate ringan mobile

Browse Source
This commit is contained in:
asepharyana
2026-08-24 17:35:51 +07:00
parent eda5c752b7
commit 5f42c17caa
7 changed files with 231 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files
services/frontend/src/app/(dashboard)/dashboard/view.tsx
+1 -1
View File
@@ -87,7 +87,7 @@ export function DashboardView({
return (
<div className="space-y-5">
{/* Hero */}
<GlassPanel glow className="relative overflow-hidden">
<GlassPanel glow className="game-frame relative overflow-hidden">
<div className="scan-line absolute inset-x-0 top-0" />
<div className="flex flex-wrap items-end justify-between gap-4">
<div>
services/frontend/src/app/globals.css
+141 -9
View File
@@ -29,13 +29,13 @@
--color-hairline: oklch(1 0 0 / 0.1);
--hairline-w: 1px;
/* ── Semantic signals ── */
--color-signal: oklch(0.86 0.19 128);
--color-signal-ink: oklch(0.18 0.03 70);
--color-signal-glow: oklch(0.86 0.19 128 / 0.4);
--color-amber: oklch(0.85 0.15 72);
--color-vermilion: oklch(0.68 0.21 25);
--color-vermilion-glow: oklch(0.68 0.21 25 / 0.4);
/* ── Semantic signals (monochrome: tone = luminance steps) ── */
--color-signal: oklch(0.97 0 0);
--color-signal-ink: oklch(0.1 0 0);
--color-signal-glow: oklch(1 0 0 / 0.35);
--color-amber: oklch(0.72 0 0);
--color-vermilion: oklch(0.85 0 0);
--color-vermilion-glow: oklch(1 0 0 / 0.45);
--color-ring: var(--color-signal);
@@ -74,8 +74,8 @@
background: oklch(0.22 0.02 70 / 0.34);
}
.light ::selection {
background: var(--color-signal-glow);
color: var(--color-ink);
background: oklch(0.2 0 0 / 0.9);
color: oklch(1 0 0);
}
@layer base {
@@ -300,6 +300,138 @@
}
}
/* ═══ Game-menu nav (monochrome) ═══
Corner brackets + one-shot light sweep + staggered entrance.
Pure transform/opacity — compositor only. */
.game-nav-item {
--i: 0;
position: relative;
isolation: isolate;
animation: nav-in 0.45s cubic-bezier(0.22, 1, 0.36, 1) both;
animation-delay: calc(var(--i) * 45ms);
}
/* corner brackets on hover/active */
.game-nav-item::before,
.game-nav-item::after {
content: "";
position: absolute;
inset: 0;
opacity: 0;
transition: opacity 0.2s ease;
pointer-events: none;
}
.game-nav-item::before {
border-left: 1.5px solid currentColor;
border-top: 1.5px solid currentColor;
border-top-left-radius: 13px;
clip-path: polygon(0 0, 55% 0, 55% 28%, 28% 28%, 28% 100%, 0 100%);
}
.game-nav-item::after {
border-right: 1.5px solid currentColor;
border-bottom: 1.5px solid currentColor;
border-bottom-right-radius: 13px;
clip-path: polygon(100% 100%, 45% 100%, 45% 72%, 72% 72%, 72% 0, 100% 0);
}
.game-nav-item:hover::before,
.game-nav-item:hover::after,
.game-nav-item.is-active::before,
.game-nav-item.is-active::after {
opacity: 0.9;
}
/* one-shot sweep */
.game-nav-item .game-sweep {
position: absolute;
inset: 0;
overflow: hidden;
border-radius: inherit;
pointer-events: none;
}
.game-nav-item .game-sweep > i {
position: absolute;
top: -20%;
bottom: -20%;
width: 34%;
left: -60%;
background: linear-gradient(
105deg,
transparent,
oklch(1 0 0 / 0.16),
transparent
);
transform: skewX(-14deg);
}
.game-nav-item:hover .game-sweep > i,
.game-nav-item.is-active .game-sweep > i {
animation: sweep-x 0.55s ease-out both;
}
/* active triangle marker (game cursor) */
.game-marker {
position: absolute;
top: 50%;
width: 0;
height: 0;
border-block: 5px solid transparent;
border-left: 7px solid currentColor;
transform: translateY(-50%);
filter: drop-shadow(0 0 4px var(--color-signal-glow));
}
@keyframes sweep-x {
from { left: -60%; }
to { left: 130%; }
}
@keyframes nav-in {
from { opacity: 0; transform: translateX(-10px); }
to { opacity: 1; transform: translateX(0); }
}
/* ── Game frame: panel with cut corners + drawn-in edge lines ── */
.game-frame {
position: relative;
}
.game-frame::before {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
pointer-events: none;
background:
linear-gradient(var(--color-hairline), var(--color-hairline)) top left /
26px 1.5px,
linear-gradient(var(--color-hairline), var(--color-hairline)) top left / 1.5px
26px,
linear-gradient(var(--color-hairline), var(--color-hairline)) top right /
26px 1.5px,
linear-gradient(var(--color-hairline), var(--color-hairline)) top right / 1.5px
26px,
linear-gradient(var(--color-hairline), var(--color-hairline)) bottom left /
26px 1.5px,
linear-gradient(var(--color-hairline), var(--color-hairline)) bottom left /
1.5px 26px,
linear-gradient(var(--color-hairline), var(--color-hairline)) bottom right /
26px 1.5px,
linear-gradient(var(--color-hairline), var(--color-hairline)) bottom right /
1.5px 26px;
background-repeat: no-repeat;
}
/* ── Mobile lightness (<md): cheaper blur, shorter animations ── */
@media (max-width: 767px) {
.glass {
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
}
.game-nav-item {
animation-duration: 0.25s;
animation-delay: calc(var(--i) * 18ms);
}
.scan-line::after,
.animate-shimmer {
display: none;
}
}
@media (prefers-reduced-motion: reduce) {
.scan-line::after,
.scan-line,
services/frontend/src/components/ambient/ambient-canvas.tsx
+13
View File
@@ -67,6 +67,19 @@ export function AmbientCanvas({
const mount = mountRef.current;
if (!mount) return;
// Lightness gate: skip the WebGL layer entirely on small/coarse/data-saver
// devices — the static CSS fallback below stays. Desktop keeps the haze.
const nav = navigator as Navigator & {
connection?: { saveData?: boolean; deviceMemory?: number };
deviceMemory?: number;
};
const lightDevice =
window.matchMedia("(max-width: 767px)").matches ||
window.matchMedia("(pointer: coarse)").matches ||
nav.connection?.saveData === true ||
(nav.deviceMemory ?? 8) <= 4;
if (lightDevice) return;
let renderer: THREE.WebGLRenderer;
try {
renderer = new THREE.WebGLRenderer({
services/frontend/src/components/ambient/ambient-context.tsx
+7 -4
View File
@@ -12,11 +12,14 @@ import { AmbientCanvas } from "./ambient-canvas";
export type SignalTone = "signal" | "amber" | "vermilion";
/** sRGB triplets for the three semantic signals (matches globals.css). */
/**
* sRGB triplets for the three semantic signals — MONOCHROME build:
* tone is expressed as luminance/intensity, not hue (black & white theme).
*/
export const SIGNAL_RGB: Record<SignalTone, [number, number, number]> = {
signal: [0.42, 1.0, 0.52],
amber: [1.0, 0.76, 0.28],
vermilion: [1.0, 0.34, 0.28],
signal: [0.92, 0.94, 0.96], // nominal — near-white
amber: [0.62, 0.64, 0.68], // warn — mid grey
vermilion: [0.78, 0.8, 0.84], // danger — bright flash grey
};
export interface AmbientState {
services/frontend/src/components/shell/mobile-nav.tsx
+14 -5
View File
@@ -24,16 +24,25 @@ export function MobileNav() {
aria-label={item.label}
aria-current={active ? "page" : undefined}
className={cn(
"relative flex flex-1 flex-col items-center justify-center rounded-[12px] rounded-t-[20px] px-2 pb-[calc(0.4rem+env(safe-area-inset-bottom))] pt-2 md:hidden",
"game-nav-item relative flex min-h-[44px] flex-1 flex-col items-center justify-center rounded-t-[20px] px-2 pt-2 pb-[calc(0.4rem+env(safe-area-inset-bottom))] md:hidden",
active
? "bg-signal/15 text-signal"
: "text-ink-faint hover:bg-white/5 hover:text-ink-soft",
? "is-active text-white"
: "text-ink-faint hover:text-ink-soft",
)}
>
{active && (
<span className="absolute -top-2 h-8 w-8 rounded-full bg-signal shadow-[0_0_12px_var(--color-signal-glow)]" />
<span
aria-hidden="true"
className="absolute inset-x-4 top-0 h-[2px] bg-white shadow-[0_0_8px_var(--color-signal-glow)]"
/>
)}
<item.icon className="size-[20px]" strokeWidth={active ? 2.4 : 2} />
<span className="game-sweep" aria-hidden="true">
<i />
</span>
<item.icon
className="relative z-10 size-[20px]"
strokeWidth={active ? 2.4 : 2}
/>
{item.label}
</Link>
);
services/frontend/src/components/shell/nav-rail.tsx
+16 -8
View File
@@ -9,30 +9,37 @@ function NavItem({
label,
active,
Icon,
index,
}: {
href: string;
label: string;
active: boolean;
Icon: React.ComponentType<React.SVGProps<SVGSVGElement>>;
index: number;
}) {
return (
<a
href={href}
aria-label={label}
aria-current={active ? "page" : undefined}
style={{ "--i": index } as React.CSSProperties}
className={cn(
"group relative flex size-11 items-center justify-center rounded-[13px] transition-all",
"game-nav-item group flex size-11 items-center justify-center rounded-[13px] transition-colors",
active
? "bg-signal/15 text-signal"
? "is-active bg-white/10 text-white"
: "text-ink-faint hover:bg-white/5 hover:text-ink-soft",
)}
>
{active && (
<span className="absolute -left-3 h-6 w-1 rounded-full bg-signal shadow-[0_0_12px_var(--color-signal-glow)]" />
)}
<Icon className="size-[18px]" strokeWidth={active ? 2.4 : 2} />
{active && <span className="game-marker -left-3.5" />}
<span className="game-sweep" aria-hidden="true">
<i />
</span>
<Icon
className="relative z-10 size-[18px]"
strokeWidth={active ? 2.4 : 2}
/>
{/* hover tooltip — labels are hidden in the rail, so surface on hover */}
<span className="pointer-events-none absolute left-full z-50 ml-3 hidden whitespace-nowrap rounded-[9px] border border-hairline bg-canvas-2 px-2.5 py-1.5 text-xs font-medium text-ink-soft opacity-0 shadow-lg transition-opacity group-hover:opacity-100 md:block">
<span className="pointer-events-none absolute left-full z-50 ml-3 hidden whitespace-nowrap rounded-[9px] border border-hairline bg-canvas-2 px-2.5 py-1.5 font-mono text-xs font-medium text-ink-soft opacity-0 shadow-lg transition-opacity group-hover:opacity-100 md:block">
{label}
</span>
</a>
@@ -46,11 +53,12 @@ export function NavRail() {
return (
<nav className="glass mb-[calc(0.75rem+env(safe-area-inset-bottom))] ml-[calc(0.75rem+env(safe-area-inset-left))] mt-[calc(0.75rem+env(safe-area-inset-top))] hidden w-[68px] flex-col items-center gap-1 rounded-[18px] py-4 md:flex">
<div className="flex flex-1 flex-col gap-1">
{navItems.map((item) => (
{navItems.map((item, i) => (
<NavItem
key={item.href}
href={item.href}
label={item.label}
index={i}
active={isActivePath(path, item.matchPrefix)}
Icon={item.icon}
/>