Trending Society

Mark Grid | UI components | Trending Society

More from @snapcn, 143 components

All @snapcn

Agent Chat component
@snapcn
AI agent chat animation: prompt typing, send and a streaming reply. An agent conversation, from the empty field to the answer. Five beats on one clock: the prompt types itself into a compose field while the camera pushes in, the field scrolls under a soft left edge as the text outgrows it, the message goes and becomes a bubble, an avatar and a typing indicator arrive, and the reply streams back a word at a time — each word grey for a moment before it sets. Only the typing rate is a real decision; every later beat is derived from it.
1 registry dep · 2 packages
Agent Compose component
@snapcn
AI chat input animation: a composer builds itself, types a prompt and sends it. An agent's composer building itself around one chip, then sending a request. A Video chip types in alone and close up — its clapperboard drawing out of the hinge, each letter sliding in and fading up — then a shadcn field, the + and a snapcn menu fade in around it as the camera pulls back. The placeholder types, the mic and send button arrive, a centred heading types above the field and grows from its middle, the placeholder gives way to the request at about a character a frame, the send glyph turns from a waveform to an arrow, and the button flashes blue and darkens back under a soft glow. Replayed from a 60fps screen recording measured frame by frame against its own render: the camera, every typing clock, each fade and the send's colour are fitted tables, and Inter was chosen by fitting fifteen open faces against the recording.
1 registry dep · 2 packages
Agent Open component
@snapcn
AI prompt intro animation: kinetic text that becomes a typed prompt. A line assembles a word at a time, resolves to your product's name, and becomes a prompt somebody types. Each new word's letters arrive at their own heights and fall into the baseline together; the name cuts in hard under a colour ramp that sweeps across it; then a caret types the wrong thing, deletes it, and types the right thing, with the last words landing inside a highlight that sweeps off to the right and hands them back at full size. Four acts in 4.8 seconds. Every beat is a prop.
1 registry dep · 2 packages
Agent Result component
@snapcn
AI agent answer animation: a prompt typed, tool calls run, and a reply with a table. An agent asked for something, and what it hands back. A request types itself into a dark composer under a wave that trails the caret — each character lands in a washed accent and walks to ink on a Gaussian of its age — while the camera eases the field into place and pans left as the line outgrows it. The field's focus ring flares as the message goes, the camera lifts, and a hard cut lands on the run: two tool calls, each square arriving in the accent and blanching to white, a rail between them, and the transcript scrolling to follow its own last line as the answer builds underneath — a summary, a serif line, a source chip, and a one-row table with a tag, a detail and a link, over a toolbar. Replayed from a 60fps screen recording measured frame by frame: the typing clock, the wave, both cameras, the focus ring and every row's fade are tables and fitted curves, and the fonts were chosen by rendering thirty candidates each against the recording.
2 packages
Agent Run component
@snapcn
AI agent run animation: a prompt sent and answered with visible tool steps. A prompt typed, sent, and answered by an agent that shows its work. A composer opens, a request types itself into it under a colour wave that rides the caret — the last dozen characters run accent into ink behind it — and a round button appears when there is something to send. The shot cuts in close on that button: one frame, 1.9×, with no intermediate value anywhere in the recording, because a zoom onto a button the viewer has watched for four seconds says nothing. A pointer climbs to it and stops dead for three frames before it presses, the field floods, and a second cut hands the frame to the run — a dotted rail with one step lit at a time, each arriving from below, typing two lines about what it is doing, and passing the frame on at a measured 31.4 frames. The composer's scale came off the card's own sub-pixel width, whose edge is five levels of luminance and needs a derivative rather than a threshold; the step cadence off the frames each title's accent burst begins. The field's wash and bloom were fitted to sixteen samples across the frame.
1 registry dep · 2 packages
Agent Steps component
@snapcn
AI agent steps animation: a streaming task log with spinner and checkmarks for agent demos. An agent narrating its own work: the prompt lands in a pill, and under it a log writes itself one line at a time — each step running with a faint spinning globe, then flipping to past tense behind a check while the whole column steps up a row so the live line always sits on the centre. When the work is done the column swells and clears, and the last line slides to the middle and becomes the answer. Every proportion and every curve is fitted from frame measurements.
1 registry dep · 2 packages
Agent Tools component
@snapcn
AI agent tools animation for agent and MCP product demos. The moment somebody hands an agent their tools. A spark writes a line word by word, each new word arriving in the accent and setting to ink behind it; the line is whipped away on three frames of horizontal blur and the next one is written back the other way, the spark walking left and laying words down behind it. A composer fades up underneath, a pointer arrives and presses into the field, the prompt types itself, the attach menu drops from the plus, the connectors submenu opens beside it, and the connectors switch on one at a time before the pointer leaves for send. The reply is deliberately not here — @snapcn/agent-chat already streams one and this hands off to it.
1 registry dep · 2 packages
Announce Title component
@snapcn
Launch title animation, product announcement intro with kinetic typography. A four-shot launch title: the eyebrow rushes past the camera on a receding type plane and lands on a colour field, the name assembles word by word on paper, and a macro pan across the tagline cuts wide as the line builds itself last word first while a white sweep drains it out of colour. Content, palette and the mark that leads the closing line are all props.
1 registry dep · 2 packages
Answer Highlight component
@snapcn
AI answer highlight animation, ChatGPT-style chat response with a text selection. A question in a pill, an answer that writes itself a word at a time, and then the beat the whole shot is for: a caret lands mid-sentence and a selection band drags across one statement, wrapping the line the way a real one does — and settles onto the single word that matters. Name the sentence and the word as strings; the run is found in the answer for you, punctuation and all.
1 registry dep · 2 packages
Answer Stream component
@snapcn
Streaming AI response animation, from the send button to the answer typing in. The beat after send: a macro shot on the button that cuts — hard, on its fastest frame — to the answer building itself on the page, while the camera pulls back 1.364× about a focal point above the frame to keep up with it. Every word arrives hot and cools to the foreground.
2 registry deps · 2 packages
App Reveal component
@snapcn
App reveal animation: a wordmark folds into an app UI with a 3D camera move. A wordmark that folds into an app, and a camera that flies around it. The mark holds the frame alone, shrinks into the header of a card that builds around it, then the camera dives past the card, rolls, and backs off into a settled front-on framing — while the greeting types, the suggestion chips land one at a time and the input bar arrives. The camera is keyed off the reference's own measurements: its distance from the card's apparent width frame by frame, its roll from a straight-line fit to the card's top edge. Every surface the card paints comes from the design system.
1 registry dep · 2 packages
Block Wordmark component
@snapcn
Logo sting and wordmark animation: blocks build into your brand name. A wordmark builds out of solid blocks — a square scales in, a coloured deck fans out around it and winds back, the stack collapses and stretches into one block per letter, then each block flashes a colour and swaps for its real letterform.
1 registry dep · 2 packages

Mark Grid

Install

Live preview

Registry dependencies1

Packages2

Mark Grid

Install

Live preview

Registry dependencies1

Packages2

Source

More from @snapcn, 143 components

The Signal

Install

Live preview

Registry dependencies1

Packages2

Install

Live preview

Registry dependencies1

Packages2

Source

More from @snapcn143, 143 components

More from @snapcn, 143 components