@mhmdhammoud/leadcall

LeadCall's shared libraries — a single npm package with namespaced subpaths. Today it ships brand; utils and others can be added later under the same package.

@mhmdhammoud/leadcall
└── brand/                       → import '@mhmdhammoud/leadcall/brand'
    ├── (colors, runtime exports)
    ├── logo.svg · logo.png
    ├── lottie/
    │   ├── loading.json   # ✅ idle loop — "call → signal → processing"
    │   ├── splash.json    # ✅ one-shot draw-on reveal — "reveal → brand"
    │   └── archive/blink.json   # ⛔ archived, not shipped to any surface
    └── video/                   # webm renders for marketing reuse
        ├── loading.webm · splash.webm
        └── archive/blink.webm

On disk these live under assets/brand/… and src/brand/…; the package exports map projects them onto the @mhmdhammoud/leadcall/brand/* subpath.

The two approved animations

| Variant | Meaning | Where it belongs | |---|---|---| | splash | Reveal → Brand | First app load, mobile startup, website hero, marketing/video intros, demo & launch assets. Plays once, freezes. | | loading | Call → Signal → Processing | Data/sync/processing waits: CRM sync, call-logs & analytics loading, background processing, empty states. Seamless loop. |

blink is archived — no product meaning for a B2B revenue-attribution platform, intentionally shipped nowhere. Kept only for reference.

Where NOT to animate: sidebar/header lockup, pricing, docs, legal, repeated SEO pages, every card, repeated page headers — use the static logo.svg.

Consuming it

npm install @mhmdhammoud/leadcall

// colors (compiled runtime export)
import { colors } from '@mhmdhammoud/leadcall/brand'
// colors.primary === '#10b981'

// Lottie JSON (imported straight from the package)
import loading from '@mhmdhammoud/leadcall/brand/lottie/loading.json' // lottie-react
import splash from '@mhmdhammoud/leadcall/brand/lottie/splash.json'   // lottie-react-native

The raw SVG is the one asset apps serve from a static URL path rather than importing, so npm run sync copies just logo.svg into each app (Next public/, Expo assets/). Everything else comes through npm.

Maintaining

npm run build     # regenerate Lottie JSON from logo.svg, then compile dist/
npm run release   # build + sync the SVG into consuming repos

Edit scripts/build-lottie-logo.mjs to change the animations (it parses assets/brand/logo.svg into Lottie bezier shapes — never hand-edit the generated *.json). Pushing to master runs CI (lint/typecheck/test) and publishes to npm.

Adding a new namespace (e.g. utils)

Add src/utils/ + assets/utils/, then two exports entries: "./utils" → dist/utils/index.js and "./utils/*" → assets/utils/*.