Title

The Title is the display-text block — page titles, hero headlines, section names, animated logo lockups. Pick the semantic tag (h1–h6 / p / div), give it a weight and colour, and optionally turn on 3D depth, stroke, or one of 43 entrance animations.

When to use it

Page or section titles
Hero headlines (often with depth or stroke effects)
Eyebrow text above a title (set tag to DIV or P)
Animated logo lockups (set Content type to Image)
Decorative animated phrases

When not to use it

Body copy — use Text
Buttons — use Button

Settings

Content type — Text · Image (default: Text)

Switches between text-driven and image-driven content. Image mode swaps the text input for an Image picker + Width slider.

Image (Content type = Image)

Image — Select / Remove buttons. Picks from the media

library.

Width — slider, 40–800px (default: 280)
SVG colour swatches — when an SVG is selected, each

fill / stroke colour gets its own swatch.

Heading text (Content type = Text)

A single-line text input. Plus:

Weight — Light · Semi · Extra · Black (maps to weights

300 / 600 / 800 / 900). Defaults to 700 (between Semi and Extra). Disabled options grey out when the chosen font doesn't ship that weight.

Colour swatches — Fill, Gradient, Stroke, Stroke 2 (in

one row). Gradient activates when its swatch is non-empty. Stroke + Stroke 2 active only when Stroke effect is on.

Font — picker overriding the page's global font.

Tag — H1 · H2 · H3 · H4 · H5 · H6 · P · DIV (default: H2)

Semantic HTML tag. One H1 per page is the rule. Use P or DIV for non-semantic display text (eyebrows, decorative labels) so it doesn't compete with real headings for SEO.

Align — Left · Center · Right (default: Center)

Horizontal alignment.

Mode — button group: Flat · Outline · Depth · Outline+Depth (default: Flat)

Sets the text rendering mode:

Flat — plain fill (and gradient when the Gradient swatch is set).

Standard text mode.

Outline — renders each letter as a stroke using the Stroke swatch

colour. Combine with a transparent Fill for the hollow-letter look.

Depth — activates the 3D text engine: Z-axis extrusion, Y-axis

rotation, perspective, depth-of-field blur, and RGB split.

Outline+Depth — combines Outline stroke rendering with the Depth

engine.

Mode-specific sliders (stroke, depth, rotation, etc.) appear in the 3D / effects group below when Outline or Depth is active. When an Animation preset is active, the mode engine is bypassed — the preset's own renderer takes over.

Sliders — Layout group

Size — 16–200px (default: 48)
Gradient Angle — 0–180° (default: 135). Active when

Gradient swatch is set.

Letter Spacing — −5 to 30px (default: 0)
Gap Below (margin_bottom) — −200 to 200px (default: 0).

Negative pulls the next block up; positive pushes it down.

Halo — 0–100% (default: 0). Soft layered glow behind every

glyph; same engine as the Text block's Halo. Auto-picks colour from the fill: light text → dark halo, dark text → light halo. 30 = subtle; 70 = strong (use over 3D / video backgrounds).

Sliders — 3D / effects group

Active when 3D depth, Stroke, or RGB Split is on (the group only renders if any of those is in play).

Depth — −150 to 150px (default: 0). Extrudes letters along

the Z axis.

Rotation — −30 to 30° (default: 0). Y-axis rotation.
Perspective — 200–2000px (default: 800). Camera distance —

lower = dramatic depth, higher = flat / subtle.

Blur (dof_intensity) — 1–10 (default: 5). Camera-style

focus blur. Pairs with Depth.

RGB Split (chromatic_intensity) — 0–100% (default: 0).

Chromatic aberration. Standalone — works on flat fill without 3D depth.

Stroke Depth (layer_gap) — 0–200px (default: 0). Stacked

stroke layers. Active when Stroke is on.

Sensitivity (mouse_sens) — 1–50 (default: 5). Cursor

reactivity. Unified across modes: drives 3D engine when 3D is on, drives animator tilt when an Animation preset is on.

Orbit Speed — 0–50 (default: 5). Slow continuous rotation

for 3D mode.

Stroke Thickness — 1–10px (default: 1).
Stroke Spin — 0–10 (default: 0). Animates the stroke

gradient.

Animation

Animation preset — 38 effects (3-column grid, default: None)

Click a button to set; click again to deselect. Selecting a preset bypasses the mode engine — the preset's own renderer takes over.

Build — Columns · Glitch · Decode · Slots · Streaks · Dissolve · Emerge · Layers · Converge

Mask — Iris · Fields · Roll

Geometry — Cells · Pinch · Mosaic · Mercury · Radial

Focus — Focus · Tilt · Elastic · Outline

3D — Depth · Zoom Out · Flip X · Spin · Swing · Unfold · Curtain · Bounce · Rain · Rows · Explode · Crystal · Orbital · Panels · Unfurl · Light Field

Texture — Neon

Duration — slider, 0.2–5s (default: 1.2)

Delay — slider, 0–5s (default: 0)

Ring Arc — slider, −180 to 180° (default: 0)

Curves the content along an arc. Active when an animation preset is set OR the content type is Image.

Per-device overrides

Almost every setting (size, weight, colour, alignment, gap below, 3D values, animation duration, ring arc) has separate Tablet and Mobile values.

Common overrides:

Size — much smaller on mobile (72 desktop → 32 mobile)
Sensitivity — 0 on mobile (no cursor)

Common patterns

Hollow-letter

Tag h1 · transparent Fill (#0000) · grey Stroke (e.g. #999, Thickness 1–2) · Bevel on · Sensitivity 14.

Depth hero

Tag h1 · solid white Fill · weight Black · 3D depth on · Depth 60 · Rotation 8° · Sensitivity 20 · Blur 3.

Eyebrow + headline

Two stacked Title blocks. Eyebrow: tag DIV · Size 11 · weight Semi · colour #999 · Letter Spacing 1.5. Headline: tag h1 · Size 48–72.

Looped ambient phrase

Content type Text · Preset Streaks · Duration 2s · Loop on · Set inside a Section with dark background.

Animated logo lockup

Content type Image · pick the logo SVG · Preset Light Field · Duration 2s · Sensitivity 8.

blocks/text — for body copy
blocks/button — for click targets
blocks/section — wrapper; Section has its own Animation tab

with layered background animation

concepts/responsive-overrides — every Title setting plus

the headline text itself can be tailored per device

Per-device heading text

Since 2.0 the heading text in line_1 is per-device. Switch to the Tablet or Mobile device tab and edit the heading input — the new copy is saved as line_1_tablet / line_1_mobile. Empty override = inherit Desktop. Use this when the desktop headline is too long for small viewports.

The font size, weight, gradient, depth, and animation settings all have their own per-device variants too, independently of the text. See concepts/responsive-overrides for the full system.