Displaying text

Every action here places some flavor of text on screen. The text set covers everyday typography — titles, headings, body copy, captions, and fine print. The fancytext set covers decorative, marketing-style effects — glows, gradients, shimmer, typewriter animation, and more. Reach for text for the bulk of your app’s content, and fancytext when you want a specific piece of text to stand out.

The typography hierarchy

The text set gives you five levels, from largest to smallest:

Action	Renders as	Alignment	Use for
`.title`	h2	flush-left	The primary heading of a page or screen
`.heading` (alias `.h`)	h2	centered	A section heading within a page
`.subtitle`	h3	flush-left	Supporting text under a title — bylines, taglines, dates
`.subheading` (alias `.sh`)	h3	centered	A secondary title under a `.heading`
`.text`	p	flush-left	Body copy and paragraphs
`.caption`	small	flush-left	Labels and small supporting text
`.fineprint`	small (smallest)	flush-left	Disclaimers and legal notices

.title and .heading sit at the same level but differ in alignment — pick .title for a flush-left layout (like a blog post or article) and .heading for a centered one (like a landing-page section). The same is true of .subtitle versus .subheading.

.title "How We Built Rhappsody"
.subtitle "A story about simplicity, speed, and giving tools to everyone"
.caption "By the Rhappsody Team — 5 min read"

.text "When we started building Rhappsody, we had one question: what if anyone could build a web app?"

.fineprint "Opinions expressed are those of the team and do not constitute technical advice."

A centered variant of the same structure:

.heading "Our Services"
.subheading "Web Development"
.text "We build fast, reliable web apps for teams of any size."

All seven actions accept either a literal string or a variable:

.text "Rhappsody makes it easy to build and publish your own apps."

$bio = "A short bio about the app."
.text $bio

Sizes

Every text action supports four sizes, written as a prefix before the action:

.small.title "Small Title"
.medium.title "Medium Title"
.large.title "Large Title"
.extra.title "Extra Title"

Leaving off a size prefix uses the default (.medium). Sizes work on any of the seven actions:

.large.text "Large body text for emphasis."

Modifiers

Built-in style modifiers

On top of the tags above, every text action also accepts the compiler’s built-in style modifiers: -bold, -light, -italic, -underline, -smallcaps, -center, -right.

.text "Centered text" -center
.text "Bold emphasis" -bold

Colors

Append a #color tag to set the text color:

.text "Primary accent text" #primary
.text "Something went wrong" #red

Variables and interpolation

Pass a whole variable as the content, or interpolate one inside a string literal with {$var}:

$date = "2026-08-22"
.text -muted "Last updated on {$date}."

You can also reach into an item’s fields directly:

$item = {bio: "Building apps should be for everyone."}
.text $item.bio

Decorative text — the fancytext set

fancytext trades everyday typography for effects: neon glow, animated gradients, shimmer, a typewriter animation, hollow outlines, and handwritten scripts. Use it sparingly — for hero headlines, callouts, and other moments that should stand out, not for body copy.

Action	Effect
`.callout`	Bold, centered marketing text (1–4 words)
`.tagline`	Huge, ultra-bold hero headline, scales to viewport width
`.glow-text`	Neon glow — best on dark backgrounds
`.gradient-text`	Static gradient color fill
`.shimmer-text`	Animated multi-color shimmer sweep
`.outline-text`	Hollow, outlined letterforms
`.typewriter`	Character-by-character typing animation with a blinking cursor
`.signature`	Handwritten signature-style script font
`.handwriting`	Casual handwritten/cursive font
`.teaser-text`	Content preview that fades out at a set length

Like the text set, every fancytext action accepts a literal string or a variable, a .small/.large/etc. size prefix, and most accept #color tags. A few also have their own named style variants:

// Basic callout, then with a color and a larger size
.callout "BUY NOW"
.callout "SALE TODAY" #red
.large.callout "GO BIG"

// Glow-text: preset color variants, or an arbitrary #color
.glow-text "NEON"
.pink.glow-text "NEON"
.glow-text "CUSTOM" #red
.large.green.glow-text "OPEN"

// Gradient-text: presets, or 2–3 custom colors
.gradient-text "HELLO"
.sunset.gradient-text "SUNSET"
.gradient-text "CUSTOM" #red #blue
.large.rainbow.gradient-text "RAINBOW"

// Outline-text: stroke-weight variants
.outline-text "HOLLOW"
.thin.outline-text "DELICATE"
.thick.outline-text "BOLD"
.double.outline-text "DOUBLE"

// Typewriter: speed variants
.typewriter "Hello World"
.fast.typewriter "Hello World"
.slow.typewriter "Hello World"

// Signature and handwriting: font-style variants
.signature "Jane Doe"
.elegant.signature "Jane Doe"
.handwriting "Quick brown fox"
.casual.handwriting "Dear diary"

// Tagline, sized up
.tagline "Build Something Amazing"
.extra.tagline "GO"

.teaser-text also takes an optional number for how many characters to show before it fades, and supports a goto modifier to send the reader somewhere on click:

$preview = "This is a preview of content that fades out gradually at the bottom."
.teaser-text $preview
.teaser-text "Short preview" 100

.teaser-text "Preview content here...": goto [full-article]

Common mistakes

Mistake	Fix
Reaching for `.text` for a section title	Use `.title`/`.heading` (or `.subtitle`/`.subheading`) so heading structure is preserved
Mixing up `.title` and `.heading`	Same level, different alignment — `.title` is flush-left, `.heading` is centered
Overusing `fancytext` for body copy	Fancytext effects are for a handful of standout moments — use `text` for anything read at length
Forgetting the size prefix comes before the action	`.large.text "..."`, not `.text.large "..."`
Assuming every `fancytext` action supports the same style variants	Each one has its own set (e.g. `.thin`/`.thick`/`.double` are `.outline-text`-only, `.fast`/`.slow` are `.typewriter`-only) — check the action before assuming a variant applies