Trending Society

Margin Note | UI components | Trending Society

More from @keyframeui, 56 components

All @keyframeui

Agent Session component
@keyframeui
A coding agent at work in its terminal, beside the app it's changing. The prompt types itself, each command runs with a live timer and lands its output in one burst, and every line that writes a file shows up in the app a beat later, ringed. Point at a change on either side and its other half lights up.
1 registry dep · 3 packages
Arc Scroll component
@keyframeui
Cards that travel along a semicircle as you scroll, entering at the bottom right and leaving at the bottom left.
1 registry dep · 3 packages
Autopilot component
@keyframeui
A cursor that uses your product on its own. It glides to buttons and presses them, types and drags across real markup on a script you write, and steps aside the moment a visitor wants to try it.
1 registry dep · 3 packages
Black Box component
@keyframeui
A glossy black box that shows its work. Each face is one part of your product, and they open in turn: the panel lifts off its socket, light leaks out round it, and a hairline draws out to a label saying what that part did. Point at a face, tap it or tab to it to open it yourself. In dark mode the box turns to glass, a wireframe with a small lit core that turns inside.
1 registry dep · 3 packages
Blueprint component
@keyframeui
A finished layout that builds itself. It starts as a wireframe measured from your real markup, then fills in block by block: text streams in, photos come into focus, buttons pop up. Scrub back and it comes apart again.
1 registry dep · 3 packages
Checkpoint component
@keyframeui
A request that has to clear your rules before it runs. A token drops out from under the request and drives down a lane, past one barrier per rule: each one swings open downward, the way the token is going, as its rule passes and the row ticks. A rule that needs sign-off keeps its barrier down and turns its row into Approve and Deny; a rule the request breaks stays shut, and the token knocks against it twice and is turned away. Every outcome rolls into a short log underneath.
1 registry dep · 2 packages
Circuit component
@keyframeui
Right-angle circuit traces between the cards you already have, with signals that travel through them. Mark any element with `data-circuit`, describe the graph in one string, and the traces route themselves: edge to edge side by side, top to bottom when the layout stacks, around anything in the way.
1 registry dep · 2 packages
Counter Curtain component
@keyframeui
A curtain that covers the page while it loads, counting from 0 to 100 with the fonts and hero images, then lifts as the headline rises out of its masks underneath, on one clock.
1 registry dep · 2 packages
Diff Apply component
@keyframeui
A code change that applies itself in place. Removed lines strike through and close up, new lines open in tinted, and the line numbers below roll to their new values. Each change then waits for Keep or Undo, and Undo plays it backwards.
1 registry dep · 3 packages
Domain Switch component
@keyframeui
A toggle that expands its new state as a domain across the page. A sphere grows from the switch, everything inside it changes theme or mode, and its edge is a thin seam of stars where the two worlds meet.
1 registry dep · 3 packages
Dot Rail component
@keyframeui
A strip of LED dots that shows where you are. A run of lit dots jumps under the tab or link you point at, counts up under an autoplaying tab like a timer, sits at how far you've read, or loops while something loads. The dots it leaves glow for a moment and fade, like an LED sign, so a quick move draws a short comet tail.
1 registry dep · 3 packages
Echo Reel component
@keyframeui
A giant word printed solid, with the words before and after it in the list stacked above and below as pale halftone proofs. Every few seconds the reel turns one row: the proof below rises into the middle while one roller pass moves the ink off the old word and onto the new one. Click a proof or press ↑ ↓ to turn it yourself, so it works as a headline that cycles who it's for or as a picker for plans.
1 registry dep · 2 packages

Margin Note

Install

Live preview

Registry dependencies1

Packages3

Margin Note

Install

Live preview

Registry dependencies1

Packages3

Source

More from @keyframeui, 56 components

The Signal

Install

Live preview

Registry dependencies1

Packages3

Install

Live preview

Registry dependencies1

Packages3

Source

More from @keyframeui56, 56 components

More from @keyframeui, 56 components