Components
Pointers, captions, counters, device frames and 22 more, built from framefields layers.framefields add copies a component's source into your project, so you can read it and change anything. Open one to change its props and watch it rebuild live.
npx framefields add mouse-pointer focus-zoom
AnnotateMarks that draw on to point at something: underline, circle, box, highlight, strike, cross, bracket, arrow or squiggle, clean or hand-drawn with a boil, with an optional label.
AppFrameWindow chrome around any content — desktop window, browser with a typed URL, terminal, or bare frame — and the coordinate system for pointing into it.
BackdropThe surface behind a scene: a drifting mesh gradient, a grid or a dot field, with vignette and film grain, looping exactly.
BeforeAfterTwo versions of one picture split by a moving divider with a grip and labels: a clip with and without an effect, a redesign, a cleanup.
CalloutA label with a leader line pinned to a point, node, text or a moving tracked object; picks the open side and stays inside the frame.
CaptionsWord-timed captions from words or a transcript (SRT, WebVTT, word JSON) in eight published styles, highlighting each word on its exact frame, optionally tucked behind the speaker.
CardStackCards in a depth stack that shuffle: the front card flies, drops, zooms or flips away and returns to the back; cards are dealt onto the pile; or the stack fans out into a hand.
ChatThreadA messaging conversation: bubbles that spring in from either side, typing dots before replies, names, avatars, timestamps, reactions, images and auto-scroll.
CodeBlockCode that reads like an editor and moves like an explanation: syntax colours, typing, a focus band that walks the lines, and diffs where kept lines glide to their new places.
ConfettiCelebration bursts of paper, ribbons and sparkles on the GPU that arc up, flutter down and can settle on a floor; bursts can follow cues.
CounterA number that counts to its value on odometer reels (or stepping digits), with format-aware separators, affixes and multi-step values.
DeviceFrameA phone, tablet or laptop around a screen; content is authored in device points and `at(x, y)` maps them for pointers and touches.
FocusZoomA camera over 2D content that pushes in on each burst of pointer clicks (or on given shots) and eases back out, clamped to the content.
LogoRevealThe end-card lockup: a mark and a wordmark arriving as one move, drawn on, popped or wiped, with a glint across the name; names can be extruded in 3D.
LowerThirdThe name-and-role bar of interviews and talks: measured plates in the safe area that slide in and leave on their own.
MeterProgress and scores as a ring, arc gauge, bar, lit segments or star rating, filling on the same timeline as its counter.
MousePointerAn animated pointer that travels between targets, clicks, drags and changes shape, reporting every click as a cue.
SelectionA text selection or a marquee driven by a MousePointer drag: it follows the pointer glyph by glyph, and lights up covered items.
SpotlightDims the frame except a region that glides between targets, as a crisp rounded rect or a soft pool of light.
TerminalA scripted shell session: commands typed with a human rhythm, streaming output, spinners that resolve to check marks, progress bars and scrolling, with a cue for every keystroke.
TextRevealHeadlines and body copy that animate in and out by character, word or line: rise, blur, track, mask, slam, scatter, scramble, type, stream, wipe and flip, each ending on exactly the static text.
TitleCardKicker, headline, rule and sub-line in designed layouts (center, left, stack, split), the headline in any reveal style, on one timeline.
ToastsNotifications arriving into a corner stack that pushes older ones away and compresses as it grows; each slides out when dismissed.
TouchPointFingers on glass: taps, double taps, long presses and swipes as soft discs with ripples, for mobile demos in a DeviceFrame.
WaveformAn audiogram: bars, mirrored bars, dots or a ring that move with a track's spectrum, analysed offline and bound as signals.
WordCycleOne slot in a line cycles through words: rolled, faded, slid or retyped, while the slot resizes to each word and the line glides to fit.
No component matches. Try a use, like "chart" or "phone".
Rendered with framefields 2.6.2. Each demo is also on its page as code you can copy.