PixelPilot uiux-unique-ideas.instructions.md

UI/UX Unique Ideas Generator

Generate fresh, context-specific wow effects that never repeat. Every effect uses design tokens and respects accessibility.

---

MEMORY PROMPT

Before generating effects, ask:

"What effects did you use in the last session/project?"

This ensures variety across projects. Track previously used effects to avoid repetition.

---

DECISION TREE

START
  │
  ├─ What is the design language?
  │   ├─ Luxury → Slow, elegant, minimal animations
  │   ├─ Expressive → Bold, energetic, playful animations
  │   ├─ Minimalist → Subtle, precise, barely-there effects
  │   ├─ Technical → Functional, data-driven, no decorative
  │   └─ Other → Balance between subtle and engaging
  │
  ├─ What is the context?
  │   ├─ Serious (legal, medical, gov) → Avoid playful effects
  │   ├─ Creative (portfolio, agency) → More freedom for wow
  │   ├─ E-commerce → Focus on product, subtle UI effects
  │   └─ SaaS → Professional polish, micro-interactions
  │
  ├─ What is the primary device?
  │   ├─ Mobile → Touch gestures, haptic feedback
  │   ├─ Desktop → Hover effects, cursor interactions
  │   └─ Both → Progressive enhancement
  │
  └─ What element needs enhancement?
      ├─ Hero section → Entry animations, scroll effects
      ├─ Navigation → Hover states, transitions
      ├─ Cards/Grid → Hover reveals, stagger animations
      ├─ CTAs → Attention-grabbing, subtle motion
      └─ Data viz → Dynamic updates, transitions

---

IDEA CATEGORIES (20+)

1. SCROLL EFFECTS

Parallax Depth Layers

.parallax-container {
  perspective: 1000px;
  perspective-origin: center;
}

.parallax-layer--back {
  transform: translateZ(-200px) scale(1.2);
}

.parallax-layer--mid {
  transform: translateZ(-100px) scale(1.1);
}

.parallax-layer--front {
  transform: translateZ(0);
}

Scroll-Triggered Reveals

.reveal {
  opacity: 0;
  transform: translateY(var(--space-8));
  transition: opacity var(--dur-slow), transform var(--dur-slow);
}

.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}