94 lines
6.4 KiB
Markdown
94 lines
6.4 KiB
Markdown
# 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
|