@hienlh/ppm 0.9.81 → 0.9.82

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

@@ -1,162 +0,0 @@
-# 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

@@ -1,127 +0,0 @@
-# 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

@@ -1,129 +0,0 @@
-# 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

@@ -1,169 +0,0 @@
-# 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

@@ -1,93 +0,0 @@
-# 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