raea/text

Two kinds of text live here. <RichText> and <Text3D> put text into a 3D scene, each glyph a lit entity that the same named moves as 2D can animate glyph by glyph. word(), findPhrase and useWords anchor time to speech: the frame a phrase is said, from the transcript raea cut writes, wherever the cut puts it.

import { Sequence } from "raea";
import { word } from "raea/text";

function Callout() {
  const at = word("forty countries");
  return (
    <Sequence from={at} durationInFrames={60}>
      <h1 style={{ fontSize: 96, color: "#fff" }}>40 countries</h1>
    </Sequence>
  );
}

See Cutting by words.

import { findPhrase, loadFont, RichText, Span } from "raea/text"

raea/text exports 3 components, 1 hook, 3 functions, 6 types. Bevy's counterpart: bevy_text. Source: sdk/raea/src/text.ts.

#Components

#RichText

Text in the 3D world: every glyph a real lit, shaded entity (bevy_rich_text3d's mesh over its glyph atlas, a StandardMaterial of its own), laid out as one line of shaped text (kerning, spans of other fonts and sizes) and then moved, turned, scaled, recoloured, faded and revealed glyph by glyph with the motion code 2D uses: the named moves staggered (enter="rise" each={2}), a typewriter's reveal, or a glyph function of the frame.

Hello world <RichText glyph={(g) => ({ position: [0, Math.sin(frame / 6 + g.index) * 0.05, 0] })}>WAVE

Takes RichTextProps's props.

#Span

A run of a 's text in its own font, weight, size or colour. Only inside a .

Takes SpanProps's props.

#Text3D

Solid 3D letters (Manifold's text3d), as a Mesh's geometry: <Mesh><Text3D size={0.6}>SALE</Text3D>...</Mesh>.

Takes Text3DProps's props.

#Hooks

#useWords

Every word heard on the timeline, in the frames of the nearest enclosing Sequence.

function useWords(): TimelineWord[]

#Functions

#findPhrase

Finds the composition frame where phrase is said in a transcript.

function findPhrase(words: readonly HeardWord[], phrase: string, options?: WordOptions): number

#loadFont

The page gets Google Fonts' family ("Inter", "Space Grotesk"); fontFamily is the name to style text with.

function loadFont(family: string): { fontFamily: string; }

#word

The composition frame where phrase is said. Call it while rendering (it reads the Clock).

function word(phrase: string, options?: WordOptions): number

#Types

#GlyphInfo

What a glyph is, for a 's glyph function.

#GlyphStyle

A glyph's motion this frame, about its own centre, in the block's space: added to (position, rotation), multiplied into (scale, opacity) or replacing (color, visible) what the block's moves give it.

#RichTextProps

#SpanProps

#Text3DProps

#WordOptions