Sections
Back to Sections

SECTION / SECTIONS

Guided Process Deck

A touch-safe working-method deck that reveals one phase at a time while keeping the complete system visible and understandable.

Ready
LIVE RENDERERDOM / CSS · LIVE INSTANCE
INTERACTIVE
04 / WORKING METHOD

A clear path through the unknown.

PHASE 01 / DISCOVER

Find the useful tension.

Map the audience, commercial context and cultural opportunity before choosing a direction.

Research / Interviews / Opportunity map
SECTION READYRESPONSIVECONTAINER SAFE
Exported · MIT
RENDERERDOM / CSS
DEPENDENCIESReact + CSS
OUTPUTSemantic responsive section
MOTIONUser controlled
WHAT IT DOES

A touch-safe working-method deck that reveals one phase at a time while keeping the complete system visible and understandable.

BEST FOR
  • Launch pages
  • Product storytelling
  • Conversion sequences
KEY FEATURES
  • Stateful process deck with durable phase context
  • Live composition, palette, typography, radius and headline controls
  • Complete portable section source with documented interaction states
  • Container-scoped layout with reduced-motion support
PERFORMANCE

No animation package or external preview asset is required. Layout is container-scoped and decorative motion is disabled when reduced motion is requested.

INTERACTION

Select a phase, or move with Left/Right, Home and End. Focus follows the selected tab. Reset restores the first phase.

ACCESSIBILITY

Native landmarks and controls preserve reading order, visible focus and keyboard access. Motion never carries the only meaning.

BEHAVIOR

Built for a complete page.

  • Stateful process deck with durable phase context
  • Live composition, palette, typography, radius and headline controls
  • Complete portable section source with documented interaction states
  • Container-scoped layout with reduced-motion support

SOURCE STATUS

Portable implementation included in the verified MIT open-source package.