Interactive Elements Design Prompts¶

Comprehensive prompt templates for micro-interactions, animations, hover states, loading patterns, and interactive UI behaviors

Created: February 2026 Tool: Nano Banana Pro / Interaction Design Suite Related: Framework Overview | UI Components | Video & Motion

Design System Configuration¶

# CONFIGURATION BLOCK - References parent design system
# Inherits all tokens from readme.md parent framework

parent_framework: "./readme.md"
schema_version: "2.0"
asset_category: "interactive-elements"

# Active Configuration (override parent or inherit)
active_configuration:
  variant: "{{ACTIVE_VARIANT}}"           # Inherit from parent or override
  grid_system: "{{GRID_STYLE}}"           # Layout grid for interactive contexts
  frame_style: "{{FRAME_TYPE}}"           # Border/frame style for components
  dark_mode: "{{MODE.dark_mode}}"         # Light/dark mode toggle
  reduced_motion: "{{MODE.reduced_motion}}"  # Respect prefers-reduced-motion

# Interactive-specific token overrides
interactive_tokens:
  # Timing (inherits from motion_tokens)
  hover_duration: "{{motion_tokens.duration_fast}}"      # 100ms
  focus_duration: "{{motion_tokens.duration_normal}}"    # 200ms
  state_transition: "{{motion_tokens.duration_slow}}"    # 300ms
  loading_cycle: "{{motion_tokens.duration_slowest}}"    # 700ms

  # Easing (inherits from motion_tokens)
  default_ease: "{{motion_tokens.ease_out}}"
  interactive_ease: "{{motion_tokens.ease_in_out}}"
  bounce_ease: "{{motion_tokens.ease_bounce}}"

  # Focus indicators
  focus_ring_width: "{{sizing_tokens.border_2}}"         # 2px
  focus_ring_offset: "{{spacing_tokens.space_0.5}}"      # 2px
  focus_ring_color: "{{colors.primary}}"                 # Variant-specific

  # Interactive feedback
  hover_lift: "-1px"
  press_depth: "1px"
  active_scale: "0.98"
  disabled_opacity: "{{effect_tokens.opacity_50}}"       # 0.5

Variant Recommendations for Interactive Elements¶

Different design system variants have specific interaction patterns that reinforce their visual identity.

variant_interaction_patterns:
  trusted_advisor:
    description: "Conservative, confident interactions that build trust"
    hover_behavior: "Subtle darkening (8-10%), minimal lift"
    focus_style: "High-visibility solid outline in {{colors.primary}}"
    transitions: "Smooth, predictable (150-200ms)"
    loading_style: "Circular spinner with muted colors"
    grid_system: "subtle_grid"
    frame_style: "solid"
    recommended_elements:
      - "Button: Solid fill, subtle hover darken"
      - "Input: Clean borders, floating labels"
      - "Toggle: Traditional switch appearance"
    avoid:
      - "Bouncy or playful animations"
      - "Aggressive hover effects"
      - "Neon or glow effects"

  modern_partner:
    description: "Warm, approachable interactions that invite collaboration"
    hover_behavior: "Gentle color shift with rounded corners emphasis"
    focus_style: "Soft focus ring with {{colors.accent}} glow"
    transitions: "Fluid, organic timing (200-250ms)"
    loading_style: "Flowing dot sequence or organic shapes"
    grid_system: "minimal_grid"
    frame_style: "solid"
    recommended_elements:
      - "Button: Pill-shaped, gradient hover"
      - "Input: Generous padding, animated labels"
      - "Cards: Gentle lift on hover"
    avoid:
      - "Sharp or aggressive transitions"
      - "Technical/grid-based patterns"
      - "Cold or sterile feedback"

  bold_challenger:
    description: "Confident, impactful interactions that command attention"
    hover_behavior: "High contrast color inversion or strong accent reveal"
    focus_style: "Bold, visible outline with {{colors.accent}} (#ea580c)"
    transitions: "Crisp, decisive (100-150ms)"
    loading_style: "Bold progress bars, geometric spinners"
    grid_system: "structured_grid"
    frame_style: "solid"
    recommended_elements:
      - "Button: Sharp corners, color block on hover"
      - "Input: Strong borders, clear states"
      - "Toggle: Geometric, high contrast"
    avoid:
      - "Subtle or understated effects"
      - "Soft gradients or organic motion"
      - "Timid hover states"

  cyber_shield:
    description: "Security-focused interactions with operational aesthetics"
    hover_behavior: "Red glow intensification ({{colors.accent_glow}})"
    focus_style: "Glowing border with scan effect"
    transitions: "Sharp, technical (100ms with glow falloff)"
    loading_style: "Circular threat scanner, data pulse"
    grid_system: "cyber_grid"
    frame_style: "glow"
    recommended_elements:
      - "Button: Bracketed corners, glow on hover"
      - "Input: Technical appearance, validation as threat/clear"
      - "Toggle: On/off with threat level indicator"
      - "Status: Real-time pulse animations"
    special_effects:
      - "Scan line overlays during loading"
      - "Corner bracket animations"
      - "Threat level color coding"
    avoid:
      - "Soft or casual interactions"
      - "Playful animations"
      - "Light mode patterns"

  sentinel_guard:
    description: "AI-powered, intelligent interactions with neural patterns"
    hover_behavior: "Purple gradient intensification with neural pulse"
    focus_style: "Gradient border with AI processing indicator"
    transitions: "Smooth with subtle pulse (200ms + glow)"
    loading_style: "Neural network animation, AI processing indicators"
    grid_system: "dashboard_grid"
    frame_style: "gradient"
    recommended_elements:
      - "Button: Gradient borders, AI processing states"
      - "Input: Intelligent validation with predictive feedback"
      - "Toggle: AI status indicator"
      - "Cards: Neural connection animations"
    special_effects:
      - "Neural network connection lines"
      - "AI processing pulse"
      - "Predictive state indicators"
    avoid:
      - "Manual/simple feedback patterns"
      - "Dated or static interactions"
      - "Red threat colors (use purple family)"

  clean_developer:
    description: "Precise, documentation-quality interactions for developers"
    hover_behavior: "Clean background fill, precise state changes"
    focus_style: "Consistent 2px outline in {{colors.primary}} (#4f46e5)"
    transitions: "Precise, predictable (150ms)"
    loading_style: "Minimal spinners, code-style progress"
    grid_system: "minimal_grid"
    frame_style: "solid"
    recommended_elements:
      - "Button: Clean borders, code-friendly states"
      - "Input: Monospace support, syntax highlighting"
      - "Toggle: Developer-friendly, clear states"
      - "Code blocks: Syntax highlighting, copy feedback"
    special_effects:
      - "Copy-to-clipboard animations"
      - "Code syntax highlighting transitions"
      - "Terminal-style loading"
    avoid:
      - "Decorative or flashy effects"
      - "Ambiguous state indicators"
      - "Overly complex animations"

  creative_clay:
    description: "Distinctive, memorable interactions with creative flair"
    hover_behavior: "Blob morphing, warm color shifts"
    focus_style: "Rounded focus with accent gradient"
    transitions: "Playful-professional timing (200-300ms)"
    loading_style: "3D clay morphing, floating elements"
    grid_system: "editorial_grid"
    frame_style: "solid"
    recommended_elements:
      - "Button: Pill shapes, morphing hover states"
      - "Input: Generous padding, animated placeholders"
      - "Cards: Float and scale on hover"
      - "Toggle: Blob-style thumb"
    special_effects:
      - "Blob shape morphing"
      - "Floating 3D elements"
      - "Gradient text transitions"
    avoid:
      - "Generic or template-style interactions"
      - "Sharp, technical patterns"
      - "Boring or forgettable feedback"

  blueprint_technical:
    description: "CAD/engineering precision with technical drawing aesthetics"
    hover_behavior: "Dimension callout appearance, construction line reveal"
    focus_style: "Technical crosshairs or dimension indicators"
    transitions: "Mechanical precision (100-150ms)"
    loading_style: "Blueprint drafting animation, construction sequence"
    grid_system: "technical_grid"
    frame_style: "dashed"
    recommended_elements:
      - "Button: Technical callout style, dimension annotations"
      - "Input: Engineering field appearance with unit indicators"
      - "Toggle: Technical switch with status annotation"
      - "Cards: Blueprint section with fold lines"
    special_effects:
      - "Dimension callout animations on focus"
      - "Construction/drafting line reveals"
      - "Technical annotation overlays"
      - "Section view transitions"
    annotation_patterns:
      - "Leader lines to interactive elements"
      - "Dimension strings on hover"
      - "Section markers (A-A, B-B)"
      - "Scale indicators"
      - "Revision clouds for changed elements"
    colors:
      background: "#1C1C1C"
      accent: "#F05023"
      annotation: "#F05023"
      grid_lines: "rgba(240, 80, 35, 0.15)"
      dimension_text: "#F05023"
    avoid:
      - "Organic or soft animations"
      - "Decorative effects without function"
      - "Non-technical visual language"

