remocn logoremocn

UI Blocks

Pre-assembled interface elements — code editors, layouts, charts, and workflow visualizations.

Larger blocks built from primitives — the actual surfaces your viewers will recognize: code windows, terminals, charts, dashboards, and workflow diagrams.

Code & CLI

GlassCodeBlock

Premium frosted-glass code window with rim light and traffic-light controls.

TerminalSimulator

CLI build simulation with chunked log output and step-function scrolling.

CodeAccordion

Long code blocks collapse mid-section, hiding noise behind a count badge.

CodeDiffWipe

Before/after comparison with a clip-path slider revealing the new code.

Layouts

StaggeredBentoGrid

Bento grid where cards cascade in with per-cell sequences.

DynamicSplitScreen

Two-column split where one panel shrinks and the other expands into view.

Data & System

AnimatedLineChart

SVG line chart drawn left-to-right via stroke-dashoffset.

AnimatedBarChart

Bars spring up from the baseline with deterministic stagger.

DataFlowPipes

Glowing data packets fly along SVG pipes with trailing tails.

Workflows

ProgressSteps

Multi-step pipeline visualization with line fill and pulsing dots.

DragAndDropFlow

Cursor drags a file into a drop zone that lights up and starts a progress bar.

Edit on GitHub

Spotlight Card

A card with a moonlight-cool radial spotlight that follows a synthetic cursor and lights up its microborder.

Glass Code Block

A premium frosted-glass code editor window with a regex tokenizer and line-by-line stagger reveal.