Components
Glyph City
Animated glyph cityscape with neon buildings, antennas, blinking peak lights, and flying vehicles.
npx neonblade add glyph-cityType:
Variant:
Props Configuration
| Prop | Type | Default | Description |
|---|---|---|---|
cityType | "solid" | "outline" | "solid" | Render mode. "solid" fills buildings with glyph characters and neon colors. "outline" draws clean neon vector silhouettes of the skyline. |
variant | "downtown" | "megacity" | "district" | "ruins" | "downtown" | City layout variant for solid mode. downtown = tall dense towers; megacity = wall-to-wall packed high-rises; district = lower varied buildings; ruins = short crumbling structures. |
outlineVariant | "sparse" | "dense" | "layered" | "horizon" | "sparse" | City layout variant for outline mode. sparse = wide spaced tall towers; dense = tightly packed high-rises; layered = buildings with setbacks and terracing; horizon = wide low silhouette. |
colorPrimary | string | "#00ffff" | Primary neon color used for most building structures and ground line. |
colorSecondary | string | "#ff00ff" | Secondary neon color used for accent buildings, windows, and flying vehicles. |
colorTertiary | string | "#ffff00" | Tertiary color used for antennas, tower peak lights, and a third vehicle type. |
bgColor | string | "#000000" | Canvas background fill color. |
fontSize | number | 12 | Font size in px. Also controls column/row density — smaller values produce denser cities. |
speed | number | 80 | Milliseconds between each animation frame. Lower = faster animation. |
showVehicles | boolean | true | Render flying vehicles with motion trails across the skyline. |
blinkingLights | boolean | true | Enable blinking peak lights on antenna towers. |
opacity | number | 90 | Overall canvas opacity scaled to 100. |
charSet | "blocks" | "custom" | "blocks" | Character set used to fill buildings in solid mode. "blocks" uses Unicode block/box-drawing characters (default). "custom" uses the string supplied via customChars. |
customChars | string | undefined | Custom character pool used when charSet="custom". All characters in this string are cycled through to fill buildings, windows, and rooftops. |
className | string | undefined | Additional CSS class names forwarded to the wrapper div. |