Grid System Integration for Interactive Elements¶

Interactive elements must respect the active grid system for consistent layout behavior.

grid_interactive_patterns:
  minimal_grid:
    description: "{{grid_frame_systems.minimal_grid.description}}"
    interactive_behavior:
      - "Elements float freely with generous margins"
      - "Focus states provide primary structure"
      - "Hover effects use subtle shadows for depth"
    component_spacing: "{{spacing_tokens.space_6}}"

  subtle_grid:
    description: "{{grid_frame_systems.subtle_grid.description}}"
    interactive_behavior:
      - "Dotted alignment guides visible on focus"
      - "Components snap to invisible grid"
      - "Hover reveals structural relationship"
    component_spacing: "{{spacing_tokens.space_4}}"
    grid_reveal_on_focus: true

  structured_grid:
    description: "{{grid_frame_systems.structured_grid.description}}"
    interactive_behavior:
      - "Clear column alignment for form elements"
      - "Visible dividers between sections"
      - "Interactive states respect grid boundaries"
    component_spacing: "{{spacing_tokens.space_4}}"

  technical_grid:
    description: "{{grid_frame_systems.technical_grid.description}}"
    interactive_behavior:
      - "Corner marks animate on element activation"
      - "Dashed lines indicate editable areas"
      - "Technical annotations appear on hover"
    component_spacing: "{{spacing_tokens.space_4}}"
    corner_animation: true
    annotation_layer: true

  editorial_grid:
    description: "{{grid_frame_systems.editorial_grid.description}}"
    interactive_behavior:
      - "Magazine-style section transitions"
      - "Column rules animate with content"
      - "Pull-quote style hover states"
    component_spacing: "{{spacing_tokens.space_6}}"

  dashboard_grid:
    description: "{{grid_frame_systems.dashboard_grid.description}}"
    interactive_behavior:
      - "Card-based hover with elevation"
      - "Grid gaps remain consistent during animation"
      - "Metrics update with smooth transitions"
    component_spacing: "{{spacing_tokens.space_4}}"
    card_elevation_on_hover: true

  cyber_grid:
    description: "{{grid_frame_systems.cyber_grid.description}}"
    interactive_behavior:
      - "Scan line animation during state changes"
      - "Corner brackets pulse on activation"
      - "Glow effects respect grid boundaries"
    component_spacing: "{{spacing_tokens.space_3}}"
    scan_animation: true
    bracket_pulse: true

