corpi/viberoom-web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style(space): deepen focus hud stage contrast

Browse Source
This commit is contained in:
corpi
2026-03-18 13:31:40 +09:00
parent d193973eb5
commit 14d7165ffe
1 changed files with 10 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
src/widgets/space-focus-hud/ui/SpaceFocusHudWidget.tsx
View File

@@ -133,10 +133,16 @@ export const SpaceFocusHudWidget = ({
onCaptureThought={onCaptureThought}
/>
<div className="pointer-events-none fixed inset-0 z-20 flex flex-col items-center justify-center pt-10 pb-32">
{/* Global Atmospheric Vignette: Ultra-wide, subtle gradient to naturally dim the center/top for text contrast without visible boundaries */}
<div className={cn(
"absolute inset-0 bg-gradient-to-b from-black/20 via-black/5 to-transparent transition-opacity duration-700 ease-[cubic-bezier(0.16,1,0.3,1)]",
isOverlayOpen ? "opacity-0" : "opacity-100"
)} />
{/* The Monolith (Central Hub) */}
<div
className={cn(
"pointer-events-auto flex flex-col items-center text-center max-w-4xl px-6 transition-all duration-700 ease-[cubic-bezier(0.16,1,0.3,1)]",
"pointer-events-auto relative flex flex-col items-center text-center max-w-4xl px-6 transition-all duration-700 ease-[cubic-bezier(0.16,1,0.3,1)]",
isOverlayOpen
? "opacity-0 scale-95 blur-md"
: "opacity-100 scale-100 blur-0",
@@ -148,8 +154,8 @@ export const SpaceFocusHudWidget = ({
className={cn(
"text-[8rem] md:text-[14rem] font-light tracking-tighter leading-none transition-colors duration-500",
sessionPhase === "break"
? "text-emerald-300 drop-shadow-[0_0_40px_rgba(16,185,129,0.3)]"
: "text-white drop-shadow-[0_0_40px_rgba(255,255,255,0.15)]",
? "text-emerald-300 drop-shadow-[0_4px_32px_rgba(16,185,129,0.4)]"
: "text-white drop-shadow-[0_2px_10px_rgba(0,0,0,0.5)] drop-shadow-[0_12px_40px_rgba(0,0,0,0.4)]",
)}
>
{timeDisplay}
@@ -159,7 +165,7 @@ export const SpaceFocusHudWidget = ({
{/* Core Intent */}
<div className="mt-8 flex flex-col items-center group w-full">
{/* Immutable Goal */}
<h2 className="text-2xl md:text-4xl font-light tracking-tight text-white/95">
<h2 className="text-2xl md:text-4xl font-light tracking-tight text-white drop-shadow-[0_1px_4px_rgba(0,0,0,0.6)] drop-shadow-[0_8px_24px_rgba(0,0,0,0.3)]">
{normalizedGoal}
</h2>