Motion UI / Sections2 sections

Page transitions

A curated set of curtain styles built on Motion's view transitions.

Sections

Hero sections
Pricing sections
Testimonials
Bento grids
Stats sections
Navigation
CTA sections
Footers
Page transitions
FAQ sections
Overlays
Buttons
Lists
Loaders

Components

<Accordion>
<AddToBasket>
<ArrowLink>
<BorderBeam>
<CardStack>
<CarouselControls>
<CommandPalette>
<Confetti>
<CopyButton>
<Coverflow>
<ExpandCard>
<HoldToConfirm>
<MagneticPull>
<MaskWipe>
<MultiStateButton>
<Overlay>
<PageCurtain>
<ParallaxLayers>
<ProgressBar>
<ScrambleReveal>
<ScreenshotScrollReveal>
<ScrollSpotlight>
<ScrollZoomReveal>
<SegmentedToggle>
<Sheet>
<ShrinkHeader>
<Skeleton>
<SmoothTabs>
<Sparkline>
<SplitReveal>
<StaggerReveal>
<SwipeActions>
<TerminalSession>
<TiltCard>
<ToastStack>

Page transitions: Curtains

An example of a curated page-transition demo swapping between fade, wipe, doors and iris curtain effects in Motion for React.

npx shadcn@latest add @motion/page-curtains

Components usedPageCurtain

MotionScoreA

Page transitions: Mask wipe

A directional page transition that uses AnimateView and an animated mask image to wipe the incoming view into place without a crossfade. React 19 canary only.

npx shadcn@latest add @motion/page-mask-transitions

Components usedMaskWipe

MotionScoreC

Motion UIIncluded in Motion+
Lifetime updates

Motion UI in Motion+

Unlock all 26 Motion UI sections

Install all 26 sections and 35 components with shadcn, copy the editable source, and paste tailored adaptation prompts directly into your agent. One payment includes lifetime updates.

Sections: 26
Components: 35
Updates: Lifetime

Get Motion+Get Motion+How install works

+Explore

More categories

Browse the rest of the Motion UI section library.

Live previewHero sections4 sectionsParallax layers, editorial text staggers, scroll-driven zooms and dev-tool terminals.

Live previewPricing sections3 sectionsMonthly to yearly price morphs, usage calculators and comparison tables with an animated FAQ.

Live previewTestimonials2 sectionsLogo tickers, coverflow carousels and draggable testimonial card stacks.

Live previewBento grids2 sectionsStaggered bento reveals, App Store card expands and scroll-linked spotlights.

Live previewStats sections2 sectionsScroll-in counters and live engagement panels with animated trends and drawn graphs.

Live previewNavigation2 sectionsMega menus, scroll-aware shrinking headers and command palettes.

Live previewCTA sections2 sectionsSignup celebrations, copy-to-clipboard install blocks and magnetic banners.

Live previewFooters1 sectionNewsletter forms with live feedback and staggered mega-footer reveals.

Live previewFAQ sections1 sectionStandalone FAQ accordions with smooth expand, staggered reveals and height morphs.

Live previewOverlays1 sectionSheet modals and stacking toasts with springy entrances and gesture dismissal.

Live previewButtons2 sectionsMulti-state feedback buttons, hold-to-confirm actions and add-to-basket morphs.

Live previewLists1 sectionSwipeable rows and stacked notification feeds with layout-animated add and remove.

Live previewLoaders1 sectionSkeleton shimmers and loading states that hand off smoothly to real content.