Frame Style Options for Interactive Elements¶

Frame styles define the border and container appearance of interactive components.

frame_interactive_styles:
  solid:
    css: "border: {{sizing_tokens.border_1}} solid {{colors.border}}"
    hover: "border-color: {{colors.border_strong}}"
    focus: "border-color: {{colors.primary}}; outline: {{sizing_tokens.border_2}} solid {{colors.primary}}"
    use_cases: ["Forms", "Cards", "Buttons", "Containers"]
    best_for_variants: ["trusted_advisor", "clean_developer", "modern_partner"]

  dotted:
    css: "border: {{sizing_tokens.border_1}} dotted {{colors.border}}"
    hover: "border-style: dashed"
    focus: "border-style: solid; border-color: {{colors.primary}}"
    use_cases: ["Draft states", "Upload zones", "Editable areas"]
    best_for_variants: ["technical_grid", "blueprint_technical"]

  dashed:
    css: "border: {{sizing_tokens.border_1}} dashed {{colors.border}}"
    hover: "border-color: {{colors.primary}}"
    focus: "border-style: solid; border-color: {{colors.primary}}"
    use_cases: ["Selection areas", "Drag targets", "Dynamic content"]
    best_for_variants: ["bold_challenger", "blueprint_technical"]

  double:
    css: "border: 3px double {{colors.border}}"
    hover: "border-color: {{colors.primary}}"
    focus: "border-color: {{colors.primary}}; box-shadow: {{shadow_tokens.shadow_md}}"
    use_cases: ["Premium elements", "Featured content", "Certificates"]
    best_for_variants: ["editorial_grid", "creative_clay"]

  gradient:
    css: "border: {{sizing_tokens.border_2}} solid transparent; background: linear-gradient({{colors.surface}}, {{colors.surface}}) padding-box, linear-gradient(135deg, {{colors.primary}}, {{colors.accent}}) border-box"
    hover: "background: linear-gradient({{colors.surface}}, {{colors.surface}}) padding-box, linear-gradient(135deg, {{colors.primary_light}}, {{colors.accent}}) border-box"
    focus: "box-shadow: 0 0 0 2px {{colors.primary}}"
    use_cases: ["CTAs", "Featured buttons", "Highlights"]
    best_for_variants: ["sentinel_guard", "creative_clay"]

  glow:
    css: "border: {{sizing_tokens.border_1}} solid {{colors.accent}}; box-shadow: 0 0 {{shadow_tokens.glow_sm}} {{colors.accent}}40"
    hover: "box-shadow: 0 0 {{shadow_tokens.glow_md}} {{colors.accent}}60"
    focus: "box-shadow: 0 0 {{shadow_tokens.glow_lg}} {{colors.accent}}80"
    use_cases: ["Active states", "Alerts", "Security indicators"]
    best_for_variants: ["cyber_shield", "sentinel_guard"]

Interactive Design Philosophy¶

SBK interactive elements must: - Provide meaningful feedback for every user action - Feel responsive with sub-100ms visual response - Enhance usability not just decoration - Maintain consistency across all touchpoints - Respect user preferences for reduced motion

Interaction Anti-Patterns¶

Never create: - Animations that block or delay user actions - Inconsistent interaction patterns - Motion that causes disorientation - Interactions without accessibility alternatives - Decorative animation that distracts from content

Micro-Interactions¶

Button Interactions¶

[SBK BRAND DNA]
Professional technology consulting. Responsive, confident, reliable feel.

[STYLE: {{active_variant.name}}]
{{active_variant.prompt_prefix}}

[GRID: {{layout.grid_system}}]
Frame style: {{layout.frame_style}}

[ASSET: INTERACTION - BUTTON]
Button state transitions and feedback.

[STATES]
Default: Resting state, clearly actionable.
Hover: Visual acknowledgment of potential action.
Focus: Keyboard navigation indicator.
Active/Pressed: Immediate response to click/tap.
Loading: In-progress state.
Disabled: Non-actionable state.
Success: Confirmation of action.
Error: Action failed state.

[HOVER BEHAVIOR]
Primary button:
  - Background: Slight darken (8-10%) toward {{colors.primary_dark}}.
  - Transform: translateY({{interactive_tokens.hover_lift}}) subtle lift.
  - Shadow: Increase to {{shadow_tokens.shadow_md}}.
  - Transition: {{interactive_tokens.hover_duration}} {{interactive_tokens.default_ease}}.

Secondary button:
  - Background: Light fill appears ({{colors.surface}}).
  - Border: Transition to {{colors.border_strong}}.
  - Transition: {{interactive_tokens.hover_duration}} {{interactive_tokens.default_ease}}.

Ghost button:
  - Background: Subtle fill ({{colors.surface}} at 50% opacity).
  - Text: Shift toward {{colors.primary}}.
  - Transition: {{interactive_tokens.hover_duration}} {{interactive_tokens.default_ease}}.

[ACTIVE/PRESSED]
Transform: translateY({{interactive_tokens.press_depth}}) push effect.
Scale: {{interactive_tokens.active_scale}}.
Shadow: Reduce to {{shadow_tokens.shadow_xs}}.
Duration: Instant (<50ms).

[FOCUS]
Outline: {{interactive_tokens.focus_ring_width}} solid {{interactive_tokens.focus_ring_color}}.
Offset: {{interactive_tokens.focus_ring_offset}} from button edge.
Visible: High contrast for accessibility.

[LOADING STATE]
Text: Hidden or replaced.
Spinner: Centered in button, color matches button text.
Button: Disabled during load.
Width: Maintain original width.

