Page Transition

Smooth page transition wrapper with configurable enter/exit animations.

transitionspageanimated

Installation

Terminalbash
npx motioncraft add page-transition

Usage

page-transition.tsxtsx
import { PageTransition } from "@/components/transitions/page-transition";

<PageTransition>
  <div>Page content</div>
</PageTransition>

Props

PropTypeDefaultDescription
children*ReactNode—Page content
classNamestring—Additional CSS classes

Related Components

Noise Transition

New

Page transition with Perlin noise dissolve effect. Canvas-based with configurable speed and color.

Preloader

Full-screen preloader with progress indicator and exit animation.

Aurora Background

Animated aurora borealis gradient background with configurable colors and speed.

Meteors

Falling meteor animation with randomized paths and fading trails.