@hienlh/ppm 0.9.79 → 0.9.81

package/.opencode/skills/frontend-design/references/extraction-output-templates.md

@@ -0,0 +1,162 @@
+# Extraction Output Templates
+
+Documentation format templates for extracted design guidelines.
+
+## Template 1: Complete Design System
+
+```markdown
+# [Project/Competitor] Design System
+
+## Aesthetic Direction
+- **Style**: Neo-brutalism with organic elements
+- **Mood**: Bold, confident, approachable
+- **Differentiation**: High contrast typography with soft color accents
+
+## Typography
+### Display Font
+- Family: Archivo Black (Google Fonts)
+- Sizes: h1: 72px, h2: 48px, h3: 36px
+- Weights: 400 (regular)
+- Line Height: 1.1
+- Letter Spacing: -0.02em
+
+### Body Font
+- Family: Inter (Google Fonts)
+- Sizes: body: 16px, small: 14px
+- Weights: 400, 500, 600
+- Line Height: 1.6
+- Letter Spacing: 0
+
+## Color Palette
+\```css
+:root {
+  /* Primary Colors */
+  --color-primary-900: #0A1628;
+  --color-primary-600: #1E40AF;
+  --color-primary-400: #60A5FA;
+
+  /* Accent Colors */
+  --color-accent-500: #F59E0B;
+  --color-accent-300: #FCD34D;
+
+  /* Neutral Colors */
+  --color-neutral-900: #111827;
+  --color-neutral-700: #374151;
+  --color-neutral-500: #6B7280;
+  --color-neutral-300: #D1D5DB;
+  --color-neutral-100: #F3F4F6;
+
+  /* Background */
+  --color-bg-primary: #FFFFFF;
+  --color-bg-secondary: #F9FAFB;
+}
+\```
+
+## Spacing System
+- Base: 4px
+- Scale: 4, 8, 12, 16, 24, 32, 48, 64, 96px
+- Usage: Consistent 8px rhythm for most components
+
+## Component Specifications
+
+### Button (Primary)
+\```css
+.button-primary {
+  background: var(--color-primary-600);
+  color: white;
+  padding: 12px 24px;
+  border-radius: 8px;
+  font-weight: 600;
+  transition: background 200ms ease-out;
+}
+.button-primary:hover {
+  background: var(--color-primary-900);
+}
+\```
+
+### Card
+\```css
+.card {
+  background: white;
+  border-radius: 12px;
+  padding: 24px;
+  box-shadow: 0 4px 6px rgba(0,0,0,0.05);
+  transition: box-shadow 200ms ease-out;
+}
+.card:hover {
+  box-shadow: 0 10px 15px rgba(0,0,0,0.1);
+}
+\```
+
+## Motion Guidelines
+- Transition timing: 200ms for micro-interactions, 400ms for page transitions
+- Easing: ease-out for entrances, ease-in for exits
+- Stagger delay: 50ms between sequential elements
+```
+
+## Template 2: Competitive Analysis
+
+```markdown
+# Competitive Design Analysis
+
+## Competitors Analyzed
+1. Competitor A - [URL]
+2. Competitor B - [URL]
+3. Competitor C - [URL]
+
+## Comparative Summary
+
+| Aspect | Competitor A | Competitor B | Competitor C |
+|--------|--------------|--------------|--------------|
+| Aesthetic | Minimalist | Maximalist | Editorial |
+| Primary Color | #1E40AF | #7C3AED | #DC2626 |
+| Typography | Inter | Poppins | Playfair Display |
+| Layout | Grid-based | Asymmetric | Magazine |
+
+## Common Patterns (Industry Standard)
+- All use sans-serif for body text
+- All prioritize mobile-first responsive design
+- All use card-based layouts for content
+- All feature hero sections with large imagery
+
+## Differentiation Opportunities
+1. **Color Strategy**: Competitors use saturated colors; opportunity for muted, sophisticated palette
+2. **Typography**: No one uses display serifs; opportunity for elegant, high-end feel
+3. **Layout**: All symmetric; opportunity for asymmetric, dynamic composition
+
+## Recommendations
+Based on analysis, recommend:
+- Aesthetic: Refined minimalism with editorial typography
+- Color: Muted earth tones with one bold accent
+- Layout: Asymmetric grid with generous white space
+- Differentiation: Unexpected typography hierarchy, subtle animations
+```
+
+## Integration Workflow
+
+### After Extraction
+
+1. **Review & Validate**
+   - Manually verify color codes with eyedropper tool
+   - Cross-reference font predictions against Google Fonts
+   - Check spacing values against browser dev tools
+
+2. **Adapt & Customize**
+   - Don't copy—adapt principles to your unique context
+   - Maintain underlying logic, change expression
+   - Example: Extract "generous white space" principle, apply with your colors
+
+3. **Document Decisions**
+   - Save extracted guidelines in project `docs/design-guidelines/`
+   - Create design system spec from extraction
+   - Reference when generating new assets
+
+4. **Reference in Implementation**
+   - Use extracted tokens when generating new assets with `asset-generation.md`
+   - Apply extracted principles when analyzing your own designs with `visual-analysis.md`
+   - Maintain consistency between inspiration and implementation
+
+5. **Iterate & Refine**
+   - Update guidelines as design evolves
+   - Extract from multiple sources, synthesize learnings
+   - Create your own unique voice from combined insights

