Skip to content

Commit f21a926

Browse files
waleedlatif1waleedlatif1
committed
fix(landing): stabilize platform preview motion
1 parent f3ccdfe commit f21a926

11 files changed

Lines changed: 105 additions & 190 deletions

File tree

‎apps/sim/app/(landing)/components/hero/components/hero-platform-loop/hero-workflow-stage.tsx‎

Lines changed: 62 additions & 109 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,8 @@
1-
'use client'
2-
3-
import { type CSSProperties, useLayoutEffect, useMemo, useRef, useState } from 'react'
1+
import { useMemo } from 'react'
42
import { cn } from '@sim/emcn'
53
import { StageBlockCard } from '@/app/(landing)/components/hero/components/hero-platform-loop/stage-block-card'
64
import {
5+
blockHeight,
76
handleAnchors,
87
STAGE_BLOCKS,
98
STAGE_CANVAS,
@@ -15,8 +14,6 @@ import {
1514
type BlockDef,
1615
} from '@/app/(landing)/components/hero/components/hero-visual/workflow-data'
1716

18-
/** Upper bound on the canvas render scale (the scale at the full 1300px cap). */
19-
const MAX_STAGE_SCALE = 0.71
2017
/** Breathing room between the canvas bounds and the card edges, in card px. */
2118
const STAGE_MARGIN = 20
2219

@@ -40,11 +37,10 @@ interface HeroWorkflowStageProps {
4037

4138
/**
4239
* The hero window's live workflow canvas - the right-pane counterpart of the
43-
* chat loop. Blocks pop in one by one as `builtCount` advances (staggered
44-
* scale/fade entrances, edges stroke-draw once both endpoints exist) at their
45-
* fixed positions. The edge SVG is `overflow-visible` - SVGs clip
46-
* at their viewport by default, which would cut the lines if a block ever sat
47-
* outside the design-canvas bounds.
40+
* chat loop. One stable SVG viewBox owns both the edge and block coordinate
41+
* systems, so drawing a line or revealing a block never changes the canvas's
42+
* measured scale. Blocks pop in one by one as `builtCount` advances and edges
43+
* stroke-draw once both endpoints exist.
4844
*
4945
* Decorative and `aria-hidden` (via the parent frame), so blocks are NOT
5046
* draggable - `pointer-events-none`, matching the rest of the hero animation.
@@ -64,116 +60,73 @@ export function HeroWorkflowStage({
6460
canvas = STAGE_CANVAS,
6561
selectedId,
6662
}: HeroWorkflowStageProps) {
67-
const containerRef = useRef<HTMLDivElement>(null)
68-
const [scale, setScale] = useState(MAX_STAGE_SCALE)
6963
const blocksById = useMemo(() => new Map(blocks.map((b) => [b.id, b])), [blocks])
7064

71-
// Fit the design canvas to the card: scale down when the pane narrows so the
72-
// branch blocks never clip, capped at the full-width scale. Measures LAYOUT
73-
// size (offsetWidth/Height) - the stage lives inside the platform loop's
74-
// scale-transformed design-space layer, and getBoundingClientRect's visual
75-
// size would compound that outer scale into a double shrink.
76-
useLayoutEffect(() => {
77-
const el = containerRef.current
78-
if (!el) return
79-
const measure = () => {
80-
const w = el.offsetWidth
81-
const h = el.offsetHeight
82-
if (w < 40 || h < 40) return
83-
setScale(
84-
Math.min(
85-
MAX_STAGE_SCALE,
86-
(w - STAGE_MARGIN) / canvas.width,
87-
(h - STAGE_MARGIN) / canvas.height
88-
)
89-
)
90-
}
91-
measure()
92-
const ro = new ResizeObserver(measure)
93-
ro.observe(el)
94-
return () => ro.disconnect()
95-
}, [canvas.width, canvas.height])
96-
9765
const builtIds = useMemo(
9866
() => new Set(blocks.slice(0, builtCount).map((b) => b.id)),
9967
[blocks, builtCount]
10068
)
10169

10270
return (
103-
<div
104-
ref={containerRef}
105-
className='flex h-full w-full items-center justify-center overflow-hidden'
71+
<svg
72+
aria-hidden='true'
73+
className='size-full overflow-hidden'
74+
viewBox={`${-STAGE_MARGIN / 2} ${-STAGE_MARGIN / 2} ${canvas.width + STAGE_MARGIN} ${canvas.height + STAGE_MARGIN}`}
75+
preserveAspectRatio='xMidYMid meet'
76+
fill='none'
10677
>
107-
<div
108-
className='relative shrink-0'
109-
style={{
110-
width: canvas.width * scale,
111-
height: canvas.height * scale,
112-
}}
113-
>
114-
<div
115-
className='absolute top-0 left-0'
116-
style={{
117-
width: canvas.width,
118-
height: canvas.height,
119-
transform: `scale(${scale})`,
120-
transformOrigin: '0 0',
121-
}}
122-
>
123-
<svg
124-
className='pointer-events-none absolute inset-0 overflow-visible'
125-
width={canvas.width}
126-
height={canvas.height}
127-
viewBox={`0 0 ${canvas.width} ${canvas.height}`}
128-
fill='none'
129-
aria-hidden='true'
130-
>
131-
{edges.map(([from, to]) => {
132-
const source = blocksById.get(from)
133-
const target = blocksById.get(to)
134-
if (!source || !target) return null
135-
const visible = builtIds.has(from) && builtIds.has(to)
136-
const s = handleAnchors(source).out
137-
const t = handleAnchors(target).in
138-
return (
139-
<path
140-
key={`${from}-${to}`}
141-
d={verticalSmoothStep(s.x, s.y, t.x, t.y)}
142-
pathLength={1}
143-
stroke='var(--workflow-edge)'
144-
strokeWidth={2}
145-
strokeLinecap='round'
146-
className='transition-[stroke-dashoffset] duration-500 [stroke-dasharray:1] [transition-timing-function:cubic-bezier(0.22,1,0.36,1)]'
147-
style={{ strokeDashoffset: visible ? 0 : 1 } as CSSProperties}
148-
/>
149-
)
150-
})}
151-
</svg>
78+
{edges.map(([from, to]) => {
79+
const source = blocksById.get(from)
80+
const target = blocksById.get(to)
81+
if (!source || !target) return null
82+
const visible = builtIds.has(from) && builtIds.has(to)
83+
const s = handleAnchors(source).out
84+
const t = handleAnchors(target).in
85+
return (
86+
<path
87+
key={`${from}-${to}`}
88+
d={verticalSmoothStep(s.x, s.y, t.x, t.y)}
89+
pathLength={1}
90+
stroke='var(--workflow-edge)'
91+
strokeWidth={2}
92+
strokeLinecap='round'
93+
className={cn(
94+
'transition-[stroke-dashoffset] duration-500 [stroke-dasharray:1] [transition-timing-function:cubic-bezier(0.22,1,0.36,1)]',
95+
visible ? '[stroke-dashoffset:0]' : '[stroke-dashoffset:1]'
96+
)}
97+
/>
98+
)
99+
})}
152100

153-
{blocks.map((block) => {
154-
const built = builtIds.has(block.id)
155-
return (
156-
<div
157-
key={block.id}
101+
{blocks.map((block) => {
102+
const built = builtIds.has(block.id)
103+
return (
104+
<foreignObject
105+
key={block.id}
106+
x={block.x}
107+
y={block.y}
108+
width={BLOCK_WIDTH}
109+
height={blockHeight(block)}
110+
overflow='visible'
111+
>
112+
<div
113+
className={cn(
114+
'pointer-events-none relative size-full origin-center transition-[opacity,scale] duration-300 will-change-[opacity,transform] [transition-timing-function:cubic-bezier(0.22,1,0.36,1)]',
115+
built ? 'scale-100 opacity-100' : 'scale-[0.94] opacity-0'
116+
)}
117+
>
118+
<StageBlockCard block={block} />
119+
<span
120+
aria-hidden
158121
className={cn(
159-
'pointer-events-none absolute transition-[opacity,scale] duration-300 [transition-timing-function:cubic-bezier(0.22,1,0.36,1)]',
160-
built ? 'scale-100 opacity-100' : 'scale-[0.94] opacity-0'
122+
'pointer-events-none absolute inset-0 rounded-[13px] ring-[1.75px] ring-[var(--text-secondary)] transition-opacity duration-300 ease-out',
123+
selectedId === block.id && built ? 'opacity-100' : 'opacity-0'
161124
)}
162-
style={{ left: block.x, top: block.y, width: BLOCK_WIDTH }}
163-
>
164-
<StageBlockCard block={block} />
165-
<span
166-
aria-hidden
167-
className={cn(
168-
'pointer-events-none absolute inset-0 rounded-[13px] ring-[1.75px] ring-[var(--text-secondary)] transition-opacity duration-300 ease-out',
169-
selectedId === block.id && built ? 'opacity-100' : 'opacity-0'
170-
)}
171-
/>
172-
</div>
173-
)
174-
})}
175-
</div>
176-
</div>
177-
</div>
125+
/>
126+
</div>
127+
</foreignObject>
128+
)
129+
})}
130+
</svg>
178131
)
179132
}

‎apps/sim/app/(landing)/components/shared/editor-loop/editor-loop.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,8 +5,8 @@ import { cn } from '@sim/emcn'
55
import { HeroWorkflowStage } from '@/app/(landing)/components/hero/components/hero-platform-loop/hero-workflow-stage'
66
import type { BlockDef } from '@/app/(landing)/components/hero/components/hero-visual/workflow-data'
77
import { HeroLoopShell } from '@/app/(landing)/components/shared/hero-loop-shell'
8+
import { PLATFORM_LOOP_RESET_FADE_MS } from '@/app/(landing)/components/shared/platform-loop-constants'
89
import type { EnterpriseSidebarProps } from '@/app/(landing)/enterprise/components/enterprise-platform-loop/enterprise-sidebar'
9-
import { RESET_FADE_MS } from '@/app/(landing)/hooks/use-design-scale'
1010
import { useMotionSafeCycle } from '@/app/(landing)/hooks/use-motion-safe-cycle'
1111

1212
/** The empty canvas holds this long before the first block lands. */
@@ -78,7 +78,7 @@ export function EditorLoop({ content }: EditorLoopProps) {
7878
setTimeout(() => setBuiltCount(i + 1), IDLE_HOLD_MS + i * BUILD_STEP_MS)
7979
),
8080
setTimeout(() => setSelected(true), selectAt),
81-
setTimeout(() => setFading(true), totalMs - RESET_FADE_MS),
81+
setTimeout(() => setFading(true), totalMs - PLATFORM_LOOP_RESET_FADE_MS),
8282
],
8383
totalMs,
8484
}

