Dev Design LibraryAnimated Animation Primitive Components
Dev Design Library indexes 22 Animated animation primitive components from 5 open-source UI libraries, with the most coming from Kinetics, Amicro Micro Transitions, OpenSourceUI, UI Lab and Cojeev 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 animation primitive components tagged as animated: motion on hover, on scroll or on load, usually built with CSS transitions or Framer Motion. Animation primitive components belong to the Utilities group.
Fade DownAmicro Micro Transitions · ReactFade with downward translation.
Focus Breath WidgetOpenSourceUI · React
Circuit BreakerKinetics · HTML/CSSA physical arm throws closed, open, then half-open to probe
Spring PlaygroundUI Lab · ReactTune a spring and watch its overshoot and settle, plotted live.
PresenceCojeev UI · ReactMotionPresence keeps keyed children mounted for their exits. MotionSurface adds coordinated lifecycle states to an…
Fade InAmicro Micro Transitions · ReactBasic fade entrance animation.
Confidence SettleKinetics · HTML/CSSA score overshoots, then settles on the true value
Fade UpAmicro Micro Transitions · ReactFade with upward translation.
Float BobKinetics · HTML/CSSA card hovers and bobs with a shadow that breathes beneath — pure CSS
Scale InAmicro Micro Transitions · ReactScale transition from small to actual size.
Hover Intent GateKinetics · HTML/CSSA deliberate hover quietly unlocks the action
Scroll RevealAmicro Micro Transitions · ReactReveal content block as it scrolls into viewport.
Hover LiftKinetics · HTML/CSSSurface rises with a soft cast shadow
Slide LeftAmicro Micro Transitions · ReactSlide in from right to left.
Optimistic RollbackKinetics · HTML/CSSAn instant local update gracefully retracts after rejection
Slide RightAmicro Micro Transitions · ReactSlide in from left to right.
Phase LockKinetics · HTML/CSSThree independent signals resolve into sync
Sticky RevealAmicro Micro Transitions · ReactApple-style scroll-linked side sticky content reveal.
Rate Limit CooldownKinetics · HTML/CSSA token bucket empties fast, then refills on a slow drip
Zoom InAmicro Micro Transitions · ReactScale transition combined with deep blur/depth effect.
Reconciliation MergeKinetics · HTML/CSSCompeting values converge into one authoritative state
Stale While RevalidateKinetics · HTML/CSSThe old value ghosts as the fresh one springs into place