package/.opencode/skills/frontend-design/references/extraction-prompts.md

@@ -0,0 +1,127 @@
+# Extraction Prompt Templates
+
+Complete prompt templates for design guideline extraction.
+
+## Comprehensive Design Analysis Prompt
+
+```
+Extract comprehensive design guidelines from this interface:
+
+## Aesthetic Identification
+- Design Style: Identify the aesthetic movement (minimalism, brutalism, maximalism, glassmorphism, neo-brutalism, organic, luxury, editorial, etc.)
+- Overall Mood: Professional, playful, serious, energetic, calm, bold, refined
+- Differentiation Factor: What makes this design memorable and distinctive?
+
+## Typography System
+- Display Font: Predict font family (favor Google Fonts: Playfair Display, Bebas Neue, DM Serif, Archivo Black, etc.). Provide 2-3 alternatives if uncertain.
+- Body Font: Identify or suggest similar alternatives
+- Font Sizes: Estimate in px for h1, h2, h3, body, small text
+- Font Weights: Used weights (300, 400, 500, 600, 700)
+- Line Heights: Estimate leading ratios
+- Letter Spacing: Tight, normal, or wide tracking
+
+## Color System (CRITICAL)
+- Extract 8-12 distinct colors with accurate hex codes
+- Classify: Primary (1-2), Secondary (1-2), Accent (2-3), Neutral/Gray (3-5), Background (1-2)
+- Note color relationships and usage patterns
+- Identify gradients (provide start/end hex codes and direction)
+
+## Spatial Composition
+- Layout Type: Grid-based, asymmetric, centered, multi-column, magazine-style
+- Grid System: Estimate column count and gutter widths
+- Spacing Scale: Identify spacing rhythm (4px, 8px, 16px, 24px, etc.)
+- White Space Strategy: Generous, tight, varied
+- Section Hierarchy: How content is organized and prioritized
+
+## Visual Elements
+- Border Styles: Radius values (sharp, subtle rounded, fully rounded)
+- Shadows: Box-shadow characteristics (elevation, spread, blur)
+- Backgrounds: Solid, gradients, patterns, textures, images
+- Effects: Blur, overlays, transparency, grain, noise
+- Decorative Elements: Lines, shapes, illustrations, icons
+
+## Component Patterns
+- Button Styles: Shape, size, states, hover effects
+- Card Design: Borders, shadows, padding, content structure
+- Navigation: Style, position, behavior
+- Forms: Input styles, validation, spacing
+- Interactive Elements: Hover states, transitions
+
+## Motion & Animation (if video)
+- Transition Timing: Fast (100-200ms), medium (200-400ms), slow (400-600ms+)
+- Easing Functions: Linear, ease-out, ease-in, cubic-bezier specifics
+- Animation Types: Fade, slide, scale, rotate, stagger
+- Scroll Interactions: Parallax, reveal-on-scroll, sticky elements
+
+## Accessibility Considerations
+- Color Contrast: Evaluate text/background combinations
+- Font Sizes: Minimum sizes used
+- Interactive Targets: Button/link sizes
+- Visual Hierarchy: Clear content prioritization
+
+## Design Highlights
+- Top 3 standout design decisions
+- What makes this design effective
+- Potential improvements or considerations
+
+Output as structured markdown for easy reference.
+```
+
+## Multi-Screen System Extraction Prompt
+
+```
+Analyze these multiple screens to extract the consistent design system:
+
+For each screen:
+1. Identify consistent design tokens (colors, typography, spacing)
+2. Note variations and their rationale
+3. Extract reusable component patterns
+
+Then synthesize:
+- Core design system: Consistent colors, fonts, spacing scales
+- Component library: Buttons, cards, navigation, forms
+- Layout patterns: Grid systems, responsive behavior
+- Visual language: Shared aesthetic principles
+- Design tokens: Create CSS variable recommendations
+
+Provide as a unified design system specification.
+```
+
+## Motion Design Extraction Prompt
+
+```
+Analyze this video to extract motion design guidelines:
+
+1. Transition Timing: Measure duration of key animations (in ms)
+2. Easing Curves: Describe acceleration/deceleration (ease-in, ease-out, spring)
+3. Animation Types: List all animation styles used
+4. Micro-interactions: Button hovers, form focus states, feedback
+5. Page Transitions: How screens change
+6. Scroll Interactions: Parallax, sticky headers, reveal animations
+7. Loading States: Skeleton screens, spinners, progressive reveals
+8. Stagger Effects: Sequential animation delays and patterns
+
+Provide implementable specifications with timing values.
+```
+
+## Competitive Analysis Prompt
+
+```
+Comparative design analysis of 3 competitors:
+
+For each competitor:
+1. Design style and aesthetic approach
+2. Color strategy and brand perception
+3. Typography choices and hierarchy
+4. Layout and information architecture
+5. Unique design elements
+6. Strengths and weaknesses
+
+Synthesis:
+- Common industry patterns (what everyone does)
+- Differentiation opportunities (gaps to exploit)
+- Best practices observed (proven approaches)
+- Design recommendations (how to stand out)
+
+Provide strategic design direction based on analysis.
+```

