FadeIn Component

The FadeIn component is a lightweight animation wrapper that adds smooth fade and slide-in effects to any content as it enters the viewport.

It is built on top of Motion for React and provides configurable timing, easing, viewport behavior, and animation offsets.

Perfect for adding subtle motion throughout Pulse AI without repeating animation logic.

Import

import FadeIn from "@/components/ui/animations/fade-in";

Basic Usage

Wrap any content inside the component.

<FadeIn>
  <h2>Build Faster With AI</h2>
</FadeIn>

The content will:

Start invisible
Move upward from a slight offset
Fade into view when scrolled into the viewport

Example

<FadeIn>
  <section>
    <h2>Powerful Automation</h2>
    <p>Automate repetitive workflows and save hours every week.</p>
  </section>
</FadeIn>

Props API

| Prop        | Type                 | Default     | Description                                          |
| ----------- | -------------------- | ----------- | ---------------------------------------------------- |
| `as`        | `FadeInElement`      | `"div"`     | HTML element rendered by the component               |
| `id`        | `string`             | Optional    | HTML id attribute for anchor navigation              |
| `children`  | `ReactNode`          | Required    | Content to animate                                   |
| `className` | `string`             | `""`        | Additional CSS classes                               |
| `duration`  | `number`             | `0.7`       | Animation duration in seconds                        |
| `delay`     | `number`             | `0`         | Delay before animation starts                        |
| `ease`      | `Transition["ease"]` | `"easeOut"` | Motion easing function                               |
| `once`      | `boolean`            | `true`      | Whether animation should play only once              |
| `amount`    | `number`             | `0.25`      | Percentage visible before animation triggers         |
| `y`         | `number`             | `60`        | Initial vertical offset in pixels                    |
| `y`         | `number`             | `0`         | Initial horizontal offset in pixels                    |

Props Explained

`as`

The as prop controls which HTML element FadeIn renders while preserving all animation behavior. This helps maintain proper semantic HTML without adding unnecessary wrapper elements.

Default

<FadeIn>
  Content
</FadeIn>

Renders:

<div>
  Content
</div>

Render as a Section

<FadeIn as="section">
  <FeaturesSection />
</FadeIn>

Render as a Heading

<FadeIn as="h1" className="text-5xl font-semibold">
  Build Faster With AI
</FadeIn>

Particularly useful for hero headings and page titles.

Render as a Paragraph

<FadeIn as="p" delay={0.2}>
  Automate workflows and scale your business.
</FadeIn>

Render as an Article

<FadeIn as="article">
  <BlogCard />
</FadeIn>

Useful for blog posts, news articles, and content cards.

Supported Elements

"div" | "section" | "article" | "header" | "footer" |
"main" | "aside" | "nav" | "span" |
"h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "p"

Landing Page Example

<FadeIn as="h1" delay={0.1} className="text-6xl font-bold">
  Scale Faster With AI
</FadeIn>
 
<FadeIn as="p" delay={0.2} className="mt-6 text-lg">
  Automate operations and improve productivity.
</FadeIn>
 
<FadeIn as="section" delay={0.4}>
  <PricingSection />
</FadeIn>

Why use as?

Using semantic HTML improves accessibility, SEO, document structure, screen reader support, and code readability. Instead of wrapping an element in an extra div:

// ❌ Adds an unnecessary wrapper
<FadeIn>
  <h1>Heading</h1>
</FadeIn>
 
// ✅ Renders the animated element directly
<FadeIn as="h1">
  Heading
</FadeIn>

`className`

Apply custom Tailwind CSS classes or additional styling directly to the animated wrapper.

<FadeIn className="max-w-4xl mx-auto py-20">
  <section>
    <h2>Build Faster With AI</h2>
  </section>
</FadeIn>

Card styling example

<FadeIn className="rounded-3xl border bg-background p-8 shadow-lg">
  <FeatureCard />
</FadeIn>

Combining layout and animation

A common pattern is using className to control layout while FadeIn handles animation:

<FadeIn className="container mx-auto px-4 md:px-6">
  <PricingSection />
</FadeIn>

Notes:

