Über diese Vorlage
Mind AI ist die Referenz (Landingpage) für dieses Publikum, also für ein Gesundheits- oder Wellness-Produkt. Das Briefing dahinter ist eine vollständige Bauvorgabe statt eines Moodboards. Farbe bleibt auf #F6EAF2 darunter, #000000 für die Schrift und indigo #A069C9 für die Akzente begrenzt, gesetzt in Questrial. Geliefert wird eine eigenständige HTML-Datei, erfasst bei 1920x1414, damit der Rahmen feststeht, bevor die erste Zeile Code entsteht. Die Bewegung kommt über Übergänge von 4.042s, cubic-bezier(.16,1.3,1) und eine Videospur in Schleife nicht hinaus. Lass es beim Schreiben offen: Die 37.004 Zeichen Briefing sind der Teil, der sich auf deine Seite überträgt.
Gemacht für
- Teams, die Landingpage-Designs für ein Gesundheits- oder Wellness-Produkt bauen und Easing cubic-bezier(.16,1.3,1) schriftlich festhalten wollen, bevor ein Angebot rausgeht.
- Wenn der Build auf eine eigenständige HTML-Datei aufsetzt, übernimm zuerst Schrift von 14px bis 28px und 100vh hohe Sektionen und lass die Palette in Ruhe, bis das Raster steht.
- Die Seite richtet sich an Frontend-Entwickler, die ein Landingpage-Design für ein Gesundheits- oder Wellness-Produkt in eine eigenständige HTML-Datei nachbauen und die Zahlen hinter der Optik suchen.
Was enthalten ist
- Zurückhaltende Navigation. Wortmarke, Links und die Aktion in #A069C9 teilen eine Grundlinie, was eine dünne Zeile nicht zufällig wirken lässt. Unter 520px klappen die Links ein, statt in eine zweite Zeile umzubrechen.
- Video in der untersten Ebene. Ein Clip von 5s bei 1920x1414 macht die atmosphärische Arbeit; das Briefing legt den Zuschnitt fest und lässt die Schrift darüber unangetastet. Das Poster bei 1920x1414 trägt die Komposition, wenn Autoplay nicht verfügbar ist, damit das Layout nicht zusammenfällt. Exportiere bei 1920x1414 oder breiter, damit der Zuschnitt ehrlich bleibt.
- Fließend, wo es nötig ist. Das Briefing nutzt eine Größe zwischen 14px und 28px für die Headline, und das verhindert, dass eine lange Zeile unschön umbricht. Bedienelemente bleiben groß genug zum Tippen, und der Text behält seine Lesereihenfolge bei jeder Breite.
- Eine Zeile, keine Schubladen. Die Leiste besteht aus wenigen Elementen und lässt sich ohne Komponentenbibliothek nachbauen. Die Referenz wurde mit 1920x1414 erfasst.
Bewegung & Interaktion
Die Schleife übernimmt die Grundbewegung
Die Hintergrundbewegung kommt aus der 5s-Schleife in 1920x1414 und nicht aus Scroll-Effekten, deshalb bleibt die Seite ruhig und die Schrift lesbar. Der Clip ist stumm und inline, das erste Bild ist also ohne Interaktion verfügbar.
Die Canvas ist das Bild
Das Bild entsteht zur Laufzeit (ein WebGL-Canvas) und wird nicht als Standbild geladen, der Rahmen mit 1920x1414 braucht dadurch ein Asset weniger. Weil die Szene live ist, lässt sich das Layout ohne einen zweiten Satz Assets skalieren.
Wie der Eintrag Landingpage umbricht
Test den Eintrag Landingpage bei 1920x1414 und dann in Telefonbreite: Dieselbe Reihenfolge hält; die Schrift ist zwischen 14px und 28px begrenzt, das Layout wechselt bei 520px und der Bereich wird auf 100vh gehalten. Das schmale Layout ist eine Entscheidung und keine Quetschung, und die Hierarchie übersteht sie.
Was ein Gesundheits- oder Wellness-Produkt hier gewinnt
Mind AI ist als Landingpage die Referenz für ein Gesundheits- oder Wellness-Produkt und beantwortet genau das Problem dieser Nutzer. Die Palette bleibt diszipliniert (#F6EAF2 und indigo #A069C9), und die Schrift steht in Questrial; nichts in der Komposition hängt also an einem aufgegriffenen Trend. Für ein Briefing lohnt sich dieser Teil zum Nachbauen: ein Versprechen in Display-Größe, alles Stützende darunter. Es gibt einem Leser im Bereich Gesundheit den kürzesten ehrlichen Weg zum Angebot.
Die Reihenfolge im Eintrag Landingpage
Eine strenge Reihenfolge kostet später Flexibilität. Kommt eine Sektion über den Fold, müssen Schrift von 14px bis 28px und 100vh hohe Sektionen neu geschnitten werden, weil die Abfolge tragend ist und nicht dekorativ. Ein Leser im Bereich Gesundheit bekommt das Angebot vor den Optionen.
Häufige Fragen
Wie viel von Mind AI hängt von eine eigenständige HTML-Datei ab?
Mind AI wurde in eine eigenständige HTML-Datei gebaut, und der Eintrag nennt das, um die Herkunft zu belegen. Das Briefing beschreibt Positionen, Größen und Zeitwerte, also lässt sich die Seite in jedem Framework nachbauen, das Schrift setzen und Elemente platzieren kann.
Was steht eigentlich im Briefing hinter Mind AI?
Das Briefing beschreibt den Bau, nicht die Stimmung: Es nennt die Komposition bei 1920x1414, die Abstände und die Bewegungswerte. Das gerenderte Bild dient darin an keiner Stelle als verbindliche Grundlage.
Wie viel von Mind AI ist animiert?
Auftritte und Zustandswechsel liegen im Bereich von 4.042s auf cubic-bezier(.16,1.3,1) mit einem Reduced-Motion-Zweig im Briefing. Sie hängen an Zustandswechseln statt an einer Scroll-Bibliothek und halten die Texte nie auf.
