Divider
A divider is an animated line — horizontal or vertical, with one of six visual styles. Each style has its own motion and visual treatment.
Use sparingly. A divider is a feature accent, not a default separator.
When to use it
- Section break with a labelled marker (CHAPTER, OR, VS)
- Vertical accent between two pieces of inline content
- A deliberate visual moment between two areas of content
When not to use it
- Plain visual rule between content blocks — let the section's
- Decorative shape behind content — use Shape
- Inline text rules — use a Text block with
---markdown
background or padding do the work
Settings
Orientation — Horizontal · Vertical (default: Horizontal)
Sets the divider's axis. All styles work in either direction.
Style — 6 options (3-column button grid, default: Neon)
Pick the visual style. Some styles use the second colour (Aurora); others use only Color 1.
Color 1 — colour swatch (default: #00aaff)
Primary effect colour. Most styles use only this one.
Position — Left · Center · Right (default: Center)
Horizontal alignment within the parent. Only takes effect when Width is below 100%.
Color 2 — colour swatch (default: #00ffff, dimmed unless used)
Second colour. Active for the Aurora style; other styles ignore it.
Thickness — slider, 1–6px (default: 2)
Line thickness. Disabled for Neon — Neon's tube size is built into the style. Enabled for all other styles.
Width — slider, 10–100% (default: 100) (Horizontal only)
Length as a percentage of the parent.
Height — slider, 40–1000px (default: 200) (Vertical only)
Pixel length for vertical dividers. Vertical needs an absolute size because the parent container is usually auto-height.
Tilt 3D — slider, 0–30° (default: 0)
3D rotation around the line's axis. Subtle (5–10°) reads as slight perspective; high (20°+) becomes pronounced.
Fade Edges — checkbox (default: off)
When on, the divider fades in at the start and out at the end instead of being uniformly bright across its length.
Label — text input
Optional text that interleaves with the line (e.g. "OR", "CHAPTER", "VS"). Renders centered on the line; the line breaks to make space.
Entrance animation
Shared widget at the bottom — preset, duration, delay for scroll- into-view animation.
Per-device overrides
Most settings (Style, Width, Height, Thickness, Tilt, Position, Label) have separate Tablet and Mobile values.
Common overrides:
- Width — sometimes narrower on desktop (60%) and 100% on mobile
- Tilt 3D — usually 0 on mobile (less screen space)
Common patterns
Chapter break
Style Aurora · Color 1 + Color 2 set · Width 60% · Tilt 3D 8° · Fade Edges on · Label "CHAPTER".
"OR" divider between two CTAs
Width 30% · Position Center · Label "OR" · Thickness 2.
Vertical accent between inline elements
Orientation Vertical · Height 60 · Color 1 white. Place inside a Section with horizontal direction.
Subtle break
Width 100% · Thickness 1 · No label.