npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2026 – Pkg Stats / Ryan Hefner

@web-my-money/brand

v1.1.0

Published

WMM brand kit — colours, gradients, typography, theme-aware 2D/3D logos, asset registry (Drive vault connections), brand-vars CSS, favicon/OG metadata. The canonical Web My Money brand slot.

Downloads

891

Vulnerabilities

Powered byPowered by Snyk
  • 0High
  • 0Medium
  • 0Low

Links

Maintainers

adminwebmymoneyadminwebmymoney

Keywords

Readme

@web-my-money/brand

Theme-aware WMM logo + favicon/OG metadata, sourced from the official brand Drive vault. One import, correct logo for the active theme (light / dark / wmm), no flash, SSR-safe.

Install

# .npmrc (repo root + the app's Vercel env)
#   @web-my-money:registry=https://npm.pkg.github.com
#   //npm.pkg.github.com/:_authToken=${GITHUB_TOKEN}   # PAT with read:packages
npm install @web-my-money/brand

Use

/* globals.css — once */
@import "@web-my-money/brand/brand.css";   /* sets --wmm-logo-ink per theme */
// any component
import { WmmLogo } from "@web-my-money/brand";

<WmmLogo />                        // lockup, 28px tall, white on dark/wmm · navy on light
<WmmLogo variant="mark" size={32} />
<WmmLogo tone="white" />           // force a tone (e.g. on a colored CTA)
// app/layout.tsx — favicon + titles in one line
import { wmmMetadata, wmmViewport } from "@web-my-money/brand";
export const metadata = wmmMetadata({ appName: "Brain" });
export const viewport = wmmViewport();

The logo follows the --wmm-logo-ink CSS variable, which brand.css sets per data-theme (white on dark/wmm, navy #1f2d56 on light). Pair with the @web-my-money/tokens theme runtime (data-theme on <html>, wmm-theme localStorage). Without brand.css it falls back to currentColor.

Variants

| variant | Asset stem | What it is | |---|---|---| | lockup (default) | isologotipo | mark + wordmark | | mark | isotipo | symbol only |

logotipo (wordmark only) ships in RAW_SVG once synced; add to INK_SVG when needed.

Raw assets (non-React / CDN / email)

import { RAW_SVG, resolveLogoTone, rawLogoKey } from "@web-my-money/brand";
RAW_SVG["isologotipo-white"];                 // verbatim SVG string
RAW_SVG[rawLogoKey("isotipo", "light")];      // -> isotipo-blue

Files are also published under @web-my-money/brand/assets/logos/<name>.svg.

Refreshing from Drive

When the brand team updates the logos in the Drive vault:

npm i -D googleapis
GOOGLE_APPLICATION_CREDENTIALS=/path/to/sa.json npm run sync:brand

Pulls the newest SVG + favicon files (folder IDs in scripts/sync-brand.mjs, documented in WMM_BRAND_STANDARD.md), regenerates the logo modules. Review the diff and commit. Does not publish.

Scripts

  • npm run gen:logos — regenerate src/logos.generated.ts from assets/logos/*.svg
  • npm run sync:brand — pull newest from Drive, then gen:logos
  • npm run build — gen:logos + tsup (cjs/esm/dts)
  • npm run push:assets — publish assets/** to the public Supabase Storage bucket

Motion assets (logo-in-motion video)

assets/motion/, assets/renders/, and assets/3d/ are gitignored — they hold heavy CDN-only binaries (the WMM_MOTION / WMM_RENDERS catalog in src/assets.ts) staged locally just long enough to publish. They are never committed and never shipped in the npm package (keeps installs tiny — see the note atop src/assets.ts).

To publish the "hero-3d" animated mark once a file is staged at assets/motion/animacion-3d.mp4:

npm i -D @supabase/supabase-js
SUPABASE_URL=https://oeqorrixgmjlmenpzkio.supabase.co \
SUPABASE_SERVICE_ROLE_KEY=... \
npm run push:assets

Run this from a machine/session that holds the Hub project's service-role key — it's a secret that should never be pasted into a chat session or committed. Once uploaded, motionUrl("hero-3d") resolves and <WmmLogoMotion src={motionUrl("hero-3d")} /> / <WmmSplash motionSrc={motionUrl("hero-3d")} /> play it; both already fall back to the static mark if the URL 404s, so this is safe to land before the publish step runs.