Framer Clone Diagrams

Component Architecture

graph TD
subgraph Canvas["Infinite Canvas"]
RPR[ResponsivePageRenderer]
HUD[HudSurface]
end

subgraph Viewports["Viewport Nodes"]
DESKTOP[Desktop 1280px+]
TABLET[Tablet 768px]
MOBILE[Mobile 320px]
end

subgraph Floating["Floating Elements"]
IMAGES[Images]
TEXT[Text]
SHAPES[Shapes]
end

subgraph Sidebars["Panels"]
LEFT[LeftSidebar]
RIGHT[RightSidebar]
LAYERS[LayersPanel]
PROPS[PropertiesPanel]
end

Canvas --> RPR
Canvas --> HUD
RPR --> Viewports
RPR --> Floating
LEFT --> LAYERS
RIGHT --> PROPS

Ground Wrapper System

Each canvas element gets its own positioning wrapper — replicating Framer's architecture.

graph TD
CAM[Camera Transform<br/>pan/zoom all content]
CAM --> GW1[GroundWrapper<br/>Desktop Viewport]
CAM --> GW2[GroundWrapper<br/>Tablet Viewport]
CAM --> GW3[GroundWrapper<br/>Mobile Viewport]
CAM --> GW4[GroundWrapper<br/>Floating Image]
CAM --> GW5[GroundWrapper<br/>Floating Text]

GW1 --> COMP1[Component Tree]
GW2 --> COMP2[Component Tree]
GW3 --> COMP3[Component Tree]
GW4 --> IMG[Image Element]
GW5 --> TXT[Text Element]

Each GroundWrapper applies independent transform: translate(x, y) scale(s) rotate(r) with GPU-optimized CSS (will-change, isolation, contain).

Transform Data Flow (60fps)

The transform system achieves 60fps by bypassing React re-renders entirely.

sequenceDiagram
participant User
participant Canvas
participant Ref as transformState (useRef)
participant Subs as Subscribers
participant DOM as Direct DOM

User->>Canvas: Pan/zoom input
Canvas->>Ref: Mutate ref (no React render)
Canvas->>DOM: Apply CSS transform to camera
Canvas->>Subs: notifySubscribers()
Subs->>DOM: Update overlay positions directly
Note over User,DOM: Zero React re-renders!

State Management (MST)

graph TD
ROOT[RootStore]
ROOT --> PROJECT[ProjectStore<br/>Domain Logic]
ROOT --> EDITOR[EditorUIStore<br/>UI State]

PROJECT --> PROJECTS["Projects[]"]
PROJECTS --> PAGES["Pages[]"]
PAGES --> COMPONENTS["Components[]"]
PAGES --> CANVAS_ELEMENTS["CanvasElements[]"]

EDITOR --> SELECTIONS[Current Selections]
EDITOR --> TOOL[Tool State]
EDITOR --> PANELS[Panel Visibility]

Performance Characteristics