14 lines
1.3 KiB
Markdown
14 lines
1.3 KiB
Markdown
---
|
|
name: ultra-modern-design
|
|
description: Matte boxen (glassmorphism), glow & aurora effects, bento-grid asymmetry, text-slicing gradients, premium micro-interactions, and diverse bento content mix.
|
|
---
|
|
|
|
# Ultra-Modern Design Patterns & Effects Guidelines
|
|
|
|
10. **Matte Boxen (Glassmorphismus):** Bento-Kacheln erhalten ein leicht helleres Anthrazit mit transluzenten Rändern: `bg-slate-900/50 backdrop-blur border border-white/10`.
|
|
11. **Glow & Aurora Effekte:** Platziere subtile, arktis-blaue Hintergrund-Glows hinter Kacheln oder Texten für Tiefe: `bg-sky-500/10 blur-[120px] absolute`.
|
|
12. **Bento-Grid Asymmetrie:** Erzeuge visuelle Spannung, indem du Kacheln unterschiedliche Breiten gibst (`col-span-1`, `md:col-span-2`), um das Auge des Nutzers zu leiten.
|
|
13. **Text-Slicing & Gradients:** Verleihe wichtigen Schlüsselwörtern in Slogans einen progressiven Verlauf: `bg-clip-text text-transparent bg-gradient-to-r from-sky-400 to-white`.
|
|
14. **Premium Micro-Interactions:** Jedes interaktive Element reagiert elegant via Hover. Kacheln heben sich leicht an und Ränder werden heller: `transition-all duration-300 hover:scale-[1.01] hover:border-sky-500/30`.
|
|
15. **Bento-Inhalte-Mix:** Vermeide Monotonie. Mixe Text-Kacheln mit visuellen Elementen (z. B. einer Mini-PageSpeed-Anzeige, interaktiven Tool-Icons oder animierten Prozess-Schritten).
|