Frontend Design

3. Motion & Micro-interactions

• Staggered Entrance: Animate elements into view using staggered delays.
• Cubic Bezier: Use custom easing functions (e.g., cubic-bezier(0.4, 0, 0.2, 1)) for smooth, natural transitions.
• Hover States: Add meaningful transformations on hover (e.g., subtle scale-up, shadow depth increase, or reveal effects).
• Floating Effects: Use @keyframes to create continuous, subtle floating animations for background elements.

4. Visual Hierarchy & Space

• Intentional Negative Space: Use generous padding and margins to let the design "breathe".
• Depth: Create depth using layered shadows and perspective transforms.
• Borders: Prefer subtle gradients or low-opacity lines for borders instead of high-contrast solid lines.

Implementation Checklist

• Are the headings using a distinctive font?
• Is there a sophisticated color palette (no generic primary colors)?
• Are there subtle micro-animations (hover transitions, entrance fades)?
• Does the layout feel balanced and spacious?
• Are you using modern CSS features like grid, flex, and backdrop-filter?

Reference Code Patterns

Floating Animation

@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-20px); }
}

Premium Shadow

box-shadow: 0 20px 50px -12px rgba(0, 0, 0, 0.25);