Hello, tweenly

Tweak the controls and watch it replay.

Controls

direction

distancepx

durations

delays

ease

scale

blurpx

Fade In

Scroll-triggered reveal with direction, distance, easing, scale and blur.

Open in v0

$ pnpm dlx shadcn@latest add @tweenly/fade-in

import { FadeIn } from "@/components/fade-in"

export function Demo() {
  return (
    <FadeIn distance={40}>
      <div className="rounded-2xl border p-8">Hello, tweenly</div>
    </FadeIn>
  )
}

Updates live as you change the controls. Only non-default props are included.