[SUCCESS/ERROR]
Icon: Checkmark ({{colors.success}}) or X ({{colors.error}}) replaces content.
Color: Background transition to success/error color.
Duration: 1.5-2s before reset.

Form Input Interactions¶

[STYLE: {{active_variant.name}}]
{{active_variant.prompt_prefix}}

[ASSET: INTERACTION - FORM INPUT]
Text field and form element interactions.

[STATES]
Empty: Placeholder visible in {{colors.text_muted}}.
Focus: Active input state with {{colors.primary}} emphasis.
Filled: Contains value in {{colors.text_primary}}.
Valid: Validation passed with {{colors.success}} indicator.
Invalid: Validation failed with {{colors.error}} indicator.
Disabled: Non-editable with {{interactive_tokens.disabled_opacity}} opacity.

[FOCUS BEHAVIOR]
Border: Transition to {{colors.primary}}.
Label: Float animation if floating label.
Shadow: Subtle focus ring using {{shadow_tokens.shadow_sm}}.
Background: Optional slight color change to {{colors.surface}}.
Transition: {{interactive_tokens.focus_duration}} {{interactive_tokens.default_ease}}.

[LABEL FLOAT ANIMATION]
Trigger: On focus or when has value.
Transform: translateY(-100%) scale(0.85).
Color: Transition to {{colors.primary}}.
Duration: {{interactive_tokens.hover_duration}} {{interactive_tokens.default_ease}}.

[VALIDATION FEEDBACK]
Timing: On blur or after delay.
Icon: Checkmark ({{colors.success}}) or warning ({{colors.error}}).
Border: Color indicates state.
Message: Appears below field using {{colors.error}} or {{colors.success}}.
Animation: Fade in, slide up.

[CHARACTER COUNT]
Display: Shows remaining characters in {{colors.text_muted}}.
Warning: Color changes to {{colors.warning}} near limit.
Exceeded: {{colors.error}}, prevents further input.

Toggle & Switch¶

[STYLE: {{active_variant.name}}]
{{active_variant.prompt_prefix}}

[ASSET: INTERACTION - TOGGLE]
Toggle switch interactions.

[ANATOMY]
Track: Background container using {{colors.border}} (off) / {{colors.primary}} (on).
Thumb: Sliding indicator in {{colors.surface}}.
Label: Optional text in {{colors.text_primary}}.
Icon: Optional state icons.

[STATES]
Off: Default, inactive state with {{colors.border}} track.
On: Active, enabled state with {{colors.primary}} track.
Hover: Slight highlight on thumb with {{shadow_tokens.shadow_sm}}.
Focus: Focus ring visible using {{interactive_tokens.focus_ring_color}}.
Disabled: Muted at {{interactive_tokens.disabled_opacity}}, non-interactive.

[ANIMATION]
Thumb slide: {{interactive_tokens.focus_duration}} {{interactive_tokens.default_ease}}.
Background: Color transition {{interactive_tokens.hover_duration}}.
Icon fade: 100ms cross-fade.

[MOTION DETAIL]
Thumb overshoots slightly (spring effect using {{motion_tokens.ease_bounce}}).
Background color transitions smoothly.
Icons fade during transition.

[ACCESSIBILITY]
Role: Switch or checkbox.
State: Announced on change.
Focus: Visible ring.
Keyboard: Space to toggle.

Checkbox & Radio¶

[STYLE: {{active_variant.name}}]
{{active_variant.prompt_prefix}}

[ASSET: INTERACTION - CHECKBOX]
Checkbox and radio button interactions.

[STATES]
Unchecked: Empty indicator with {{colors.border}} border.
Checked: Filled with {{colors.primary}} and checkmark/dot in {{colors.surface}}.
Indeterminate: Partial state (checkbox) with {{colors.primary}} dash.
Hover: Background highlight using {{colors.surface}}.
Focus: Focus ring using {{interactive_tokens.focus_ring_color}}.
Disabled: Muted appearance at {{interactive_tokens.disabled_opacity}}.

[CHECK ANIMATION]
Style: Draw-on checkmark.
Duration: {{interactive_tokens.hover_duration}}.
Easing: {{interactive_tokens.default_ease}}.
Scale: Slight bounce at end (optional, using {{motion_tokens.ease_bounce}}).

[RIPPLE EFFECT]
Optional: Material-style ripple using {{colors.primary}} at 30% opacity.
Origin: From click point.
Duration: {{interactive_tokens.state_transition}}.
Opacity: Fade from 30% to 0%.

[RADIO SELECTION]
Previous: Fade out current dot.
New: Fade in new dot using {{colors.primary}}.
Group: Only one active.

[STYLE: {{active_variant.name}}]
{{active_variant.prompt_prefix}}

[GRID: {{layout.grid_system}}]
Frame style: {{layout.frame_style}}

[ASSET: INTERACTION - DROPDOWN]
Dropdown menu and select interactions.

[TRIGGER STATES]
Closed: Default appearance with {{colors.border}} border.
Hover: Slight visual change toward {{colors.primary}}.
Open: Active, expanded state with {{shadow_tokens.shadow_lg}}.
Focus: Keyboard-focused with {{interactive_tokens.focus_ring_color}}.

[OPEN ANIMATION]
Origin: From trigger element.
Direction: Down (default), up if near edge.
Opacity: Fade in from 0 to 1.
Transform: scaleY(0.95) to scaleY(1).
Duration: {{interactive_tokens.focus_duration}} {{interactive_tokens.default_ease}}.

[CLOSE ANIMATION]
Reverse of open.
Duration: {{interactive_tokens.hover_duration}} (faster close).

[MENU ITEM HOVER]
Background: Subtle highlight using {{colors.surface}}.
Transition: Immediate (<100ms).
Cursor: Pointer.

