pink-balloon-font

Pink Balloon Font

A glossy pink 3D bitmap font for Expo and React Native, with a CLI for generating your own coherent font using Nano Banana.

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 pink-balloon-font

Use it in Expo

import { BalloonText } from "pink-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 "pink-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 pink-balloon-font generate

Generate selected characters:

npx pink-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 pink-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