PixelPilot uiux-interactive.instructions.md

UI/UX Interactive Components 2026

Covers: image shape variants, mega-menu dropdowns (Tesla-style), navbar variants, custom selects/dropdowns/droptops, date & time pickers, toggles, and button systems — all per design language. No generic browser defaults anywhere.

STEP 27 — Image Shape Variants (Anti-flat, Unique Frames)

Rule: Never use only square images. Mix shapes per design language for visual rhythm. Each shape uses clip-path or border-radius — no extra wrapper divs needed.

Shape Library

/* ── BASIC ─────────────────────────────────────────── */
.img-square   { border-radius: 0; }
.img-rounded  { border-radius: var(--radius-lg); }
.img-pill     { border-radius: 9999px; }
.img-circle   { border-radius: 50%; aspect-ratio: 1; object-fit: cover; }

/* ── GEOMETRIC ──────────────────────────────────────── */
.img-hexagon {
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  aspect-ratio: 1; object-fit: cover;
}
.img-diamond {
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
  aspect-ratio: 1; object-fit: cover;
}
.img-triangle {
  clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
  aspect-ratio: 1; object-fit: cover;
}
.img-pentagon {
  clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%);
  aspect-ratio: 1; object-fit: cover;
}
.img-star {
  clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%,
                     50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
  aspect-ratio: 1; object-fit: cover;
}
.img-arch {
  border-radius: 999px 999px 0 0;
  aspect-ratio: 3/4; object-fit: cover;
}
.img-arch-bottom {
  border-radius: 0 0 999px 999px;
  aspect-ratio: 3/4; object-fit: cover;
}
.img-squircle {
  border-radius: 30%;
  aspect-ratio: 1; object-fit: cover;
}

/* ── ORGANIC / BLOB ─────────────────────────────────── */
/* Each blob is unique — use different ones for variety */
.img-blob-1 {
  clip-path: polygon(
    30% 0%, 70% 0%, 100% 30%, 100% 70%,
    70% 100%, 30% 100%, 0% 70%, 0% 30%
  );
  border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
  aspect-ratio: 1; object-fit: cover;
}
.img-blob-2 {
  border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
  aspect-ratio: 1; object-fit: cover;
}
.img-blob-3 {
  border-radius: 70% 30% 30% 70% / 70% 70% 30% 30%;
  aspect-ratio: 1; object-fit: cover;
}

/* Animate blob on hover for expressive/warm */
.img-blob-animated {
  border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
  transition: border-radius 1.2s var(--ease-luxury);
  aspect-ratio: 1; object-fit: cover;
}
.img-blob-animated:hover {
  border-radius: 30% 70% 70% 30% / 70% 30% 30% 70%;
}

/* ── EDITORIAL / POLAROID ────────────────────────────── */
.img-polaroid {
  padding: 12px 12px 40px;
  background: white;
  box-shadow: var(--shadow-md);
  border-radius: 2px;
  transform: rotate(-1.5deg);
  transition: transform var(--transition-base);
  display: inline-block;
}
.img-polaroid:hover { transform: rotate(0deg) scale(1.02); }
.img-polaroid img  { width: 100%; display: block; }

/* ── FRAME BORDER VARIANTS ──────────────────────────── */
.img-framed {
  padding: 6px;
  border: 2px solid var(--accent);
  border-radius: var(--radius-md);
}
.img-framed-offset {
  position: relative;
}
.img-framed-offset::after {
  content: '';
  position: absolute;
  inset: -8px;
  border: 2px solid var(--accent);
  border-radius: var(--radius-md);
  pointer-events: none;
  transition: inset var(--transition-base);
}
.img-framed-offset:hover::after { inset: -12px; }