Text effects, camera & lines
Reveals, typewriters, counters, camera moves, and drawn paths.
Titles that reveal themselves, a camera that travels, and lines that draw on. Like the helpers on the previous page, these are built on the frame, so scrubbing and exporting reproduce every moment.
Text effects
Text helpers
| API | Use it for |
|---|---|
TextReveal |
Lines of a string slide up from behind their own masks, one after another. Set lineHeight, from, stagger, and durationInFrames; align pivots each line. |
useTypewriter(text, options) |
The typed-so-far text, its length, done, and caretVisible: steady while typing, blinking while idle. |
useCountUp(to, options) |
A number counting to to, with from, delay, durationInFrames, easing, and decimals. |
<TextReveal x={160} y={300} lineHeight={200} stagger={6}
style={{ fontFamily: 'Archivo Black', fontSize: 210,
fill: { type: 'solid', color: '#ecefe8' } }}>
{'36 DAYS\nOF CELESTA'}
</TextReveal>For a quick monospaced caret, use length × advance as an estimate. For actual glyph positions, use useTextMetrics() in the desktop runtime; see Text & fonts.
Camera
<Camera> looks at a point of a larger world: lay the world out in its own coordinates, then animate x/y (the point shown at the center), zoom, and rotation. shake adds a smooth handheld drift of up to that many pixels.
<Camera x={interpolate(frame, [0, 120], [0, 4000], { extrapolateRight: 'clamp' })}
y={540} zoom={1.1} shake={4}>
<TimelineWorld />
</Camera>Lines and charts
<Line x1 y1 x2 y2> draws a segment and <Polyline points> connects several; both take stroke, strokeWidth, cap (round by default), and join. Animate a polyline’s progress from 0 to 1 to draw it on, and use pointOnPolyline(points, t) to put a marker on its tip.
For other shapes, <Path> takes points (with closed) or SVG-like commands (moveTo, lineTo, quadTo, cubicTo, close), a stroke and/or fill, and cap/join/miterLimit. Each is one layer however many segments it has, stays sharp when scaled, and paints a translucent stroke that crosses itself only once, so draw procedural line art as a few paths rather than many thin rects.
Circles, ellipses, and arrows
<Circle radius> and <Ellipse width height> are placed like a Rect: x/y put their box’s anchor (top-left by default), fill gradients start from the box’s top-left, and a stroke stays inside the box. <Arrow x1 y1 x2 y2> points its head’s tip at x2/y2; set strokeWidth, headLength, headWidth, and heads (end, start, or both). An arrow shorter than its heads shrinks them to fit, so it can grow from nothing, and one with no length draws nothing. A circle is drawn as a rounded Rect and the other two as paths; all three take gradients, transforms, and effects like any layer.
<Circle x={960} y={540} anchorX={0.5} anchorY={0.5} radius={80}
stroke="#FFD84D" strokeWidth={8} />
<Arrow x1={600} y1={300} x2={890} y2={480} strokeWidth={6} stroke="#FFD84D" />