1.3 KiB
1.3 KiB
name, description
| name | description |
|---|---|
| ultra-modern-design | 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
- Matte Boxen (Glassmorphismus): Bento-Kacheln erhalten ein leicht helleres Anthrazit mit transluzenten Rändern:
bg-slate-900/50 backdrop-blur border border-white/10. - Glow & Aurora Effekte: Platziere subtile, arktis-blaue Hintergrund-Glows hinter Kacheln oder Texten für Tiefe:
bg-sky-500/10 blur-[120px] absolute. - 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. - 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. - 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. - Bento-Inhalte-Mix: Vermeide Monotonie. Mixe Text-Kacheln mit visuellen Elementen (z. B. einer Mini-PageSpeed-Anzeige, interaktiven Tool-Icons oder animierten Prozess-Schritten).