Accepts any valid Tailwind CSS classes
Supports responsive utilities and custom CSS classes
Applied directly to the animated wrapper element
Useful for spacing, layout, width constraints, backgrounds, and borders

`duration`

Controls how long the animation takes (in seconds).

<FadeIn duration={1}>
  <FeatureCard />
</FadeIn>

A higher value produces a slower, more noticeable entrance effect.

`delay`

Delays the animation start. Useful for creating staggered layouts.

<FadeIn delay={0.2}>
  <Card />
</FadeIn>

`ease`

Controls the animation curve.

Presets

ease="easeOut"
ease="easeIn"
ease="easeInOut"

Custom Bezier curve

<FadeIn duration={0.8} ease={[0.16, 1, 0.3, 1]}>
  <HeroContent />
</FadeIn>

`once`

Determines whether the animation replays on re-entry.

// Animate only the first time (default)
<FadeIn once>
  <Section />
</FadeIn>
 
// Replay whenever the element re-enters the viewport
<FadeIn once={false}>
  <Section />
</FadeIn>

`amount`

Controls how much of the element must be visible before the animation triggers. Accepts a value between 0 and 1.

<FadeIn amount={0.1}>  // Triggers almost immediately
<FadeIn amount={0.5}>  // Triggers when roughly half is visible
<FadeIn amount={1}>    // Triggers when fully visible

`y`

Controls the initial vertical offset in pixels.

<FadeIn y={30}>   // Subtle slide
 
<FadeIn y={100}>  // More dramatic entrance

`x`

Controls the initial horizontal offset (in pixels) before the component animates into view.

Increase the value to create a stronger slide-in effect.

{/* Slides in from the right */}
<FadeIn x={50}>
  <Image src="/hero.png" alt="Hero" />
</FadeIn>
 
{/* Slides in from the left */}
<FadeIn x={-50}>
  <div>Content slides from left</div>
</FadeIn>

Fade In with Both Vertical (y) and Horizontal Slides (x)

<FadeIn y={30} x={40}>
  <div>Slides from bottom-right</div>
</FadeIn>

Usage Examples

Staggered Cards

Create a cascading animation effect by incrementing delay values across items.

<div className="grid gap-6 md:grid-cols-3">
  <FadeIn delay={0}>
    <FeatureCard />
  </FadeIn>
 
  <FadeIn delay={0.1}>
    <FeatureCard />
  </FadeIn>
 
  <FadeIn delay={0.2}>
    <FeatureCard />
  </FadeIn>
</div>

Hero Section

<FadeIn y={80}>
  <HeroHeading />
</FadeIn>
 
<FadeIn delay={0.15} y={80}>
  <HeroSubtitle />
</FadeIn>
 
<FadeIn delay={0.3} y={80}>
  <HeroButtons />
</FadeIn>

Testimonials

<FadeIn amount={0.4} duration={0.8}>
  <Testimonials />
</FadeIn>

The animation won't trigger until a larger portion of the section becomes visible.

Common Use Cases

FadeIn is commonly used for: hero content, feature sections, pricing cards, testimonials, FAQ sections, dashboard previews, statistics blocks, marketing content sections, and call-to-action sections.

How It Works

The component uses Motion's viewport animations.

Initial state

{ opacity: 0, y: 60 }

Animated state

{ opacity: 1, y: 0 }

When the element enters the viewport:

Opacity transitions from 0 to 1
Vertical offset transitions from y to 0
Transition settings determine timing and easing

Best Practices

Use small delays for staggered content
Keep duration between 0.5 and 1.0
Use once={true} for marketing pages
Use larger y values for hero sections
Use smaller y values for cards and UI elements
Keep animations subtle and purposeful

Recommended Defaults

For most sections, the default props provide smooth, performant animations:

<FadeIn
  duration={0.7}
  ease="easeOut"
  amount={0.25}
>
  <Content />
</FadeIn>

Summary

FadeIn is the standard scroll-reveal animation component used throughout Pulse AI. It provides fade-in animations, slide-up transitions, viewport-based triggering, configurable timing, and reusable motion patterns — keeping page components clean and maintainable.