Fade Animations

Smooth fade transition components with optional sticky positioning, powered by Framer Motion.

FadeDown

Animates children with a downward fade-in motion.

import { FadeDown } from "@prismlinkapp/ui/animations/fade";
 
<FadeDown variant="h1" sticky stickyOffset={20}>
  Fade Down Animation
</FadeDown>;

Prop	Type	Default	Description
children	`ReactNode`	Required	Child elements to be rendered
className	`string`	`""`	Additional CSS classes to apply
variant	`'p'` \| `'h1'` \| `'h2'` \| `'h3'` \| `'h4'` \| `'h5'` \| `'h6'` \| `'div'` \| `'span'`	`'div'`	HTML element type to render
sticky	`boolean`	`false`	Enable sticky positioning
stickyOffset	`number`	`0`	Offset from top in pixels when sticky is enabled

Animates children with an upward fade-in motion.

import { FadeUp } from "@prismlinkapp/ui/animations/fade";
 
<FadeUp variant="h1" sticky stickyOffset={20}>
  Fade Up Animation
</FadeUp>;

Prop	Type	Default	Description
children	`ReactNode`	Required	Child elements to be rendered
className	`string`	`""`	Additional CSS classes to apply
variant	`'p'` \| `'h1'` \| `'h2'` \| `'h3'` \| `'h4'` \| `'h5'` \| `'h6'` \| `'div'` \| `'span'`	`'div'`	HTML element type to render
sticky	`boolean`	`false`	Enable sticky positioning
stickyOffset	`number`	`0`	Offset from bottom in pixels when sticky is enabled