package/.opencode/skills/frontend-design/references/magicui-components.md

@@ -0,0 +1,129 @@
+# Magic UI - Component Library Reference
+
+> Beautifully designed landing page components built with React & Tailwind CSS. 80+ components.
+> Docs: https://magicui.design | Repo: https://github.com/magicuidesign/magicui
+
+## Installation
+
+```bash
+npx magicui-cli add <component-name>
+```
+
+## Component Categories
+
+### Text Effects
+| Component | Description | Docs |
+|-----------|-------------|------|
+| Animated Gradient Text | Gradient transitions for text | [docs](https://magicui.design/docs/components/animated-gradient-text) |
+| Animated Shiny Text | Light glare shimmer on text | [docs](https://magicui.design/docs/components/animated-shiny-text) |
+| Aurora Text | Aurora borealis text effect | [docs](https://magicui.design/docs/components/aurora-text) |
+| Comic Text | Comic-style text animation | [docs](https://magicui.design/docs/components/comic-text) |
+| Hyper Text | Scramble-then-reveal animation | [docs](https://magicui.design/docs/components/hyper-text) |
+| Line Shadow Text | Moving line shadow on text | [docs](https://magicui.design/docs/components/line-shadow-text) |
+| Morphing Text | Dynamic text morphing | [docs](https://magicui.design/docs/components/morphing-text) |
+| Sparkles Text | Continuous sparkle animation | [docs](https://magicui.design/docs/components/sparkles-text) |
+| Spinning Text | Circular motion text | [docs](https://magicui.design/docs/components/spinning-text) |
+| Text Animate | Multiple text animation types | [docs](https://magicui.design/docs/components/text-animate) |
+| Text Reveal | Fade-in on scroll | [docs](https://magicui.design/docs/components/text-reveal) |
+| Typing Animation | Typewriter effect | [docs](https://magicui.design/docs/components/typing-animation) |
+| Video Text | Video background in text | [docs](https://magicui.design/docs/components/video-text) |
+| Word Rotate | Vertical word rotation | [docs](https://magicui.design/docs/components/word-rotate) |
+| Highlighter | Marker-stroke highlight | [docs](https://magicui.design/docs/components/highlighter) |
+
+### Buttons
+| Component | Description | Docs |
+|-----------|-------------|------|
+| Shimmer Button | Light travels along perimeter | [docs](https://magicui.design/docs/components/shimmer-button) |
+| Shiny Button | Dynamic shiny effect | [docs](https://magicui.design/docs/components/shiny-button) |
+| Pulsating Button | Attention-capturing pulse | [docs](https://magicui.design/docs/components/pulsating-button) |
+| Rainbow Button | Rainbow color animation | [docs](https://magicui.design/docs/components/rainbow-button) |
+| Ripple Button | Click ripple effect | [docs](https://magicui.design/docs/components/ripple-button) |
+| Interactive Hover Button | Hover interaction | [docs](https://magicui.design/docs/components/interactive-hover-button) |
+
+### Backgrounds & Patterns
+| Component | Description | Docs |
+|-----------|-------------|------|
+| Grid Pattern | SVG grid, customizable | [docs](https://magicui.design/docs/components/grid-pattern) |
+| Animated Grid Pattern | Animated SVG grid | [docs](https://magicui.design/docs/components/animated-grid-pattern) |
+| Interactive Grid Pattern | Mouse-interactive grid | [docs](https://magicui.design/docs/components/interactive-grid-pattern) |
+| Dot Pattern | SVG dots background | [docs](https://magicui.design/docs/components/dot-pattern) |
+| Striped Pattern | SVG stripes background | [docs](https://magicui.design/docs/components/striped-pattern) |
+| Flickering Grid | Flickering cells grid | [docs](https://magicui.design/docs/components/flickering-grid) |
+| Retro Grid | Animated scrolling retro grid | [docs](https://magicui.design/docs/components/retro-grid) |
+| Warp Background | Time-warping effect | [docs](https://magicui.design/docs/components/warp-background) |
+| Particles | Interactive particle system | [docs](https://magicui.design/docs/components/particles) |
+| Light Rays | Animated light rays from above | [docs](https://magicui.design/docs/components/light-rays) |
+
+### Cards & Borders
+| Component | Description | Docs |
+|-----------|-------------|------|
+| Magic Card | Spotlight follows cursor | [docs](https://magicui.design/docs/components/magic-card) |
+| Neon Gradient Card | Neon glow effect | [docs](https://magicui.design/docs/components/neon-gradient-card) |
+| Border Beam | Animated light along border | [docs](https://magicui.design/docs/components/border-beam) |
+| Shine Border | Animated shine border | [docs](https://magicui.design/docs/components/shine-border) |
+
+### Layout & Navigation
+| Component | Description | Docs |
+|-----------|-------------|------|
+| Bento Grid | Feature showcase grid | [docs](https://magicui.design/docs/components/bento-grid) |
+| Dock | macOS-style dock | [docs](https://magicui.design/docs/components/dock) |
+| Marquee | Infinite scroll (text/images) | [docs](https://magicui.design/docs/components/marquee) |
+| File Tree | Directory structure display | [docs](https://magicui.design/docs/components/file-tree) |
+| Terminal | Terminal mockup | [docs](https://magicui.design/docs/components/terminal) |
+
+### Animated Effects
+| Component | Description | Docs |
+|-----------|-------------|------|
+| Animated Beam | Light beam along path | [docs](https://magicui.design/docs/components/animated-beam) |
+| Animated List | Sequential item animation | [docs](https://magicui.design/docs/components/animated-list) |
+| Blur Fade | Smooth blur fade-in/out | [docs](https://magicui.design/docs/components/blur-fade) |
+| Confetti | Celebration animations | [docs](https://magicui.design/docs/components/confetti) |
+| Cool Mode | Fun click particle effect | [docs](https://magicui.design/docs/components/cool-mode) |
+| Meteors | Meteor shower effect | [docs](https://magicui.design/docs/components/meteors) |
+| Number Ticker | Count up/down animation | [docs](https://magicui.design/docs/components/number-ticker) |
+| Orbiting Circles | Orbital motion circles | [docs](https://magicui.design/docs/components/orbiting-circles) |
+| Ripple | Background ripple emphasis | [docs](https://magicui.design/docs/components/ripple) |
+| Scroll Based Velocity | Speed-reactive scroll text | [docs](https://magicui.design/docs/components/scroll-based-velocity) |
+| Scroll Progress | Page scroll indicator | [docs](https://magicui.design/docs/components/scroll-progress) |
+| Progressive Blur | Blur gradient for scroll | [docs](https://magicui.design/docs/components/progressive-blur) |
+| Smooth Cursor | Physics-based cursor | [docs](https://magicui.design/docs/components/smooth-cursor) |
+| Pointer | Hover pointer indicator | [docs](https://magicui.design/docs/components/pointer) |
+
+### Device Mockups
+| Component | Description | Docs |
+|-----------|-------------|------|
+| Android | Android device mockup | [docs](https://magicui.design/docs/components/android) |
+| iPhone | iPhone mockup | [docs](https://magicui.design/docs/components/iphone) |
+| Safari | Safari browser mockup | [docs](https://magicui.design/docs/components/safari) |
+
+### Data Display
+| Component | Description | Docs |
+|-----------|-------------|------|
+| Globe | WebGL interactive globe | [docs](https://magicui.design/docs/components/globe) |
+| Icon Cloud | 3D interactive tag cloud | [docs](https://magicui.design/docs/components/icon-cloud) |
+| Animated Circular Progress | Circular gauge | [docs](https://magicui.design/docs/components/animated-circular-progress-bar) |
+| Dotted Map | Map with dot markers | [docs](https://magicui.design/docs/components/dotted-map) |
+| Pixel Image | Pixelated image effect | [docs](https://magicui.design/docs/components/pixel-image) |
+| Lens | Zoom into images/videos | [docs](https://magicui.design/docs/components/lens) |
+
+### Social & Media
+| Component | Description | Docs |
+|-----------|-------------|------|
+| Tweet Card | Display tweet embed | [docs](https://magicui.design/docs/components/tweet-card) |
+| Client Tweet Card | Client-side tweet card | [docs](https://magicui.design/docs/components/client-tweet-card) |
+| Avatar Circles | Overlapping avatar stack | [docs](https://magicui.design/docs/components/avatar-circles) |
+| Hero Video Dialog | Video dialog for hero | [docs](https://magicui.design/docs/components/hero-video-dialog) |
+| Code Comparison | Side-by-side code diff | [docs](https://magicui.design/docs/components/code-comparison) |
+| Theme Toggler | Animated theme switch | [docs](https://magicui.design/docs/components/animated-theme-toggler) |
+
+## Usage Pattern
+
+For docs lookup, use `docs-seeker` skill with Context7:
+```
+context7 query: "magicui <component-name> usage example"
+```
+
+For source code examples, fetch from GitHub:
+```
+https://github.com/magicuidesign/magicui/blob/main/example/<component>-demo.tsx
+```

package/.opencode/skills/frontend-design/references/performance-guardrails.md

@@ -0,0 +1,169 @@
+# Performance Guardrails
+
+Rules for maintaining smooth animation and rendering performance. These prevent the most common causes of mobile frame drops and layout thrashing.
+
+---
+
+## GPU-Safe Animations
+
+**Only animate these properties:**
+- `transform` (translate, scale, rotate)
+- `opacity`
+
+**Never animate:**
+- `top`, `left`, `right`, `bottom` — triggers layout reflow
+- `width`, `height` — triggers layout + paint
+- `margin`, `padding` — triggers layout
+- `background-color` — triggers paint (acceptable for color transitions, but avoid on frequently animating elements)
+
+**Why:** CSS `transform` and `opacity` are composited on the GPU and don't trigger layout or paint. All other properties cause the browser to recalculate layout on every frame — catastrophic on mobile.
+
+```css
+/* Good */
+.card { transform: translateY(0); transition: transform 300ms; }
+.card:hover { transform: translateY(-4px); }
+
+/* Bad */
+.card { top: 0; transition: top 300ms; }
+.card:hover { top: -4px; }
+```
+
+---
+
+## Blur Constraints
+
+**Apply `backdrop-blur` only to:**
+- Fixed-position elements (sticky navbars, overlays)
+- Modals and dialogs
+- Elements that don't scroll with content
+
+**Never apply blur to:**
+- Scrolling containers
+- Large content areas
+- Elements inside `overflow: auto/scroll` parents
+
+**Why:** `backdrop-blur` triggers continuous GPU compositing on every scroll frame. On a scrolling container with 20+ cards, this causes severe frame drops on mid-range and low-end mobile.
+
+```css
+/* Good — fixed nav */
+.navbar { position: fixed; backdrop-filter: blur(12px); }
+
+/* Bad — scrolling card list */
+.card-list .card { backdrop-filter: blur(8px); } /* kills mobile perf */
+```
+
+---
+
+## Grain and Noise Overlays
+
+**Correct implementation:**
+```css
+/* Fixed, pointer-events-none pseudo-element only */
+body::after {
+  content: '';
+  position: fixed;
+  inset: 0;
+  z-index: 50;
+  pointer-events: none;
+  background-image: url("data:image/svg+xml,..."); /* or CSS noise */
+  opacity: 0.03;
+}
+```
+
+**Never attach grain/noise to:**
+- Scrolling containers
+- Individual cards or sections
+- Any element with `position: relative` inside a scroll context
+
+---
+
+## Z-Index Discipline
+
+**Use systemic layers only. Establish a scale in your theme/variables:**
+
+```css
+:root {
+  --z-base: 0;
+  --z-card: 10;
+  --z-sticky: 100;
+  --z-overlay: 200;
+  --z-modal: 300;
+  --z-tooltip: 400;
+  --z-notification: 500;
+}
+```
+
+**Never:**
+- Use arbitrary values like `z-[9999]` or `z-50` unprompted
+- Stack z-indexes without a documented reason
+- Use z-index to fix stacking without understanding the stacking context
+
+---
+
+## Framer Motion Performance
+
+**Use `useMotionValue` + `useTransform` for continuous animations:**
+```jsx
+// Good — runs outside React render cycle
+const mouseX = useMotionValue(0);
+const rotateY = useTransform(mouseX, [-300, 300], [-15, 15]);
+
+// Bad — triggers re-render on every mouse move
+const [rotation, setRotation] = useState(0);
+```
+
+**For perpetual/infinite animations:**
+- Wrap in `React.memo` to prevent parent re-renders
+- Extract as isolated leaf client components
+- Use `<AnimatePresence>` for enter/exit — don't conditionally render without it
+
+**For scroll-driven reveals:**
+- Use `whileInView` or `IntersectionObserver`
+- Never use `window.addEventListener('scroll')` — causes continuous reflows
+
+**For staggered children:**
+- Parent `variants` and children MUST be in the same Client Component tree
+- If data is async, pass it as props into a centralized parent motion wrapper
+
+---
+
+## RSC Safety (Next.js)
+
+- Global state (Context, providers) works **only** in Client Components
+- Wrap providers in a `"use client"` component
+- If a section uses Framer Motion or any interactive hook, extract it as an isolated leaf component with `'use client'` at the top
+- Server Components render static layout only
+
+---
+
+## Mobile Override Rules
+
+For any asymmetric or complex layout, apply aggressive mobile fallback below 768px:
+
+```jsx
+// All asymmetric layouts collapse to single column
+<div className="grid grid-cols-1 md:grid-cols-[2fr_1fr_1fr] gap-6">
+```
+
+- Remove all rotations, negative margins, and overlaps below `md:`
+- Replace `h-screen` with `min-h-[100dvh]` — prevents iOS Safari viewport jumping
+- Never use `overflow: hidden` on `html`/`body` without testing on actual mobile
+- Test horizontal scroll — asymmetric layouts often cause unintentional x-overflow on small screens
+
+---
+
+## `will-change` Guidance
+
+Use sparingly. `will-change: transform` tells the browser to promote the element to its own GPU layer:
+
+- Apply only to elements that are **actively animating**
+- Remove after animation completes (or use `:hover` scoping)
+- Never apply globally — creates excessive GPU memory pressure
+
+```css
+/* Good — scoped to hover state */
+.card:hover { will-change: transform; }
+
+/* Bad — always promoted */
+.card { will-change: transform; }
+```

package/.opencode/skills/frontend-design/references/premium-design-patterns.md

@@ -0,0 +1,93 @@
+# Premium Design Patterns: Creative Arsenal
+
+Pull from this library to avoid defaulting to generic UI. These patterns make interfaces visually striking and memorable.
+
+> Framework note: Examples mention Framer Motion as an option for JS-driven patterns. GSAP/ThreeJS are alternatives for scroll storytelling. Never mix both in the same component tree.
+
+---
+
+## Vibe Archetypes (Pick One Before Designing)
+
+Before writing code, commit to a vibe:
+
+1. **Ethereal Glass** (SaaS / AI / Tech) — Deep OLED black `#050505`, radial mesh gradient orbs in background, vantablack cards with heavy `backdrop-blur-2xl`, wide geometric Grotesk typography
+2. **Editorial Luxury** (Lifestyle / Real Estate / Agency) — Warm creams `#FDFBF7`, muted sage, or deep espresso. Variable serif for massive headings, subtle CSS noise/film-grain overlay for a physical paper feel
+3. **Soft Structuralism** (Consumer / Health / Portfolio) — Silver-grey or pure white background, massive bold Grotesk, airy floating components with highly diffused ambient shadows
+
+---
+
+## Navigation
+
+- **Mac Dock Magnification** — Nav icons scale fluidly on hover with spring physics
+- **Magnetic Button** — Buttons physically pull toward the cursor using `useMotionValue` + `useTransform`
+- **Gooey Menu** — Sub-items detach from main button like viscous liquid
+- **Dynamic Island** — Pill-shaped component that morphs to show status/alerts
+- **Fluid Island Nav** — Floating glass pill detached from top (`mt-6`, `mx-auto`, `rounded-full`). On mobile: hamburger lines fluidly rotate to form an X
+- **Contextual Radial Menu** — Circular menu expanding at click coordinates
+- **Mega Menu Reveal** — Full-screen dropdowns that stagger-fade complex content
+- **Floating Speed Dial** — FAB that springs into a curved line of secondary actions
+
+## Layout and Grids
+
+- **Asymmetrical Bento** — Masonry-like CSS Grid with varying card sizes (`col-span-8 row-span-2` next to stacked `col-span-4` cards). Falls back to `grid-cols-1` on mobile
+- **Z-Axis Cascade** — Elements stacked like physical cards with slight overlap and varying depths. Remove rotations below 768px
+- **Editorial Split** — Massive typography on left half, scrollable image pills or staggered cards on right
+- **Split Screen Scroll** — Two halves of the screen sliding in opposite directions on scroll
+- **Curtain Reveal** — Hero section parting in the middle like a curtain on scroll
+- **Masonry Layout** — Staggered grid without fixed row heights (Pinterest-style)
+- **Chroma Grid** — Grid borders or tiles with subtle, continuously animating color gradients
+
+## Cards and Containers
+
+- **Double-Bezel (Doppelrand)** — Cards that look like machined hardware: outer shell (`bg-black/5`, `ring-1 ring-black/5`, `p-1.5`, `rounded-[2rem]`) wrapping an inner core with its own highlight and concentric radius (`rounded-[calc(2rem-0.375rem)]`)
+- **Parallax Tilt Card** — 3D-tilting card tracking mouse coordinates
+- **Spotlight Border Card** — Card borders that illuminate dynamically under the cursor
+- **Glassmorphism Panel** — True frosted glass: `backdrop-blur` + 1px inner border (`border-white/10`) + inner shadow (`shadow-[inset_0_1px_0_rgba(255,255,255,0.1)]`) to simulate edge refraction
+- **Holographic Foil Card** — Iridescent rainbow reflections shifting on hover
+- **Tinder Swipe Stack** — Physical stack of cards the user can swipe away
+- **Morphing Modal** — Button that seamlessly expands into a full-screen dialog
+
+## Scroll Animations
+
+- **Sticky Scroll Stack** — Cards that stick to top and physically stack over each other during scroll
+- **Horizontal Scroll Hijack** — Vertical scroll translates into smooth horizontal gallery pan
+- **Zoom Parallax** — Central background image zooming in/out seamlessly as you scroll
+- **Scroll Progress Path** — SVG lines that draw themselves as user scrolls
+- **Staggered Entry** — Elements cascade in with slight delays, Y-translation + opacity fade. Use `staggerChildren` in Framer Motion or CSS `animation-delay: calc(var(--index) * 100ms)`. Never mount everything at once
+
+## Galleries and Media
+
+- **Coverflow Carousel** — 3D carousel with center focused, edges angled back
+- **Drag-to-Pan Grid** — Boundless grid freely draggable in any direction
+- **Accordion Image Slider** — Narrow strips that expand fully on hover
+- **Hover Image Trail** — Mouse leaves a trail of popping/fading images
+- **Glitch Effect Image** — Brief RGB-channel shift digital distortion on hover
+- **Dome Gallery** — 3D gallery with panoramic dome feel
+
+## Typography and Text
+
+- **Kinetic Marquee** — Endless text bands that reverse direction or speed up on scroll
+- **Text Mask Reveal** — Massive typography as a transparent window to video background
+- **Text Scramble Effect** — Matrix-style character decoding on load or hover
+- **Variable Font Animation** — Interpolate weight/width on scroll or hover for text that feels alive
+- **Outlined-to-Fill Transition** — Text starts as stroke outline, fills with color on scroll entry
+- **Circular Text Path** — Text curved along a spinning circular path
+- **Kinetic Typography Grid** — Grid of letters that dodge or rotate away from cursor
+
+## Micro-Interactions
+
+- **Button-in-Button Trailing Icon** — Arrow icon nested inside its own circular wrapper (`w-8 h-8 rounded-full bg-black/5`) flush with button's inner right padding. Never a naked icon next to text
+- **Particle Explosion Button** — CTAs shatter into particles on success
+- **Directional Hover-Aware Button** — Hover fill enters from the exact side the mouse came from
+- **Ripple Click Effect** — Visual waves rippling precisely from click coordinates
+- **Skeleton Shimmer** — Shifting light reflections across placeholder boxes. Match layout shape exactly
+- **Tactile Press Feedback** — On `:active`, use `scale(0.98)` or `translateY(1px)` to simulate physical push
+- **Eyebrow Tags** — Microscopic pill badge before major headings (`rounded-full px-3 py-1 text-[10px] uppercase tracking-[0.2em]`)
+
+## Surfaces and Effects
+
+- **Grain/Noise Overlay** — Fixed `pointer-events-none` pseudo-element at `z-50`. Never on scrolling containers
+- **Colored Tinted Shadows** — Shadows carry background hue instead of generic black
+- **Mesh Gradient Background** — Organic, lava-lamp-like animated color blobs
+- **Lens Blur Depth** — Dynamic focus blurring background layers to highlight foreground action
+- **Animated SVG Line Drawing** — Vectors draw their own contours in real-time