[KEYBOARD NAVIGATION]
Arrow keys: Move between items.
Enter/Space: Select item.
Escape: Close menu.
Type: Jump to matching item.

[NESTED MENUS]
Delay: {{interactive_tokens.state_transition}} before showing.
Direction: Typically to right.
Alignment: Edge-aligned with parent.

[STYLE: {{active_variant.name}}]
{{active_variant.prompt_prefix}}

[ASSET: INTERACTION - TABS]
Tab navigation interactions.

[TAB STATES]
Inactive: Muted text ({{colors.text_secondary}}) and background.
Hover: Slight highlight toward {{colors.primary}}.
Active: Full visual emphasis with {{colors.primary}} indicator.
Focus: Focus ring visible.
Disabled: Grayed out at {{interactive_tokens.disabled_opacity}}.

[INDICATOR ANIMATION]
Style: Underline slides to active tab using {{colors.primary}}.
Duration: {{interactive_tokens.state_transition}} {{interactive_tokens.default_ease}}.
Motion: Follows click direction.

[CONTENT TRANSITION]
Fade: Cross-fade between panels.
Slide: Slide in direction of tab change.
Duration: {{interactive_tokens.focus_duration}}.

[RESPONSIVE]
Overflow: Scroll or dropdown on mobile.
Touch: Swipe between tabs (optional).

[STYLE: {{active_variant.name}}]
{{active_variant.prompt_prefix}}

[ASSET: INTERACTION - NAV MENU]
Header and navigation menu interactions.

[HEADER SCROLL]
Sticky: Fixed on scroll.
Shrink: Reduce height on scroll.
Shadow: {{shadow_tokens.shadow_md}} appears on scroll.
Hide: Auto-hide on scroll down, show on up.

[TRANSITIONS]
Height: {{interactive_tokens.state_transition}} {{interactive_tokens.default_ease}}.
Shadow: {{interactive_tokens.focus_duration}} ease.
Background: {{interactive_tokens.focus_duration}} fade.

[MOBILE MENU]
Trigger: Hamburger to X animation.
Panel: Slide in from side or top.
Overlay: Fade in background ({{colors.text_primary}} at 50% opacity).
Duration: {{interactive_tokens.state_transition}} {{interactive_tokens.default_ease}}.

[MENU ITEM HOVER]
Underline: Slide in from left using {{colors.primary}}.
Background: Subtle highlight.
Icon: Slight rotation or color shift.

Loading & Progress¶

Skeleton Loading¶

[STYLE: {{active_variant.name}}]
{{active_variant.prompt_prefix}}

[ASSET: INTERACTION - SKELETON]
Content placeholder loading states.

[ANATOMY]
Shape: Matches content being loaded.
Color: {{colors.border}} base.
Animation: Shimmer effect.

[SHIMMER ANIMATION]
Type: Gradient wave moving left to right.
Gradient: From {{colors.border}} through {{colors.surface}} back to {{colors.border}}.
Duration: {{interactive_tokens.loading_cycle}} × 2.5 (1.75s total).
Easing: Linear, continuous loop.

[IMPLEMENTATION]
Content blocks: Rectangles for text.
Images: Aspect-ratio placeholders.
Avatars: Circles.
Cards: Combined shapes.

[TRANSITION OUT]
Fade: Skeleton fades as content appears.
Duration: {{interactive_tokens.state_transition}}.
Stagger: Content appears progressively.

Spinner & Loader¶

[STYLE: {{active_variant.name}}]
{{active_variant.prompt_prefix}}

[ASSET: INTERACTION - SPINNER]
Loading spinner and indicator styles.

[VARIANTS]
Circular: Rotating spinner in {{colors.primary}}.
Dots: Bouncing or fading dots.
Bar: Linear progress indication.
Custom: Brand-specific animation per variant.

[CIRCULAR SPINNER]
Size: 16px (inline), 24px (button), 48px (page).
Stroke: 2-4px depending on size.
Color: {{colors.primary}} or contextual.
Animation: 0.8-1.2s rotation, linear.

[DOT LOADER]
Count: 3 dots.
Color: {{colors.primary}}.
Animation: Sequential bounce or fade.
Duration: {{interactive_tokens.loading_cycle}} × 2 loop.
Easing: {{interactive_tokens.interactive_ease}}.

[FULL PAGE LOADER]
Overlay: {{colors.background}} at 80% opacity.
Spinner: Centered, larger size.
Message: Optional loading text in {{colors.text_secondary}}.
Timeout: Show message if >3s.

[BUTTON LOADING]
Position: Center of button.
Size: Match button text height.
Color: Contrast with button background.
Text: Hidden or replaced.

Progress Indicators¶

[STYLE: {{active_variant.name}}]
{{active_variant.prompt_prefix}}

[ASSET: INTERACTION - PROGRESS]
Determinate progress visualization.

[LINEAR PROGRESS]
Track: Full width background in {{colors.border}}.
Fill: Animated progress bar in {{colors.primary}}.
Animation: Smooth width transition.
Indeterminate: Sliding/growing animation.

[CIRCULAR PROGRESS]
Track: Full circle background in {{colors.border}}.
Fill: Arc in {{colors.primary}} showing progress.
Label: Percentage in center (optional) using {{colors.text_primary}}.
Animation: Smooth arc growth.

[STEP PROGRESS]
States: Complete ({{colors.success}}), current ({{colors.primary}}), upcoming ({{colors.border}}).
Connector: Line between steps.
Animation: Check appears on complete.
Transition: {{interactive_tokens.state_transition}} {{interactive_tokens.default_ease}}.

