Wavy Block

Wavy Block animates its children in waves pattern on scroll.

Open in 21st dev

Flexible

Animated

Customizable

Optimized

Lightweight

Responsive

UI Blocks

Installation

Usage

<WavyBlock className="flex flex-col justify-start items-start gap-6">
  {titles.map((title, index) => (
    <WavyBlockItem key={title} index={index}>
      <h2 className=" text-[8.3vw] font-bold leading-none tracking-tighter uppercase whitespace-nowrap">
        {title}
      </h2>
    </WavyBlockItem>
  ))}
</WavyBlock>

Props

WavyBlockItem

Prop	Type	Default
`index`	`number`	-
`config?`	`object`	-

Animated Menu new

Animated Menu component with orchestrated children animation, fully customizable.

Bento Grid

Bento Grid, container with multiple variants and displays, five cells by default, four cells, and three cells.