About Component
Process Steps Pro is an animated process-steps section for Framer. Numbered steps expand accordion-style with a live connector rail that lights up as you progress, ghost-reveal titles, and a two-column eyebrow + heading header. Fully responsive with built-in SEO markup and accessible keyboard navigation — perfect for agencies, SaaS products, consultancies and service-based businesses that need to explain a process clearly.
Accordion-style expandable step descriptions Live connector rail that lights up toward the open step Ghost-reveal title animation on hover and open Numbered circular step badges with smooth state transitions Two-column header — eyebrow, large heading, side description Optional meta label per step (duration, phase, date range) Fully responsive — 4 breakpoints, auto-scales type and spacing 7 independent font controls: heading, title, meta, description, number, side text, eyebrow Per-element uppercase toggles for full typographic control Adjustable accordion open and close animation speed Built-in schema.org HowTo structured data for SEO Semantic ol/li/h3 markup — screen-reader and keyboard accessible Static-safe canvas and export rendering Works out of the box — no setup needed
Use Cases
Agency "how we work" and process pages
SaaS onboarding and setup-flow explainers
Consulting and service process breakdowns
Project roadmap and timeline sections
Product "how it works" sections
Studio and freelancer workflow pages
Startup pitch deck process slides
Development and design process pages
Event or program step-by-step guides
Portfolio and case study methodology sections
Keywords
process steps, how it works, accordion steps, numbered steps, step by step, process timeline, workflow section, connector rail, agency process, roadmap component, process component, expandable steps, animated process, service process, onboarding steps, step tracker, vertical timeline, process flow, how we work section, step accordion, how-to component UI
About Component
Process Steps Pro is an animated process-steps section for Framer. Numbered steps expand accordion-style with a live connector rail that lights up as you progress, ghost-reveal titles, and a two-column eyebrow + heading header. Fully responsive with built-in SEO markup and accessible keyboard navigation — perfect for agencies, SaaS products, consultancies and service-based businesses that need to explain a process clearly.
Accordion-style expandable step descriptions Live connector rail that lights up toward the open step Ghost-reveal title animation on hover and open Numbered circular step badges with smooth state transitions Two-column header — eyebrow, large heading, side description Optional meta label per step (duration, phase, date range) Fully responsive — 4 breakpoints, auto-scales type and spacing 7 independent font controls: heading, title, meta, description, number, side text, eyebrow Per-element uppercase toggles for full typographic control Adjustable accordion open and close animation speed Built-in schema.org HowTo structured data for SEO Semantic ol/li/h3 markup — screen-reader and keyboard accessible Static-safe canvas and export rendering Works out of the box — no setup needed
Use Cases
Agency "how we work" and process pages
SaaS onboarding and setup-flow explainers
Consulting and service process breakdowns
Project roadmap and timeline sections
Product "how it works" sections
Studio and freelancer workflow pages
Startup pitch deck process slides
Development and design process pages
Event or program step-by-step guides
Portfolio and case study methodology sections
Keywords
process steps, how it works, accordion steps, numbered steps, step by step, process timeline, workflow section, connector rail, agency process, roadmap component, process component, expandable steps, animated process, service process, onboarding steps, step tracker, vertical timeline, process flow, how we work section, step accordion, how-to component UI
Ahmet Loca