[UPLOAD PROGRESS]
Bar: Shows upload percentage in {{colors.primary}}.
Speed: Display transfer speed in {{colors.text_secondary}}.
Cancel: Option to abort ({{colors.error}} hover).
Complete: Checkmark animation in {{colors.success}}.

Feedback Interactions¶

Toast Notifications¶

[STYLE: {{active_variant.name}}]
{{active_variant.prompt_prefix}}

[ASSET: INTERACTION - TOAST]
Temporary notification messages.

[ENTER ANIMATION]
Origin: Slides in from edge.
Direction: Top, bottom, or corner.
Transform: translateY + opacity.
Duration: {{interactive_tokens.state_transition}} {{interactive_tokens.default_ease}}.

[EXIT ANIMATION]
Trigger: Auto-dismiss or user action.
Transform: Reverse of enter.
Duration: {{interactive_tokens.focus_duration}}.

[STACKING]
Multiple: Stack with {{spacing_tokens.space_2}} spacing.
New: Push existing down/up.
Animation: Smooth position shift.

[SWIPE TO DISMISS]
Gesture: Horizontal swipe.
Threshold: 30-50% of width.
Animation: Accelerate off-screen.
Fallback: Close button for mouse.

[TIMING]
Default: 4-5 seconds.
Error ({{colors.error}}): 6-8 seconds or manual dismiss.
Success ({{colors.success}}): 3-4 seconds.
Progress: Until action complete.

[STYLE: {{active_variant.name}}]
{{active_variant.prompt_prefix}}

[FRAME: {{layout.frame_style}}]
Border radius: {{sizing_tokens.radius_xl}}

[ASSET: INTERACTION - MODAL]
Modal dialog interactions.

[OPEN ANIMATION]
Overlay: Fade in (0 to 50% opacity) using {{colors.text_primary}}.
Modal: Fade + scale (0.95 to 1).
Duration: {{interactive_tokens.state_transition}} {{interactive_tokens.default_ease}}.
Focus: Trap within modal.

[CLOSE ANIMATION]
Reverse: Fade out and scale down.
Duration: {{interactive_tokens.focus_duration}}.
Focus: Return to trigger element.

[BACKDROP]
Click: Closes modal (unless prevented).
Color: {{colors.text_primary}} at 50% opacity.
Blur: Optional background blur using {{effect_tokens.blur_md}}.

[CLOSE METHODS]
X button: Top right corner.
Cancel button: If applicable.
Backdrop: Click outside.
Escape key: Keyboard shortcut.

[ACCESSIBILITY]
Role: dialog.
Label: aria-labelledby.
Focus: Trapped within modal.
Escape: Closes dialog.

[STYLE: {{active_variant.name}}]
{{active_variant.prompt_prefix}}

[ASSET: INTERACTION - TOOLTIP]
Hover information displays.

[TRIGGER]
Delay: {{interactive_tokens.state_transition}} hover before show.
Touch: Long press or tap on icon.
Focus: Show on keyboard focus.

[ENTER ANIMATION]
Opacity: Fade in.
Transform: Slight slide from origin.
Duration: {{interactive_tokens.focus_duration}} {{interactive_tokens.default_ease}}.

[EXIT ANIMATION]
Delay: 100ms before starting.
Duration: {{interactive_tokens.hover_duration}}.
Quicker: Than entrance.

[POSITIONING]
Preferred: Above trigger.
Collision: Flip to available space.
Arrow: Points to trigger.
Offset: {{spacing_tokens.space_2}} from trigger.

[STYLING]
Background: {{colors.text_primary}} (dark tooltip).
Text: {{colors.surface}}.
Border-radius: {{sizing_tokens.radius_md}}.
Shadow: {{shadow_tokens.shadow_md}}.

[POPOVER SPECIFICS]
Click trigger: Toggle on click.
Rich content: Can contain interactive elements.
Close: Click outside or escape.

Scroll Interactions¶

Scroll-Triggered Animations¶

[STYLE: {{active_variant.name}}]
{{active_variant.prompt_prefix}}

[ASSET: INTERACTION - SCROLL TRIGGER]
Animations triggered by scroll position.

[TRIGGER TYPES]
Enter viewport: Element becomes visible.
Exit viewport: Element leaves view.
Progress: Based on scroll percentage.

[COMMON ANIMATIONS]
Fade in: opacity 0 to 1.
Slide up: translateY(20px) to 0.
Scale: scale(0.95) to scale(1).
Stagger: Sequential element animation.

[TIMING]
Trigger point: 10-20% into viewport.
Duration: {{interactive_tokens.state_transition}} × 1.5 per element.
Stagger delay: 50-100ms between items.
Easing: {{interactive_tokens.default_ease}}.

[PERFORMANCE]
Use: Intersection Observer API.
Throttle: Scroll event handlers.
GPU: Transform and opacity only.
Fallback: Show immediately if no JS.

[REDUCED MOTION]
Respect: prefers-reduced-motion.
Fallback: Instant appearance, no animation.

Parallax Effects¶

[STYLE: {{active_variant.name}}]
{{active_variant.prompt_prefix}}

[ASSET: INTERACTION - PARALLAX]
Depth and parallax scroll effects.

[TYPES]
Simple: Background moves slower.
Layered: Multiple depth layers.
Perspective: 3D depth effect.

[IMPLEMENTATION]
Rate: Background moves at 50-70% of scroll.
Direction: Same as scroll typically.
Boundaries: Set min/max positions.

[PERFORMANCE]
Transform: Use translate3d for GPU.
Will-change: Apply judiciously.
Mobile: Disable or simplify.

[ACCESSIBILITY]
Reduced motion: Disable parallax completely.
Alternative: Static fallback.

Infinite Scroll¶

