Tween UITween UI
7

Blocks

Process Sticky Steps

A process section with sticky heading and numbers that track the card in view.

A ready-made process block. The heading, divider, and step numbers stay sticky inside the block while the cards scroll in that frame — the page behind it does not move. Clicking a number jumps to that card. No GSAP — just Intersection Observer.

New tab

Create stunning voiceover in 4 simple steps

Notebook and pen for drafting a script

Write or paste script

Quickly draft your message or drop in your ready-to-go text to get started instantly. Whether you're crafting a new idea, refining existing

Studio microphone for choosing a voice

Choose your voice style

Select from natural human-like voices, accents, and tones that fit your content. Browse through our extensive library of professional voices, each designed to match

Mixing console for customizing delivery

Customize the delivery

Adjust speed, pitch, pauses, and emotions for a perfect performance. Fine-tune every aspect of your voiceover to create the exact tone and pacing you need for your project.

Laptop ready to generate and download audio

Generate & download

Get studio-quality audio in seconds and download instantly. Your professional voiceover is ready to use in any format, whether you're creating content for videos, podcasts, or presentations.

Installation

pnpm dlx shadcn@latest add @tween-ui/process-sticky-steps

Usage

app/page.tsx
app/page.tsx
import ProcessStickySteps from '@/components/tweenui/process/process-sticky-steps';
 
export default function Page() {
  return <ProcessStickySteps />;
}

Pass your own heading and steps to make it yours. Each step can include an optional overlay image:

app/page.tsx
app/page.tsx
import ProcessStickySteps from '@/components/tweenui/process/process-sticky-steps';
 
const steps = [
  {
    id: 'write',
    title: 'Write or paste script',
    description: 'Draft your message or drop in ready-to-go text.',
    image: '/photos/script.jpg',
    imageAlt: 'Writing a script',
    overlay: '/photos/script-overlay.png',
    overlayAlt: 'Script editor',
    overlayPosition: 'right',
  },
  {
    id: 'generate',
    title: 'Generate and download',
    description: 'Get studio-quality audio in seconds.',
    image: '/photos/download.jpg',
    imageAlt: 'Downloading audio',
  },
];
 
export default function Page() {
  return (
    <ProcessStickySteps
      title={
        <>
          Create stunning voiceover in{' '}
          <span className="text-[#045f64] dark:text-[#c6f56f]">2 simple steps</span>
        </>
      }
      steps={steps}
    />
  );
}

Props

PropTypeDefaultDescription
titleReactNode4-step sampleSticky heading shown beside the cards.
stepsProcessStickyStep[]4-step sampleCards shown in the scroll column.

Each ProcessStickyStep is { id, title, description, image, imageAlt, overlay?, overlayAlt?, overlayPosition? }. overlayPosition is 'right' | 'center'. Extends native <section> attributes (className, style, …).

Accessibility

Step numbers 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. Scroll happens inside the block. Under prefers-reduced-motion: reduce number color still updates and clicking a step jumps instantly with no smooth scroll.