affectUI › Illustrations › Product scenes

Project Flow

Animated scene of a client task branching into subtasks, notes and assigned roles.

Part of affectUI Pro. Install: npx shadcn@latest add https://www.affectui.com/r/project-flow.json · Import from @/components/ui/project-flow

When to use

A feature section that shows how tasks, clients and roles connect in your product
Landing pages where a short, self-playing scene explains a workflow better than text

When not to use

Interactive product UI – the scene is a decorative illustration, not working components
Very small spaces below ~320px wide, where the card text gets hard to read

Usage

import { ProjectFlow } from "@/components/ui/project-flow";

export function FeatureSection() {
  return (
    <section style={{ maxWidth: 960, margin: "0 auto" }}>
      <ProjectFlow />
    </section>
  );
}

Props

Name	Type	Default	Description
`theme`	`"light" \| "dark"`	`"light"`	Light or dark cards
`label`	`string`	`"A client task branching…"`	Accessible description of the scene
`className`	`string`		Extra class on the root, e.g. for width or margins

Accessibility

The scene is exposed as one image with a descriptive label; its inner elements are hidden from screen readers

Responsive

The background is transparent; set --ui-pf-fade to your page color so the soft edges blend in
Drawn on a 2312 × 1644 artboard and scaled to the width of its container, so the layout never reflows

Requirements

React 19