[STYLE: {{active_variant.name}}]
{{active_variant.prompt_prefix}}

[ASSET: INTERACTION - INFINITE SCROLL]
Continuous content loading on scroll.

[TRIGGER]
Position: Load when 200-500px from bottom.
Threshold: Intersection observer at 0.1.

[LOADING STATE]
Indicator: Spinner in {{colors.primary}} at list bottom.
Skeleton: Placeholder cards using {{colors.border}}.

[COMPLETION]
End: "No more items" message in {{colors.text_muted}}.
Pagination: Option to switch to pages.
Jump back: "Back to top" button.

[PERFORMANCE]
Virtualization: For long lists.
Unload: Remove off-screen items.
Memory: Monitor and manage.

Gesture Interactions¶

Swipe Gestures¶

[STYLE: {{active_variant.name}}]
{{active_variant.prompt_prefix}}

[ASSET: INTERACTION - SWIPE]
Touch swipe interactions.

[SWIPE ACTIONS]
Horizontal: Navigate, dismiss, reveal.
Vertical: Refresh, dismiss, scroll.
Diagonal: Usually avoided.

[CAROUSEL SWIPE]
Threshold: 20-30% of item width.
Momentum: Continue in swipe direction.
Snap: Settle to nearest item.
Resistance: Elastic at boundaries.

[SWIPE TO DELETE]
Reveal: Shows delete action in {{colors.error}}.
Threshold: 50% to trigger.
Confirmation: Option before delete.
Undo: Toast with undo option in {{colors.primary}}.

[SWIPE TO REFRESH]
Pull distance: 80-100px.
Indicator: Spinner or animation in {{colors.primary}}.
Release: Triggers refresh.
Threshold: Must exceed minimum.

Drag & Drop¶

[STYLE: {{active_variant.name}}]
{{active_variant.prompt_prefix}}

[ASSET: INTERACTION - DRAG DROP]
Drag and drop interactions.

[DRAG START]
Trigger: Mouse down + movement or long press.
Feedback: Item lifts with {{shadow_tokens.shadow_xl}}.
Cursor: Grabbing cursor.
Clone: Ghost of original follows at 80% opacity.

[DRAGGING]
Position: Follows pointer.
Placeholder: Shows where item was using {{colors.border}} dashed border.
Scroll: Auto-scroll near edges.
Targets: Highlight valid drop zones with {{colors.primary}} border.

[DROP]
Valid: Item settles into position.
Invalid: Returns to origin.
Animation: {{interactive_tokens.state_transition}} {{interactive_tokens.default_ease}}.

[ACCESSIBILITY]
Keyboard: Arrow keys to move.
Announce: Screen reader updates.
Alternative: Non-drag reorder option.

Pinch & Zoom¶

[STYLE: {{active_variant.name}}]
{{active_variant.prompt_prefix}}

[ASSET: INTERACTION - PINCH ZOOM]
Multi-touch zoom interactions.

[ZOOM BEHAVIOR]
Minimum: 100% (no zoom out).
Maximum: 300-400% typically.
Step: Smooth continuous zoom.
Center: Zoom toward pinch center.

[DOUBLE TAP]
Action: Toggle between 100% and preset zoom.
Duration: 250ms between taps.
Animation: Smooth zoom transition.

[ZOOM CONTROLS]
Buttons: +/- for mouse users.
Slider: Optional zoom slider.
Reset: Return to 100%.

[PAN BEHAVIOR]
Enabled: When zoomed in.
Boundaries: Content edges.
Momentum: Coast after release.

Blueprint Technical Variant - Special Interactive Notes¶

For the blueprint_technical variant (AlignUI-inspired), interactive elements follow CAD/engineering drawing conventions.

