Dev Design LibraryOpen the library

Reveal Wrapper Components

Dev Design Library indexes 38 reveal wrapper components from 19 open-source UI libraries, with the most coming from Amicro Micro Transitions, UI Lab, React Bits, Spectrum UI and Kinetics. Each one links to its page with the source code, a live preview where available, the library license and the install command. Reveal wrapper components belong to the Effects group.

Animated ContentReact Bits · ReactWrapper that animates any children on scroll or mount with configurable direction, distance, duration, easing and…
Blur FadeMagic UI · ReactBlur fade in and out animation. Used to smoothly fade in and out content.
Fade DownAmicro Micro Transitions · ReactFade with downward translation.
Scroll RevealbeUI · ReactReveals its children with a spring slide and blur as they enter the viewport, once or every time. Reduced-motion keeps…
Grid RevealRare UI · ReactA loading state for AI images that turns into the real picture when it arrives.
Disclose ImageSpectrum UI · ReactAn image reveal component with animated sliding door panels.
Scroll Dissolve RevealVengeance UI · ReactA beautiful image dissolve effect driven by scrolling using React Three Fiber and Shaders.
Clip WipeKinetics · HTML/CSSOverlay unmasks left-to-right with clip-path
Blur FadeAnimations (Svelte) · SvelteA component that animates content with blur and fade effects, supporting directional movement and intersection…
Blur Scroll RevealGreatUI · React
In-view titleArc Library · ReactBring a section title in as it scrolls into view.
Gift WrapUI Lab · ReactFolds kraft paper over the cart item, ties a ribbon and bow, and asks who it's for.
Float layerCojeev UI · ReactAn entrance, scroll depth and gentle idle movement for a real component or a group of elements.
Scroll 01FLX UI · ReactSticky media that changes as you scroll through text content.
Blur FadeVelora UI · ReactThe workhorse entrance — blur, fade and drift into view.
Motion EffectSpaceUI · React
Stacked Deck Scroll RevealCue Foundations · React
Tearable RevealReactFrame · ReactA physically-simulated cloth intro reveal, drag to tear open a torn-paper layer covering an image, with breakable…
Canvas Reveal EffectAceternity UI · React
Fade ContentReact Bits · ReactSimple directional fade / slide entrance / exit wrapper with threshold-based activation.
Fade InAmicro Micro Transitions · ReactBasic fade entrance animation.
Chromatic Text RevealbeUI · React
Holographic Scan RevealSpectrum UI · Reactcomponent for the Holographic Scan Reveal
Stagger EntranceKinetics · HTML/CSSList items rise in sequence on scroll into view
Scroll RevealUI Lab · ReactWords light up one by one as you scroll through them.
Scroll ExpandCojeev UI · ReactA framed composition opens as native scroll or controlled progress advances.
Svg Mask EffectAceternity UI · React
Scroll ExpandReact Bits · ReactA rounded media frame that grows to full bleed as it scrolls through the viewport.
Fade UpAmicro Micro Transitions · ReactFade with upward translation.
Spoiler TextUI Lab · ReactHides a spoiler under shimmering grain that blows away from your click.
Scale InAmicro Micro Transitions · ReactScale transition from small to actual size.
Zipper RevealUI Lab · ReactUnzip the pouch to reveal the code inside.
Scroll Canvas UnrollAmicro Micro Transitions · ReactDual-sided wooden scroll unrolling outward to display center message.
Scroll RevealAmicro Micro Transitions · ReactReveal content block as it scrolls into viewport.
Slide LeftAmicro Micro Transitions · ReactSlide in from right to left.
Slide RightAmicro Micro Transitions · ReactSlide in from left to right.
Sticky RevealAmicro Micro Transitions · ReactApple-style scroll-linked side sticky content reveal.
Zoom InAmicro Micro Transitions · ReactScale transition combined with deep blur/depth effect.

Libraries with reveal wrapper components

Related categories