Über diese Vorlage
Task Engine ist eine brauchbare Referenz für dieses Publikum: die Komposition (Landingpage), ausgelegt für eine E-Commerce-Marke, vermessen und bereit zum Nachbauen. Die Palette umfasst weiß #F0F0F0 darunter und schwarz #0D0D0D für die Schrift, die Schrift ist Plus Jakarta Sans. Geliefert wird eine eigenständige HTML-Datei, erfasst bei 2104x1080, damit der Rahmen feststeht, bevor die erste Zeile Code entsteht. Das Briefing gibt sein Bewegungsbudget für Übergänge von 2400ms, cubic-bezier(.16,1.3,1) und eine Videospur in Schleife aus. Nutze es als Referenz, wenn du eine Landingpage für dieses Publikum baust, also für eine E-Commerce-Marke, und eine fertige Komposition willst statt eines Ausgangspunkts.
Gemacht für
- Teams, die Landingpage-Designs für eine E-Commerce-Marke bauen und Easing cubic-bezier(.16,1.3,1) schriftlich festhalten wollen, bevor ein Angebot rausgeht.
- Die Seite richtet sich an Frontend-Entwickler, die ein Landingpage-Design für eine E-Commerce-Marke in eine eigenständige HTML-Datei nachbauen und die Zahlen hinter der Optik suchen.
- Wenn die Referenz nur ein Ausgangspunkt ist, können Designer ein Breakpoint bei 700px behalten und den Rest des Landingpage-Designs neu bauen.
Was enthalten ist
- Gemessen statt geschätzt. Das Briefing legt 100vh hohe Sektionen, Abstände in 30px-Schritten, 2400ms Übergänge und Easing cubic-bezier(.16,1.3,1) fest und überlässt den Rest der Anordnung, das Gegenteil einer Skala, die von selbst wächst. Ein Nachbau, der diese Zahlen trifft, sieht ohne weitere Anpassung aus wie die Referenz.
- Das Video ist Hintergrund, keine Fläche. Der erste Screen ist ein einzelner Clip bei 2104x1080, alles andere ist darauf angeordnet. Das Poster bei 2104x1080 trägt die Komposition, wenn Autoplay nicht verfügbar ist, damit das Layout nicht zusammenfällt.
- Schrift macht das Styling. Die Schrift ist hier das Styling-System: Plus Jakarta Sans in der Display-Größe, dieselbe Schrift durch die ganze Oberfläche, und keine zweite Akzentfarbe, die die Arbeit übernimmt. Der Interface-Text bleibt auf einer Schrift, deshalb mischt die Seite nie zwei Stimmen in derselben Größe.
- Am Viewport gemessen. Die Abstände sind genauso zitiert (100vh hohe Sektionen, Abstände in 30px-Schritten, 2400ms Übergänge und Easing cubic-bezier(.16,1.3,1)) und nicht als Skala, die von selbst weiterwächst.
Bewegung & Interaktion
Dauern aus dem Briefing
Das Animationsbudget ist klein und ausdrücklich benannt: 2400ms mit cubic-bezier(.16,1.3,1), eingesetzt für Zustandswechsel und nicht für Auftritte. Weil die Werte kurz sind, fällt ein Nachbau mit langsameren Zeiten sofort auf.
Die Schleife übernimmt die Grundbewegung
Ein einziger Clip von 10,6s ist die ganze Hintergrundebene: Er läuft hinter dem Text, schleift ohne sichtbaren Schnitt und reagiert nie auf den Zeiger. Der Clip ist kurz genug, um ohne sichtbare Naht zu schleifen, und das zählt mehr als seine Auflösung.
Warum das Briefing für E-Commerce trägt
Wenn dein erster Screen gerade drei Dinge erklärt, ist das hier die Version, die eines erklärt. die Überschrift, das Ankündigungs-Badge, die Kennzahlen-Zeile und das Kartenraster sind in Leserichtung gestaffelt, und 100vh hohe Sektionen und Abstände in 30px-Schritten geben den Takt vor. Task Engine nennt das Angebot einmal und lässt die Komposition es wiederholen, statt eine zweite Behauptung zu ergänzen.
Wie der Eintrag Landingpage umbricht
Die Desktop-Komposition ist gegen 2104x1080 gelöst, und das schmale Layout ist entworfen statt geerbt: das Layout wechselt bei 700px, der Bereich wird auf 100vh gehalten und die Bewegung hat einen Reduced-Motion-Zweig. Bewegung hat eine Variante für reduzierte Bewegung, und die Medien tragen ein Posterbild, damit die Seite auch ohne Autoplay kommuniziert. Beide Zustände sind im selben Briefing beschrieben.
So wird der Eintrag Landingpage deiner
Setz den neuen Text in der Display-Größe, die das Briefing nennt (100vh hohe Sektionen und Abstände in 30px-Schritten), und der Rest der Skala folgt ohne Redesign. Eine andere Marke kann den ganzen Rahmen wiederverwenden.
Häufige Fragen
Kann ich Landingpage von Task Engine in einem anderen Stack nachbauen?
Task Engine 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.
Warum steht der Prompt von Task Engine hier nicht abgedruckt?
Alles, was auf der Seite zitiert wird, stammt aus dem erfassten Briefing mit 14.503 Zeichen und nicht aus einer nachträglich verfassten Beschreibung. Deshalb passen die Zahlen und der Text zusammen.
Was steht eigentlich im Briefing hinter Task Engine?
Das Briefing beschreibt den Bau, nicht die Stimmung: Es nennt die Komposition bei 2104x1080, die Abstände und die Bewegungswerte. Das gerenderte Bild dient darin an keiner Stelle als verbindliche Grundlage.
