Dev Design LibraryAnimated Utility Components
Dev Design Library indexes 37 Animated utility components from 13 open-source UI libraries, with the most coming from Kinetics, Amicro Micro Transitions, UI Lab, Cojeev UI and Chakra 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 utility components tagged as animated: motion on hover, on scroll or on load, usually built with CSS transitions or Framer Motion.
PresenceChakra UI · ReactUsed to animate the entry and exit of an element while controlled the render behavior
Fade DownAmicro Micro Transitions · ReactFade with downward translation.
Pull To RefreshbeUI · ReactNative-feeling pull-to-refresh container with drag resistance, threshold feedback and async refresh handling.
Text Glitch PortalPixel Perfect · ReactRGB split plus scale blur then collapse into clean text.
Focus Breath WidgetOpenSourceUI · React
Circuit BreakerKinetics · HTML/CSSA physical arm throws closed, open, then half-open to probe
Smooth ScrollObsidianUI · React
Morph SurfaceSona UI · ReactAn unstyled layout primitive that grows, shrinks, clips, and updates the content of one persistent consumer-styled…
Color SwatchesUI Lab · ReactThe ring glides to the color you pick and the color floods the preview from that side.
Motion AdjusterCojeev UI · ReactProvides live controls for the shared motion settings and editable body profiles used across the library.
SmoothSpaceUI · ReactAudio-reactive fluid WebGL orb. Swap ambient, microphone, or file input, change the texture, and toggle grain.
Expandable Book Search PaletteCue Foundations · React
Image CropperReactFrame · ReactAn image cropper with a draggable, resizable crop box, aspect presets or a circle mask for avatars, keyboard nudging…
Skip NavChakra UI · ReactSkip Nav Link allows keyboard users to skip to the main content of the page.
Fade InAmicro Micro Transitions · ReactBasic fade entrance animation.
Confidence SettleKinetics · HTML/CSSA score overshoots, then settles on the true value
Drag SelectUI Lab · ReactDraw a box across files to select them, like the desktop.
AppearanceCojeev UI · ReactChoose from six coordinated palettes and adjust reading contrast across the application.
Pixel Perfect Command PaletteCue Foundations · React
Fade UpAmicro Micro Transitions · ReactFade with upward translation.
Float BobKinetics · HTML/CSSA card hovers and bobs with a shadow that breathes beneath — pure CSS
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…
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
Swatch PickerKinetics · HTML/CSSSelected colour springs up with a check