From f12ed681b7e1c56587e67b015748dcbdec48d9bc Mon Sep 17 00:00:00 2001 From: innrVoice Date: Wed, 15 Apr 2026 02:47:49 +0300 Subject: [PATCH] feat: better demo story --- README.md | 2 - .../AnimationDemo/Scene/Scene.module.css | 6 ++ .../components/AnimationDemo/Scene/Scene.tsx | 62 ++++++++++-------- .../AnimationDemo/Scene/assets/moon-glow.png | Bin 6331 -> 0 bytes 4 files changed, 39 insertions(+), 31 deletions(-) delete mode 100644 src/stories/components/AnimationDemo/Scene/assets/moon-glow.png diff --git a/README.md b/README.md index 2b3691b..d06a1bb 100644 --- a/README.md +++ b/README.md @@ -327,5 +327,3 @@ pnpm build:sb Output: `storybook-static/` - -This directory is used for deployment to `storybook.atomtrigger.dev`. diff --git a/src/stories/components/AnimationDemo/Scene/Scene.module.css b/src/stories/components/AnimationDemo/Scene/Scene.module.css index a3ffa30..de3a290 100644 --- a/src/stories/components/AnimationDemo/Scene/Scene.module.css +++ b/src/stories/components/AnimationDemo/Scene/Scene.module.css @@ -68,6 +68,12 @@ animation: sunGlowFloat 36s linear infinite; } +.sunGlowScale { + transform-box: fill-box; + transform-origin: center center; + transition: transform 1s ease-in-out; +} + .moon { transition: transform 1s ease-out, diff --git a/src/stories/components/AnimationDemo/Scene/Scene.tsx b/src/stories/components/AnimationDemo/Scene/Scene.tsx index c1e5737..73a7fa9 100644 --- a/src/stories/components/AnimationDemo/Scene/Scene.tsx +++ b/src/stories/components/AnimationDemo/Scene/Scene.tsx @@ -19,20 +19,19 @@ type ScenePreset = { glareTop: string; glareBottom: string; glareOpacity: number; - seaBeamTop: string; - seaBeamBottom: string; + beamVariant: 'none' | 'large' | 'small'; seaBeamOpacity: number; - // Kept as source-of-truth from the filtered SVG version; runtime no longer scales the beam. - seaBeamScale: number; hillBack: string; hillFrontTop: string; hillFrontBottom: string; horizonLine: string; sunFill: string; sunHalo: string; + sunGlowOpacity: number; sunOpacity: number; sunTranslateY: number; moonGlow: string; + moonGlowOpacity: number; moonTintStart: string; moonTintEnd: string; moonOpacity: number; @@ -66,19 +65,19 @@ const presets: Record = { glareTop: '#d9ffff', glareBottom: '#ffffff', glareOpacity: 0.22, - seaBeamTop: '#fff6d5', - seaBeamBottom: '#ffffff', + beamVariant: 'none', seaBeamOpacity: 0, - seaBeamScale: 0.58, hillBack: '#0f6f3b', hillFrontTop: '#148c3d', hillFrontBottom: '#0a5d1a', horizonLine: '#e9ffff', sunFill: '#fff2b4', sunHalo: '#fff8d8', + sunGlowOpacity: 0.7, sunOpacity: 1, sunTranslateY: -140, moonGlow: '#99fff2', + moonGlowOpacity: 0.5, moonTintStart: '#ffffff', moonTintEnd: '#6abbd1', moonOpacity: 0, @@ -93,19 +92,19 @@ const presets: Record = { glareTop: '#ffd9b5', glareBottom: '#fff2cd', glareOpacity: 0.08, - seaBeamTop: '#ffd58b', - seaBeamBottom: '#fff1cf', + beamVariant: 'large', seaBeamOpacity: 0.88, - seaBeamScale: 1, hillBack: '#33485c', hillFrontTop: '#55655a', hillFrontBottom: '#2f3f3a', horizonLine: '#ffd6a1', sunFill: '#ffd46b', sunHalo: '#ffb86a', + sunGlowOpacity: 1, sunOpacity: 1, sunTranslateY: 0, moonGlow: '#99fff2', + moonGlowOpacity: 0.5, moonTintStart: '#ffffff', moonTintEnd: '#7abdd4', moonOpacity: 0, @@ -120,19 +119,19 @@ const presets: Record = { glareTop: '#58defe', glareBottom: '#dfffff', glareOpacity: 0.04, - seaBeamTop: '#8ef5ff', - seaBeamBottom: '#e4ebe4', + beamVariant: 'small', seaBeamOpacity: 1, - seaBeamScale: 0.5, hillBack: '#082e48', hillFrontTop: '#0d4664', hillFrontBottom: '#05273d', horizonLine: '#84dfff', sunFill: '#ffe286', sunHalo: '#ffd8a6', + sunGlowOpacity: 1, sunOpacity: 0.12, sunTranslateY: 120, moonGlow: '#8ffbe2', + moonGlowOpacity: 0.5, moonTintStart: '#ffffff', moonTintEnd: '#0b4368', moonOpacity: 1, @@ -147,19 +146,19 @@ const presets: Record = { glareTop: '#fff0ce', glareBottom: '#fff9e3', glareOpacity: 0.1, - seaBeamTop: '#ffc56f', - seaBeamBottom: '#fff0d1', + beamVariant: 'large', seaBeamOpacity: 0.9, - seaBeamScale: 1.08, hillBack: '#416072', hillFrontTop: '#638167', hillFrontBottom: '#314d41', horizonLine: '#ffe3bf', sunFill: '#ffd875', sunHalo: '#ffc786', + sunGlowOpacity: 1, sunOpacity: 1, sunTranslateY: 0, moonGlow: '#8ffbe2', + moonGlowOpacity: 0.5, moonTintStart: '#ffffff', moonTintEnd: '#0b4368', moonOpacity: 0.12, @@ -177,8 +176,9 @@ export function Scene({ mode }: SceneProps) { const moonGlowGradientId = `${idPrefix}-moon-glow`; const moonGradientId = `${idPrefix}-moon`; const seaGlareGradientId = `${idPrefix}-sea-glare`; - const showLargeBeam = mode === 'sunset' || mode === 'sunrise'; - const showSmallBeam = mode === 'night'; + const isLargeBeam = preset.beamVariant === 'large'; + const isSmallBeam = preset.beamVariant === 'small'; + const sunGlowScale = mode === 'day' ? 1 : 1.7; return (
@@ -231,15 +231,18 @@ export function Scene({ mode }: SceneProps) { opacity: preset.sunOpacity, }} > - + + +
diff --git a/src/stories/components/AnimationDemo/Scene/assets/moon-glow.png b/src/stories/components/AnimationDemo/Scene/assets/moon-glow.png deleted file mode 100644 index 1ef31a47939d4f7537454cb88ce8ed791b2695cb..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 6331 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 K{W3kLsQ&|PKQ}D^