renolation/english
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
1736b8a68f5e558c724bfdff28c2efca34967320
english/.opencode/skills/frontend-design/references/premium-design-patterns.md
renolation 10d660cbcb init
2026-04-12 01:06:31 +07:00

6.4 KiB
Raw Blame History

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