Animated Workflow Grid

Backgrounds

About

Motion-aware decorative workflow grid background that automatically respects reduced-motion and small-screen preferences.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Animated Workflow Grid to your project and fits it to your theme.

Code

How Animated Workflow Grid is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import AnimatedWorkflowGrid from "@/components/ui/animated-workflow-grid";

export default function AnimatedWorkflowGridDemo() {
  return (
    <main className="relative grid min-h-screen place-items-center overflow-hidden bg-background p-6 text-foreground">
      <AnimatedWorkflowGrid />
      <section className="relative z-10 max-w-xl space-y-4 rounded-2xl border border-border bg-card/80 p-8 shadow-xl backdrop-blur">
        <p className="text-sm font-medium text-primary">Workflow background</p>
        <h1 className="text-3xl font-bold">A calm motion layer for a digital process</h1>
        <p className="text-muted-foreground">The animation turns itself off on small screens and for reduced-motion preferences.</p>
      </section>
    </main>
  );
}