pleate.uiEffects
Interactive

Animated List

A scrolling list whose rows pop in as they scroll into view, with soft fades at both ends. Pick a row with a click or the keyboard.
import { AnimatedList } from "pleate/effects/animated-list";

Recent files

  • Q3 report.pdf
  • Invoice 2041.pdf
  • Team offsite.key
  • Logo final v4.svg
  • Roadmap.numbers
  • Interview notes.md
  • Hero shot.heic
  • Budget 2027.xlsx
  • Contract draft.docx
  • Release notes.md
  • Moodboard.fig
  • Pitch deck.key

Pick a file with the arrow keys and Enter, or click one.

Props

items

Rows.

T[]

renderItem

Row content.

(item, index, selected) => ReactNodedefault String(item)

onSelect

Called on click or Enter.

(item, index) => void

fades

Fade the top and bottom edges.

booleandefault true

height

Scroll area height in px.

numberdefault 360

label

Accessible name.

stringdefault "Items"

Accessibility

  • A listbox: arrow keys, Home and End move the highlight and keep it in view, Enter picks.
  • Reduced motion skips the entrance.