‎apps/sim/app/(landing)/components/shared/hero-loop-shell/hero-loop-shell.tsx‎

Lines changed: 25 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
11
'use client'
22

33
import type { ReactNode } from 'react'
4+
import { PLATFORM_LOOP_DESIGN } from '@/app/(landing)/components/shared/platform-loop-constants'
45
import {
56
EnterpriseSidebar,
67
type EnterpriseSidebarProps,
78
} from '@/app/(landing)/enterprise/components/enterprise-platform-loop/enterprise-sidebar'
8-
import { DESIGN, useDesignScale } from '@/app/(landing)/hooks/use-design-scale'
99

1010
interface HeroLoopShellProps {
1111
/** Workspace name in the sidebar header chip. */
@@ -23,12 +23,11 @@ interface HeroLoopShellProps {
2323
}
2424

2525
/**
26-
* The platform heroes' shared scaled stage: a `pointer-events-none` region
27-
* whose fixed 1280x735 design-space layer is fitted to the rendered width via
28-
* {@link useDesignScale} (`ResizeObserver` + `transform: scale`), holding the
29-
* live {@link EnterpriseSidebar} beside the workspace pane each loop supplies
30-
* as children. Purely presentational - the hero that renders it owns the
31-
* `aria-hidden` frame and the animation clock.
26+
* The platform heroes' shared scaled stage. An SVG viewBox maps the fixed
27+
* 1280x735 design space to the rendered window without applying a CSS
28+
* transform to the whole app. Keeping that scale out of the animated HTML
29+
* subtree prevents fractional repaint snapping in both the canvas and the
30+
* otherwise-static {@link EnterpriseSidebar}.
3231
*/
3332
export function HeroLoopShell({
3433
workspaceName = 'Brightwave',
@@ -38,27 +37,25 @@ export function HeroLoopShell({
3837
activeItem,
3938
children,
4039
}: HeroLoopShellProps) {
41-
const { regionRef, scale } = useDesignScale()
42-
4340
return (
44-
<div ref={regionRef} className='pointer-events-none absolute inset-0 overflow-hidden'>
45-
<div
46-
className='flex origin-top-left bg-[var(--surface-1)]'
47-
style={{
48-
width: DESIGN.width,
49-
height: DESIGN.height,
50-
transform: `scale(${scale})`,
51-
}}
52-
>
53-
<EnterpriseSidebar
54-
workspaceName={workspaceName}
55-
profileName={profileName}
56-
chats={chats}
57-
workflows={workflows}
58-
activeItem={activeItem}
59-
/>
60-
<div className='h-full min-w-0 flex-1 py-[7px] pr-[8px]'>{children}</div>
61-
</div>
62-
</div>
41+
<svg
42+
aria-hidden='true'
43+
className='pointer-events-none absolute inset-0 size-full overflow-hidden'
44+
viewBox={`0 0 ${PLATFORM_LOOP_DESIGN.width} ${PLATFORM_LOOP_DESIGN.height}`}
45+
preserveAspectRatio='xMinYMin meet'
46+
>
47+
<foreignObject width={PLATFORM_LOOP_DESIGN.width} height={PLATFORM_LOOP_DESIGN.height}>
48+
<div className='flex size-full bg-[var(--surface-1)]'>
49+
<EnterpriseSidebar
50+
workspaceName={workspaceName}
51+
profileName={profileName}
52+
chats={chats}
53+
workflows={workflows}
54+
activeItem={activeItem}
55+
/>
56+
<div className='h-full min-w-0 flex-1 py-[7px] pr-[8px]'>{children}</div>
57+
</div>
58+
</foreignObject>
59+
</svg>
6360
)
6461
}

‎apps/sim/app/(landing)/components/shared/platform-loop-constants.ts‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
/** Fixed design space shared by every live landing platform preview. */
2+
export const PLATFORM_LOOP_DESIGN = { width: 1280, height: 735 } as const
3+
4+
/** Fade-out length before a platform preview restarts its animation cycle. */
5+
export const PLATFORM_LOOP_RESET_FADE_MS = 300

‎apps/sim/app/(landing)/enterprise/components/enterprise-platform-loop/enterprise-platform-loop.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import { useMemo, useState } from 'react'
44
import { cn } from '@sim/emcn'
55
import { HeroWorkflowStage } from '@/app/(landing)/components/hero/components/hero-platform-loop/hero-workflow-stage'
66
import { HeroLoopShell } from '@/app/(landing)/components/shared/hero-loop-shell'
7+
import { PLATFORM_LOOP_RESET_FADE_MS } from '@/app/(landing)/components/shared/platform-loop-constants'
78
import { EnterpriseHomeStage } from '@/app/(landing)/enterprise/components/enterprise-platform-loop/enterprise-home-stage'
89
import {
910
BUILD_STEP_MS,
@@ -12,7 +13,6 @@ import {
1213
type EnterpriseLoopContent,
1314
type EnterpriseLoopPhase,
1415
} from '@/app/(landing)/enterprise/components/enterprise-platform-loop/stage-data'
15-
import { RESET_FADE_MS } from '@/app/(landing)/hooks/use-design-scale'
1616
import { useMotionSafeCycle } from '@/app/(landing)/hooks/use-motion-safe-cycle'
1717

1818
interface EnterprisePlatformLoopProps {
@@ -78,7 +78,7 @@ export function EnterprisePlatformLoop({
7878
setTimeout(() => setBuiltCount(i + 1), timeline.buildStart + i * BUILD_STEP_MS)
7979
),
8080
setTimeout(() => setPhase('reply'), timeline.reply),
81-
setTimeout(() => setFading(true), timeline.total - RESET_FADE_MS),
81+
setTimeout(() => setFading(true), timeline.total - PLATFORM_LOOP_RESET_FADE_MS),
8282
],
8383
totalMs: timeline.total,
8484
}

‎apps/sim/app/(landing)/enterprise/components/enterprise-platform-loop/enterprise-sidebar.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -107,7 +107,7 @@ export const EnterpriseSidebar = memo(function EnterpriseSidebar({
107107
activeItem = 'New chat',
108108
}: EnterpriseSidebarProps = {}) {
109109
return (
110-
<div className='flex h-full w-[238px] flex-shrink-0 flex-col bg-[var(--surface-1)] pt-3'>
110+
<div className='isolate flex h-full w-[238px] flex-shrink-0 flex-col bg-[var(--surface-1)] pt-3 will-change-transform'>
111111
<div className='flex flex-shrink-0 items-center justify-between px-2'>
112112
<div className={cn(chipVariants(), 'min-w-0 flex-1')}>
113113
{/* The exact Brightwave mark the homepage capture seeds

‎apps/sim/app/(landing)/files/components/files-hero-loop.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,8 +7,8 @@ import { ArrowUpDown, File, ListFilter, Plus, Search } from '@sim/emcn/icons'
77
import { AgentIcon } from '@/components/icons'
88
import { CsvIcon, DocxIcon, PdfIcon } from '@/components/icons/document-icons'
99
import { HeroLoopShell } from '@/app/(landing)/components/shared/hero-loop-shell'
10+
import { PLATFORM_LOOP_RESET_FADE_MS } from '@/app/(landing)/components/shared/platform-loop-constants'
1011
import { ZipIcon } from '@/app/(landing)/components/shared/zip-icon'
11-
import { RESET_FADE_MS } from '@/app/(landing)/hooks/use-design-scale'
1212
import { useMotionSafeCycle } from '@/app/(landing)/hooks/use-motion-safe-cycle'
1313

1414
/** Sidebar content for the files hero - a file-heavy team's workspace. */
@@ -222,7 +222,7 @@ export function FilesHeroLoop() {
222222
setTimeout(() => setRowCount(i + 1), IDLE_HOLD_MS + i * ROW_STEP_MS)
223223
),
224224
setTimeout(() => setDropped(true), dropAt),
225-
setTimeout(() => setFading(true), totalMs - RESET_FADE_MS),
225+
setTimeout(() => setFading(true), totalMs - PLATFORM_LOOP_RESET_FADE_MS),
226226
],
227227
totalMs,
228228
}

0 commit comments

Comments
 (0)