Blocks

Process Card Reveal

A process section that auto-cycles stacked cards with a filling timeline.

A ready-made process block. Numbered steps sit on a timeline whose connector fills before the next card slides and blurs into place — image one way, copy the other. Hover pauses the loop; clicking a step jumps there. Driven by GSAP.

New tab

Connect apps

Link your favorite tools in seconds and start building workflows without any setup complexity.

One-Click Integrations

Connect popular apps instantly — no technical setup required.

Secure Connections

Your data stays protected with enterprise-grade security.

Building an automation flow on a dashboard

Build flows

Combine your connected apps into clear, repeatable automation in a few simple steps.

Drag And Drop Builder

Arrange triggers and actions visually with zero coding effort.

Reusable Templates

Start from prebuilt flows and customize them in minutes.

Test and optimize

Validate every step, monitor results, and improve your workflow performance over time.

Live Status Tracking

See exactly how each run performs and catch issues instantly.

Smart Insights

Use actionable analytics to refine every stage of your flow.

Team collaborating as they scale automation

Scale with confidence

Launch automation across your team while keeping speed, reliability, and security under control.

Team Collaboration

Share workflows and permissions with clear ownership.

Enterprise Ready

Keep every process compliant and secure as you grow.

Installation

pnpm dlx shadcn@latest add @tween-ui/process-card-reveal

Usage

app/page.tsx

import ProcessCardReveal from '@/components/tweenui/process/process-card-reveal';
 
export default function Page() {
  return <ProcessCardReveal />;
}

Pass your own steps to make it yours. Each step can include an optional overlay image; without one, a frosted caption uses the step title:

app/page.tsx

import ProcessCardReveal from '@/components/tweenui/process/process-card-reveal';
 
const steps = [
  {
    id: 'discover',
    title: 'Discover',
    description: 'Map the workflow and pick the trigger that starts every run.',
    image: '/photos/discover.jpg',
    imageAlt: 'Whiteboard session',
    details: [
      { title: 'Kickoff workshop', description: 'Align on the outcome in one sitting.' },
      { title: 'Trigger catalog', description: 'Choose from the apps you already use.' },
    ],
  },
  {
    id: 'launch',
    title: 'Launch',
    description: 'Ship the flow, watch the first runs, and share it with the team.',
    image: '/photos/launch.jpg',
    imageAlt: 'Team launching a workflow',
    details: [
      { title: 'Live monitoring', description: 'Catch failed runs the moment they happen.' },
      { title: 'Shared ownership', description: 'Invite teammates with clear permissions.' },
    ],
  },
];
 
export default function Page() {
  return <ProcessCardReveal steps={steps} />;
}

Props

Prop	Type	Default	Description
`steps`	`ProcessStep[]`	4-step sample	Cards shown in the stacked reveal.

Each ProcessStep is { id, title, description, image, imageAlt, overlay?, overlayAlt?, details }. details is { title, description }[]. Extends native <section> attributes (className, style, …).

Accessibility

Timeline steps are real buttons with an aria-label, aria-current="step" on the active one, and a visible focus ring, so the sequence is fully keyboard operable. Hover pauses autoplay. Under prefers-reduced-motion: reduce the loop does not run and clicking a step snaps the card and timeline with no slide or blur.