blockmotion

Feature rows (motion)

The feature rows, each appearing as you scroll to it.

This is the animated version of Feature rows. The static version looks the same with JavaScript turned off.

Preview

Installation

pnpmnpmyarnbun

pnpm dlx shadcn@latest add https://facadeui.dev/r/feature-rows-motion.json

This component needs feature-rows, motion-primitives. The CLI installs them for you.

Usage

This is the code for the preview above. To install it as a file, run npx shadcn@latest add @facade/feature-rows-motion-demo.

demos/feature-rows-motion.tsx

"use client"

/**
 * The `feature-rows` demo, with the motion variant swapped in.
 *
 * Identical props: the motion variant only changes which slot components
 * the static section renders through.
 *
 * `"use client"` is required here, not incidental: the motion variant is a
 * client component, and icon components cannot cross a server-to-client
 * boundary as props. See the note on `IconComponent`.
 */

import { FeatureRowsMotion } from "@registry/sections/feature-rows-motion"

import { ROWS } from "./content"

export function Demo() {
  return (
    <FeatureRowsMotion
      eyebrow="How it works"
      title="Install a piece, own the source"
      items={ROWS}
      align="center"
    />
  )
}

Source

These are the files the CLI copies into your project.

components/sections/feature-rows-motion.tsx

"use client"

/**
 * FeatureRowsMotion — alternating feature rows, each revealed as it scrolls in.
 *
 * Dependencies: react, @/components/motion/slots,
 * @/components/sections/feature-rows.
 */

import { StaggerList, StaggerListItem } from "@/components/motion/slots"
import { FeatureRows, type FeatureRowsProps } from "@/components/sections/feature-rows"

export type FeatureRowsMotionProps = Omit<FeatureRowsProps, "listAs" | "itemAs">

export function FeatureRowsMotion(props: FeatureRowsMotionProps) {
  return <FeatureRows {...props} listAs={StaggerList} itemAs={StaggerListItem} />
}

Props

FeatureRowsMotionProps

Extends Omit<FeatureRowsProps, "listAs" | "itemAs">.