The package includes A-Z, a-z, and 0-9 as 62 transparent, variable-width PNG glyphs. They weigh 1.01 MB together and ship with an accessible BalloonText component that works without a font-loading step.

This is a bitmap display font, not a .ttf or .otf, so it cannot be loaded with expo-font or useFonts(). Use it for headings, scores, counters, and short labels. Keep paragraphs and input fields in a regular text font.

Install

npm install nano-banana-balloon-font

Use it in Expo

import { BalloonText } from "nano-banana-balloon-font";

export function Score() {
  return (
    <BalloonText
      text="Kiki 2048"
      size={72}
      letterSpacing={-4}
      accessibilityLabel="Kiki, score 2048"
    />
  );
}

Metro finds the static require() calls in the package and bundles the PNGs automatically. Unsupported characters render as spaces.

Props

| Prop | Type | Default | Purpose | | --- | --- | --- | --- | | text | string | Required | Text to render | | size | number | 64 | Glyph height in points | | letterSpacing | number | 0 | Space between glyphs | | style | StyleProp<ViewStyle> | — | Style for the containing row | | accessibilityLabel | string | text | Spoken label for assistive technology |

For direct access to the font metrics and image sources:

import {
  BALLOON_FONT_EM,
  balloonFont,
} from "nano-banana-balloon-font/font";

Why PNG instead of TTF or OTF?

The balloon look depends on color, reflections, seams, highlights, and soft 3D shading. A normal font file stores outlines, so it cannot reproduce that material faithfully. The PNG glyphs preserve the original render while shared font metrics keep every character aligned.

The included renderer handles one short line at a time. Split text on newlines and render multiple BalloonText rows when you need a multiline display.

Generate your own font

The CLI uses google/nano-banana-2 through Replicate. It generates each glyph on a flat chroma-key background, removes that background locally, aligns the result to shared font metrics, and writes compact transparent PNGs.

Add a Replicate token to .env in the directory where you run the command:

REPLICATE_API_TOKEN=r8_your_token_here

REPLICATE_API_KEY also works.

Generate the full alphanumeric set:

npx nano-banana-balloon-font generate

Generate selected characters:

npx nano-banana-balloon-font generate \
  --characters "ABCabc123!?" \
  --output ./my-balloon-font

The generated directory contains app-ready assets and the original model output:

my-balloon-font/
├── assets/
│   ├── BalloonFont.js
│   ├── font.json
│   └── glyph-*.png
└── raw/
    └── glyph-*.png

Match a custom style

The default prompt generates the pink balloon style without shipping reference images in the package. Add your own image when you need tighter consistency or want to create a different family:

npx nano-banana-balloon-font generate \
  --reference ./my-material.png \
  --style "inflated cobalt-blue satin with soft silver highlights"

Generator options

| Option | Purpose | | --- | --- | | --characters "ABC123" | Generate only the supplied characters | | --size 128 | Set packaged glyph height; 256 is the default | | --reference ./style.png | Add a visual reference; repeat for several images | | --style "..." | Describe the material, color, and shape | | --concurrency 2 | Set the number of parallel generations | | --key-color "#00ff00" | Change the chroma-key background | | --overwrite | Regenerate glyphs already present | | --dry-run | Print prompts without calling Replicate |

Generation uses paid Replicate API calls. Test a small character set before generating the full 62-glyph family.

License

MIT