Über diese Vorlage
Animated Cards zeigt einen Weg, die Komposition (Feature-Bereich) für dieses Publikum zu bauen. Gedacht ist sie für ein Fintech-Produkt, und die Anweisungen dazu sind veröffentlicht. Farbe bleibt auf schwarz #000000 darunter und helles orange #FF9500 für die Akzente begrenzt, gesetzt in JetBrains Mono. Geliefert wird React und Tailwind CSS, erfasst bei 640x464, damit der Rahmen feststeht, bevor die erste Zeile Code entsteht. Nimm es zur Hand, wenn im Fall Feature-Bereich die Reihenfolge feststehen muss, bevor neue Sektionen dazukommen.
Gemacht für
- Gemacht für Agenturen, die nach Runden abrechnen und eine feste Display-Größe von 12px und Abstände in 16px-Schritten vor der ersten Runde verbindlich haben wollen.
- Gemacht für Content-Leads, die ein Feature-Bereich-Design neu betexten, dessen Headline so lang bleiben muss wie die von Animated Cards.
- Wer ein Modell mit einem Feature-Bereich-Briefing versorgt, startet mit dem Prompt über 36.212 Zeichen.
Was enthalten ist
- Eine Skala für Schrift und Rahmen. Das Briefing hält seine Größen bei der Aufnahme fest (eine feste Display-Größe von 12px und Abstände in 16px-Schritten), damit sich ein Nachbau überprüfen und nicht schätzen lässt. Ein Nachbau, der diese Zahlen trifft, sieht ohne weitere Anpassung aus wie die Referenz.
- Akzent-Disziplin. Die Sättigung ist in einem Wert gebündelt (#FF9500), dadurch findet das Auge die nächste Aktion, ohne den Text zu lesen. Alles andere liegt auf schwarz #000000, und das hält eine gesättigte Palette lesbar.
- Panels mit gleichem Gewicht. Das Raster ist die Struktur: gleich große Panels, in JetBrains Mono gesetzt, so angeordnet, dass das Auge quer statt nach unten wandert. Überschriften in den Panels stehen eine Stufe über ihrem eigenen Text, nicht eine Stufe unter der Seiten-Headline.
- Größen stehen im Briefing. Die Abstände sind genauso zitiert (eine feste Display-Größe von 12px und Abstände in 16px-Schritten) und nicht als Skala, die von selbst weiterwächst.
Bewegung & Interaktion
Zeiger-Zustände, mehr nicht
Die Rückmeldung beschränkt sich auf ein Slider, der Inhalte auf Anfrage weiterblättert, der Rest des Layouts ist eine feste Komposition. Die Zustände stammen aus der Palette der Seite und nicht aus einem Komponenten-Standard. Ein paar verlässliche Zustände schlagen eine lange Liste von Effekten.
Die Canvas ist das Bild
Das Bild entsteht zur Laufzeit (ein 3D-Transform auf dem Hauptelement) und wird nicht als Standbild geladen, der Rahmen mit 640x464 braucht dadurch ein Asset weniger. Die Oberfläche ringsum bleibt flach, so kann das Rendering die Tiefe tragen. Halte etwas bereit, falls das Rendering ausfällt.
Die Zahlen hinter dem Eintrag Feature-Bereich
Das Briefing ist eine Spezifikation, kein Moodboard. Es legt eine feste Display-Größe von 12px und Abstände in 16px-Schritten fest und benennt das Medienformat: 640x464. Diese Tiefe ist der Grund, warum das Design einen Nachbau übersteht: Ändere den Text, und die Verhältnisse halten trotzdem. Nichts in diesem Eintrag Feature-Bereich hängt an einer Voreinstellung.
Was ein Fintech-Produkt hier gewinnt
36.212 Zeichen Briefing ergeben einen Screen ohne Füllmaterial. Die Werte darin sind ausgeschrieben (eine feste Display-Größe von 12px und Abstände in 16px-Schritten), und deshalb liest die Komposition auch dann noch, wenn der Text wechselt. Animated Cards nennt das Angebot einmal und lässt die Komposition es wiederholen, statt eine zweite Behauptung zu ergänzen.
Die Reihenfolge im Eintrag Feature-Bereich
Wo eine Marketingseite Belege unter dem Fold stapelt und hofft, stehen in diesem Eintrag Feature-Bereich die Kennzahlen-Zeile, das Kartenraster, die Feature-Liste und der Hintergrund-Clip vorn, und der Rest wird zurückgehalten. Ein Leser im Bereich Fintech bekommt das Angebot vor den Optionen.
Häufige Fragen
Was bekomme ich, wenn ich das Briefing zu Animated Cards kopiere?
Das Briefing beschreibt den Bau, nicht die Stimmung: Es nennt die Komposition bei 640x464, die Abstände und die Bewegungswerte. Das gerenderte Bild dient darin an keiner Stelle als verbindliche Grundlage.
Warum nennt der Eintrag React und Tailwind CSS überhaupt?
Animated Cards wurde in React und Tailwind CSS 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.
Darf ich Animated Cards in einem Kundenprojekt verwenden?
Das Briefing ist eine Beschreibung, keine Lizenz zur Weitergabe fremder Dateien. Behalte Struktur und Zahlen, ersetze Medien und Markenzeichen, und nenne die Quelle, wenn ein Kunde fragt, woher das Layout stammt. Die Referenz wurde mit 640x464 erfasst.
