Dev Design LibraryAnimated Dev Tool Components
Dev Design Library indexes 65 Animated dev tool components from 26 open-source UI libraries, with the most coming from Notra, Kinetics, UI Lab, Spectrum UI and Kokonut UI. Each one links to its page with the source code, a live preview where available, the library license and the install command. These are the dev tool components tagged as animated: motion on hover, on scroll or on load, usually built with CSS transitions or Framer Motion.
Code SlotsReact Bits · ReactOne-time-code input where a hidden overlay input owns focus, paste and SMS autofill while each slot lands its digit on…
Code ComparisonMagic UI · ReactA component which compares two code snippets.
Code BlockCult UI · ReactA beautiful code block component with tabs, copy functionality, and smooth animations
Dark terminalReUI · ReactANSI-style colored terminal output built from plain lines.
AI Response Stream & Code BlockAmicro Micro Transitions · ReactTerminal-like AI code stream card featuring branch revision navigation, instant copy with tactile haptics, and…
TerminalAI Elements · ReactDisplay streaming console output with full ANSI color support.
AI Code RunKokonut UI · ReactThe assistant runs a short Python script in the reply. A marker steps down the lines, the output prints, and the chart…
File DiffbeUI · ReactExplains additions and removals around highlighted code.
Code BlockRare UI · ReactA clean code block that builds its entire theme from a single accent color. Pass code and a hex, it does the rest.
Diff ViewSpectrum UI · ReactProposed file changes with per-file accept and reject.
Dashboard Shell 01Shadcn Space · ReactA modern dashboard shell with a sidebar and header, ideal for admin dashboards to organize and navigate through…
Text Editor ItalicPixel Perfect · ReactSoft cream "Text Editor" mock with a neumorphic toolbar. The cursor drifts
Heartbeat MonitorKinetics · HTML/CSSGlowing dot traces an EKG along the path
TerminalAnimations (Svelte) · SvelteA terminal-like UI component with typing animations, sequence control, and intersection observer support.
Dashboard ShellObsidianUI · React
Claude CodeNotra · ReactA Claude Code terminal session with the compact header, tool calls, a running turn and the prompt, built from the…
Revision TimelineGreatUI · React
Clipboard FieldNexvyn UI · ReactA one-click install/copy field that morphs between the command and a success label using CSS grid fr tracks. JS only…
TerminalWatermelon UI · React
Code blockArc Library · ReactPresent code with legible hierarchy and copy access.
Code BlockUI Lab · ReactSwitch files with a sliding underline and copy with one click.
Developer tool heroVelora UI · ReactMinimal hero on a retro grid with a typed headline accent, an install terminal and two CTAs.
Morphing Pill Duration EditorCue Foundations · React
Glass TerminalOpaline · ReactA macOS terminal on glass whose commands type themselves out, line by line, when scrolled into view.
AI Edit ReviewReactFrame · ReactAn AI text editor that rewrites a selected passage, streams a word-level diff review with accept/reject actions, and…
TerminalAceternity UI · React
Faulty TerminalReact Bits · ReactTerminal CRT scanline squares effect with flicker + noise.
TerminalMagic UI · ReactA terminal component
Terminal AnimationCult UI · ReactComposable terminal animation primitives with typed command playback, tabbed scenarios, and customizable output…
ANSI terminal outputReUI · ReactAgent stdout with SGR colour codes parsed by ansiToLines, retintable via --code-ansi-* variables.
Mac TerminalAmicro Micro Transitions · ReactMac Terminal loading animation.
AI Diff ReviewKokonut UI · ReactA coding agent's edits streaming in file by file, then reviewed per file with accept, reject and undo.
Inline EditSpectrum UI · ReactA selection-anchored AI edit: suggestion toolbar, word diff, accept or reject.
Lidar SweepKinetics · HTML/CSSA scan plane lights a point field into a depth map
Claude Code PromptNotra · ReactThe input between two rules with the permission mode, PR link and effort below.
Scrambled Install CommandGreatUI · React
JSON viewerArc Library · ReactA collapsible JSON tree with search, paging for long arrays, and copy value or path.
Code MorphUI Lab · ReactGlides every surviving token to its new spot as a tutorial moves to the next step.
TerminalVelora UI · ReactA terminal window that types its lines in view.
Code BlockReactFrame · ReactA syntax-highlighted code block with line numbers, per-line highlighting, a filename/language header, a copy button…
Terminal outputReUI · ReactUnhighlighted command output with a wrap toggle.
AI State LoadingKokonut UI · ReactAgent progress as a list of steps with a live log, elapsed time and a summary when done.
Service Status FooterSpectrum UI · ReactThirty days of per-service uptime bars with a rolling incident ticker.
Packet TraceKinetics · HTML/CSSData pulses choose a route through a tiny network
Claude Code TerminalNotra · ReactThe terminal window with traffic lights and a title bar for Claude Code sessions.
Terminal LoaderGreatUI · React
Easing EditorUI Lab · ReactDrag a cubic-bezier into shape and see it move.
TerminalReactFrame · ReactA macOS-style terminal window that types out a scripted sequence of commands, outputs and comments, with a blinking…
CLI install summaryReUI · ReactWhat a shadcn add run resolved, installed and wrote, including a file it kept because it already existed.
AI Tool CallsKokonut UI · ReactTool calls inside a chat reply. Each call streams in as one row with a live timer, then they fold into a single line…
Waiting for EventsSpectrum UI · ReactA live endpoint waiting for its first delivery, with a test event that lands.
Reconciliation MergeKinetics · HTML/CSSCompeting values converge into one authoritative state
CodexNotra · ReactA full recreation of an OpenAI Codex CLI session built from the Codex components on shadcn Base UI.
Spring PlaygroundUI Lab · ReactTune a spring and watch its overshoot and settle, plotted live.
Signal BarsKinetics · HTML/CSSBars light up in sequence while connecting
Codex ComposerNotra · ReactThe prompt band with a block cursor, the model and directory status line and shortcut hints.
Stagger VisualizerUI Lab · ReactShows what per-item delay actually does to a list entrance.
Signal BrailleKinetics · HTML/CSSA tactile dot matrix encodes live system phases
Codex TerminalNotra · ReactThe Codex window: a title bar, a scrolling transcript and a pinned footer for the prompt.
Uptime BarUI Lab · ReactPoint at any day and the row's own caption tells you what happened.
State DiffKinetics · HTML/CSSThe old value yields as the new state commits
OpenCodeNotra · ReactA recreation of an OpenCode terminal session with a transcript, the prompt and the sidebar.
Trace FlameKinetics · HTML/CSSA request paints as stacked spans filling left to right
OpenCode ComposerNotra · ReactThe prompt panel with agent, model, provider and effort, over a status row with the busy scanner, context and shortcuts.
OpenCode WindowNotra · ReactThe OpenCode terminal surface that sets the background, monospace font and line grid.