saketdesign/loader-builder

Purpose and runtime

Loader Builder is a client-side React/TypeScript visual editor for configurable animated grid loaders. It runs as a Vite single-page application in the browser, with Node.js 18+ used for development/build tooling. Browser APIs support canvas interaction and WebM export; no backend, database, or external API is indicated.

Entry bootstrap: src/main.tsx mounts the application, and src/App.tsx composes the editor.

Application shell and composition

src/App.tsx is the top-level feature coordinator. src/components/MainLayout.tsx establishes the editor’s primary regions: controls/settings alongside the visual workspace. Shared application styling is rooted in src/index.css and src/App.css.

The UI is organized around a single editing session rather than routes or server-driven pages.

Central state and domain model

src/store.ts is the central state boundary for loader configuration and editor interaction state. src/types.ts defines the domain contracts shared among controls, renderer, and exporters.

Defaults and reusable animation/pattern definitions are isolated from UI:

• src/utils/defaults.ts

• src/utils/patterns.ts

Changes initiated by UI controls update the store; rendering and export consume the same configuration, keeping preview and generated artifacts aligned.

Editor controls and settings flow

src/components/TopControls.tsx provides top-level actions, likely including export-oriented commands and workspace controls. src/components/SettingsPanel.tsx exposes loader parameters such as colors, density, shape, and animation style.

These components are input boundaries: they translate user interaction into configuration updates rather than directly rendering grid cells:

• src/components/TopControls.tsx

• src/components/SettingsPanel.tsx

• src/store.ts

Canvas workspace and loader rendering

src/components/CanvasWorkspace.tsx owns the interactive visual surface, including drag/pan/zoom behavior described by the product. It hosts or coordinates src/components/GridRenderer.tsx, which materializes the configured grid and animation state into the preview.

src/components/LoaderCard.tsx is a reusable loader presentation unit, separating individual loader visual composition from workspace layout. This rendering layer consumes state/types and pattern definitions, making it the critical preview boundary.

Export pipelines

Exports are client-side transformations of the current loader configuration:

• src/utils/exportCode.ts generates a ready-to-use React functional component.

• src/utils/exportVideo.ts records the rendered loader into a WebM video.

The export boundary should remain deterministic relative to src/store.ts and src/types.ts: user-visible preview settings must map directly to generated code or recorded frames. Video export depends on browser media/canvas recording capabilities.

Motion and visual primitives

Reusable animated interaction/presentation primitives live under src/components/motion-primitives/, notably dialog, accordion, transition, text, cursor, and scroll-lock behavior. They support polished UI behavior but are separate from loader-domain animation:

• src/components/motion-primitives/dialog.tsx

• src/components/motion-primitives/transition-panel.tsx

• src/components/motion-primitives/usePreventScroll.tsx

Tailwind/PostCSS configuration exists, while component-specific CSS remains in the application stylesheets.