Noise Transition
NewPremiumPage transition with Perlin noise dissolve effect. Canvas-based with configurable speed and color.
transitionsnoisedissolvecanvas
Installation
Terminalbash
npx motioncraft add noise-transitionUsage
noise-transition.tsxtsx
import { NoiseTransition } from "@/components/transitions/noise-transition";
const [transitioning, setTransitioning] = useState(false);
<NoiseTransition isActive={transitioning} onComplete={() => router.push("/next")}>
<div>Current page content</div>
</NoiseTransition>Props
| Prop | Type | Default | Description |
|---|---|---|---|
| isActive* | boolean | — | Trigger the transition |
| duration | number | 1.2 | Total transition duration |
| color | string | hsl(var(--primary)) | Transition color |
| onComplete | () => void | — | Callback when transition completes |
| children | ReactNode | — | Content behind transition |
Related Components
Page Transition
Smooth page transition wrapper with configurable enter/exit animations.
Preloader
Full-screen preloader with progress indicator and exit animation.
Text Distortion
NewCanvas-based text that warps and distorts on hover with horizontal slice displacement.
Ink Bleed Button
NewClick triggers organic watercolor-like ink bleeding from the click point. Canvas-based fluid simulation with sub-drop spawning.