blueprint_interactive_specifications:
  description: "CAD/engineering precision for interactive elements"

  color_scheme:
    background: "#1C1C1C"
    accent: "#F05023"
    grid_lines: "rgba(240, 80, 35, 0.15)"
    annotation_text: "#F05023"
    dimension_lines: "#F05023"
    active_state: "#F05023"
    inactive_state: "rgba(240, 80, 35, 0.4)"

  annotation_patterns:
    leader_lines:
      description: "Lines connecting annotations to elements"
      style: "1px solid #F05023"
      arrow: "Small arrowhead at element end"
      text_offset: "{{spacing_tokens.space_2}} from line"

    dimension_strings:
      description: "Show measurements on hover"
      format: "Width × Height in pixels or units"
      position: "Above or beside element"
      style: "Monospace text with dimension lines"

    section_markers:
      description: "Reference markers for component sections"
      format: "A-A, B-B, C-C pattern"
      style: "Circle with letter, connected by section line"

    revision_clouds:
      description: "Indicate changed or updated elements"
      style: "Curved dashed border around changed area"
      color: "#F05023 at 60% opacity"
      label: "REV: [date or version]"

  interactive_behaviors:
    hover:
      - "Dimension callout appears"
      - "Leader line draws in (100ms)"
      - "Annotation text fades in"

    focus:
      - "Technical crosshairs appear"
      - "Dimension strings visible"
      - "Grid alignment indicators show"

    active:
      - "Section view highlight"
      - "Construction lines visible"
      - "Full annotation detail"

  button_specifications:
    style: "Technical callout appearance"
    borders: "Dashed with dimension tick marks"
    hover: "Solid with dimension annotation"
    corners: "Sharp or minimal radius"
    annotation: "Button dimensions shown on hover"

  input_specifications:
    style: "Engineering field appearance"
    border: "Dashed baseline with tick marks"
    label: "Dimension-style leader line"
    units: "Optional unit indicator (px, %, em)"
    validation: "Technical checkmark or warning annotation"

  toggle_specifications:
    style: "Technical switch appearance"
    track: "Dashed outline"
    thumb: "Solid rectangle with dimension marks"
    states: "ON/OFF with technical annotation"

  card_specifications:
    style: "Blueprint section appearance"
    border: "Dashed with fold/section lines"
    corners: "Corner marks at each corner"
    header: "Section title with reference number"

  loading_states:
    spinner: "Drafting/construction animation"
    progress: "Technical bar with percentage annotation"
    sequence: "Construction line reveal"

  prompt_prefix: |
    [STYLE: BLUEPRINT TECHNICAL]
    Color palette: Charcoal (#1C1C1C) with orange accent (#F05023).
    Mood: CAD precision, engineering drawing aesthetic, technical documentation.
    Grid: Visible technical grid with corner marks and section indicators.
    Annotations: Dimension callouts, leader lines, section markers.
    Borders: Dashed/dotted technical line work.
    Typography: Monospace for measurements, clean sans for labels.
    Interactive: Dimension reveals on hover, construction line animations.
    Special: Revision clouds for changes, section views for details.

Accessibility Considerations¶

Reduced Motion¶

reduced_motion:
  detection: "prefers-reduced-motion: reduce"

  adaptations:
    animations: "Disable or use fade only"
    transitions: "Reduce to 0ms or minimal"
    parallax: "Disable completely"
    auto_play: "Pause by default"

  fallbacks:
    opacity_only: "Fade instead of transform"
    instant: "Immediate state changes"
    static: "Show final state"

Focus Management¶

focus_management:
  visible: "Always show focus indicators"
  style: "High contrast, {{interactive_tokens.focus_ring_width}}+ outline"
  offset: "{{interactive_tokens.focus_ring_offset}} from element edge"
  color: "{{interactive_tokens.focus_ring_color}}"

  keyboard_navigation:
    tab: "Logical tab order"
    arrows: "Within components"
    escape: "Close overlays"
    enter: "Activate buttons/links"

  focus_trap:
    modals: "Keep focus within"
    restore: "Return focus on close"

screen_reader:
  state_changes:
    - "Announce loading states"
    - "Announce completion"
    - "Announce errors"

  live_regions:
    polite: "Non-urgent updates"
    assertive: "Errors and urgent"

  labels:
    buttons: "Descriptive action"
    icons: "Hidden decorative, labeled functional"

Performance Guidelines¶

Animation Performance¶

performance_rules:
  gpu_accelerated:
    - "transform"
    - "opacity"

  avoid_animating:
    - "width, height"
    - "top, left, right, bottom"
    - "margin, padding"

  best_practices:
    - "Use will-change sparingly"
    - "Remove will-change after animation"
    - "Debounce scroll handlers"
    - "Use requestAnimationFrame"

  targets:
    frame_rate: "60fps"
    input_latency: "<100ms"
    animation_start: "<100ms"

Bundle Considerations¶

bundle_optimization:
  css_animations:
    - "Prefer CSS over JavaScript"
    - "Smaller bundle, better performance"

  javascript:
    - "Tree-shake animation libraries"
    - "Lazy-load complex animations"

  images:
    - "Use CSS for simple shapes"
    - "SVG for complex animations"
    - "Lottie for complex but small"

Quality Checklist¶

Before implementing any interactive element:

Last Updated: February 2026 Version: 2.0 (Parameterized Design System Integration)

Interactive Elements Design Prompts¶

Design System Configuration¶

Variant Recommendations for Interactive Elements¶

Grid System Integration for Interactive Elements¶

Frame Style Options for Interactive Elements¶

Interactive Design Philosophy¶

Interaction Anti-Patterns¶

Micro-Interactions¶

Button Interactions¶

Form Input Interactions¶

Toggle & Switch¶

Checkbox & Radio¶

Navigation Interactions¶

Tab Navigation¶

Navigation Menu¶

Loading & Progress¶

Skeleton Loading¶

Spinner & Loader¶

Progress Indicators¶

Feedback Interactions¶

Toast Notifications¶

Tooltip & Popover¶

Scroll Interactions¶

Scroll-Triggered Animations¶

Parallax Effects¶

Infinite Scroll¶

Gesture Interactions¶

Swipe Gestures¶

Drag & Drop¶

Pinch & Zoom¶

Blueprint Technical Variant - Special Interactive Notes¶

Accessibility Considerations¶

Reduced Motion¶

Focus Management¶

Performance Guidelines¶

Animation Performance¶

Bundle Considerations¶

Quality Checklist¶

Interactive Elements Design Prompts¶

Design System Configuration¶

Variant Recommendations for Interactive Elements¶

Grid System Integration for Interactive Elements¶

Frame Style Options for Interactive Elements¶

Interactive Design Philosophy¶

Interaction Anti-Patterns¶

Micro-Interactions¶

Button Interactions¶

Form Input Interactions¶

Toggle & Switch¶

Checkbox & Radio¶

Navigation Interactions¶

Menu & Dropdown¶

Tab Navigation¶

Navigation Menu¶

Loading & Progress¶

Skeleton Loading¶

Spinner & Loader¶

Progress Indicators¶

Feedback Interactions¶

Toast Notifications¶

Modal & Dialog¶

Tooltip & Popover¶

Scroll Interactions¶

Scroll-Triggered Animations¶

Parallax Effects¶

Infinite Scroll¶

Gesture Interactions¶

Swipe Gestures¶

Drag & Drop¶

Pinch & Zoom¶

Blueprint Technical Variant - Special Interactive Notes¶

Accessibility Considerations¶

Reduced Motion¶

Focus Management¶

Screen Reader Support¶

Performance Guidelines¶

Animation Performance¶

Bundle Considerations¶

Quality Checklist¶