Blur Fade

Content that sharpens and slides into place when it first appears or when it scrolls into view. It is visible to start with, so it never hides content from anyone.

Motionv0.1.0experimentalWCAG 2.2 AAView spec

Optional, and kept apart.

Nothing here is included in a project unless you add it, and the plain component it builds on is unchanged. This effect is decoration: it is hidden from screen readers, stands still for visitors who prefer reduced motion, and can be paused. Use Still on a preview to see that version.

Accessible by default
Copy it, own it
Upgrades that keep your edits

import { BlurFade } from "@rdloom/react";

// Stagger a short list by giving each item a little more delay.
export default function BlurFadeBasicExample() {
  const items = ["Accessible by default", "Copy it, own it", "Upgrades that keep your edits"];
  return (
    <ul className="flex flex-col gap-2 text-lg">
      {items.map((item, i) => (
        <li key={item}>
          <BlurFade delay={i * 0.12} whenInView={false}>
            {item}
          </BlurFade>
        </li>
      ))}
    </ul>
  );
}

Installation

CLI

Manual

npm

pnpm

yarn

bun

npx rdloom add blur-fade

Copies the source into src/components/rdloom. Edit it freely: rdloom upgrade merges later versions into your changes.

Use another registry client

npx shadcn@latest add https://rdloom.vimalbhatt.com/r/blur-fade.json

Works, but without upgrade tracking.

Usage

import { BlurFade } from "@rdloom/react";

<ul className="flex flex-col gap-2 text-lg">
  {items.map((item, i) => (
    <li key={item}>
      <BlurFade delay={i * 0.12} whenInView={false}>
        {item}
      </BlurFade>
    </li>
  ))}
</ul>

In view

Card 1

Card 2

Card 3

Card 4

Card 5

Card 6

import { BlurFade } from "@rdloom/react";

// Scroll the box: each card reveals as it comes into view.
export default function BlurFadeInViewExample() {
  return (
    <div className="h-56 w-72 overflow-y-auto rounded-lg border border-[var(--rd-color-border-default)] p-3">
      <div className="flex flex-col gap-3 pb-24">
        {Array.from({ length: 6 }, (_, i) => (
          <BlurFade key={i}>
            <div className="rounded-lg border border-[var(--rd-color-border-default)] bg-[var(--rd-color-surface-subtle)] p-4 text-sm">
              Card {i + 1}
            </div>
          </BlurFade>
        ))}
      </div>
    </div>
  );
}

API Reference

Defined by the spec. Components also accept the props of the React Aria component they wrap.

Prop	Type	Default
`children`required The content to reveal.	`node`	none
`delay` Seconds to wait before revealing. Stagger a list by giving each item a longer delay.	`number`	`0`
`duration` Seconds the reveal takes.	`number`	`0.5`
`offset` How far, in pixels, it starts below its place.	`number`	`8`
`blur` How blurred it starts, in pixels.	`number`	`6`
`whenInView` Wait until it scrolls into view. Otherwise it reveals as soon as it mounts.	`boolean`	`true`

Accessibility

Role none, WCAG 2.2 AA. Tested with axe and keyboard tests; screen reader checks are in the audit checklist.

Keyboard

Not interactive.

Screen readers announce

Silent: the content is read in place as normal

What your code must do

Decoration only: the animated layers are hidden from assistive technology and never take focus
Stands still for visitors who ask for less motion (prefers-reduced-motion), and the effect can also be shown still with the rdm-still class
Visible in the server-rendered page and without JavaScript; it is only hidden, before the first paint, once the browser can reveal it again
With reduced motion it is never hidden: it simply appears
The content is in the page and readable by assistive technology the whole time (opacity is not display:none)
Does not flash: nothing changes more than three times in a second (WCAG 2.3.1)
Optional: it is a separate component, so projects that do not add it carry none of its code

Guidelines

Use it when

Landing page sections, feature lists and cards that arrive as you scroll
Staggering the entrance of a short list

Avoid it when

Content people need immediately, such as error messages or the main task of a page
Long lists: delays add up

Don't

Delays over about half a second per item
Wrapping the whole page, so nothing is readable until it finishes