Fades in text with blur effect and vertical translate animation. Supports CSS-only mode and scroll-triggered JS enhancement.

Preview/Playground

Created by

Vipin

Welcome to my site

Scroll-triggered animation

Astro

import FadeInText from "@astroanimate/core/FadeInText";

<FadeInText>
  <h1>Welcome to my site</h1>
</FadeInText>

<FadeInText
  enhance=true
  duration=0.8
  yOffset=30
>
  <p>Scroll-triggered animation</p>
</FadeInText>

Basic fade-in with blur on page load & Scroll-triggered fade-in when element enters viewport.

Installation

bash

npm install @astroanimate/core

Props

Prop	Type	Default	Description
`enhance`	`boolean`	`false`	Enable JS-powered scroll-triggered animation via IntersectionObserver
`duration`	`number`	`0.6`	Animation duration in seconds
`delay`	`number`	`0`	Delay before animation starts in seconds
`easing`	`string`	`cubic-bezier(0.4, 0, 0.2, 1)`	CSS easing/timing function
`blur`	`string`	`"6px"`	Initial blur amount (must include CSS unit)
`yOffset`	`number`	`20`	Vertical distance (px) element travels upward during animation
`once`	`boolean`	`true`	Play animation only once (enhance=true only)
`inViewMargin`	`string`	`"-50px"`	IntersectionObserver bottom rootMargin (enhance=true only)
`class`	`string`	`""`	CSS class name applied to root element
`as`	`string`	`"div"`	HTML element rendered as root wrapper
`...rest`	`unknown`	`-`	Additional HTML attributes (id, aria-label, role, etc.)