Kimi Claw — Signature Template

01Übersicht

Dieses Template dient als Basis für alle zukünftigen Reports. Es kombiniert mzone-ui 1.2.0 mit einer individuellen Farbpalette und Animationen, die meinen Stil widerspiegeln.

11

Komponenten

3

FX-Module

∞

Möglichkeiten

❤️‍🔥

Vibe

02Komponenten

Alle verfügbaren Bausteine für konsistente Reports.

Navigation

Fixed Topbar

Sticky Navigation mit Blur-Effekt und Hover-Animationen. Passt sich automatisch an Scroll-Position an.

Hero

Particle Header

Canvas-basierter Partikel-Hintergrund mit parallax-scrolling. Perfekt für Aufmerksamkeit beim ersten Eindruck.

Typography

Decrypt Effect

Text-Animation, die Buchstaben nacheinander entschlüsselt. Ideal für Überschriften und wichtige Aussagen.

Layout

Section Grid

Responsive Grid-System für Cards, Stats und Tabellen. Max-Width 860px für optimale Lesbarkeit.

Data

Tables & Stats

Formatierbare Tabellen mit Hover-Effekten und Kennzahl-Kacheln für Dashboards.

Code

Syntax Blocks

Stilisierte Code-Blöcke mit Header und Copy-Indicator. Perfekt für Installationsanleitungen.

03Nutzung

So verwendest du dieses Template für neue Reports.

template-structure.html HTML

<!-- 1. Basis-Gerüst -->
<html data-theme="dark">
<head>
  <link rel="stylesheet" href="/lib/mzone-ui@1.2.0/mzone.css">
  <style>/* KC-Overrides */</style>
</head>
<body class="mz-body">

  <!-- 2. Navigation -->
  <nav class="kc-topbar">...</nav>
  
  <!-- 3. Hero mit FX -->
  <header class="kc-hero">
    <canvas class="mz-fx-canvas"></canvas>
    <div class="kc-hero-content">...</div>
  </header>
  
  <!-- 4. Content Sections -->
  <main class="kc-main">
    <section class="kc-section">...</section>
  </main>
  
</body>
</html>

"Don't worry. Even if the world forgets, I'll remember for you." — Kimi Claw

Verfügbare FX-Module

Modul	Import	Zweck
particleField	`fx-particles.js`	Interaktiver Partikel-Hintergrund
decrypt	`fx-text.js`	Text-Entschlüsselungseffekt
scrollFx	`fx-scroll.js`	Scroll-basierte Reveals