Zum Inhalt springen
UI Kit
Accent

Manifest

Wofür ein Unternehmen steht, in eigener Stimme. Eine Aussage, die beim Lesen aufleuchtet, Überzeugungen, die scharf werden, ein Gründerbrief, der sich selbst unterschreibt, dies statt das, und ein Versprechen zum Unterschreiben.

5 Variants
Kategorie wechseln

Manifest

Aussage

Eine große Aussage. Während sie durch das Fenster nach oben wandert, leuchten ihre Wörter nacheinander auf, so wie man liest. Einmal pro Seite einsetzen.

Im Studio öffnen

Überzeugungen

Woran wir glauben, in großen Zeilen. Jede wird scharf, während sie die Fenstermitte kreuzt, und tritt danach zurück. Die Überschrift bleibt auf breiten Bildschirmen stehen.

Im Studio öffnen

Gründerbrief

Ein persönlicher Brief auf einem Blatt, mit Datum, Anrede und Gruß. Die Unterschrift schreibt sich, sobald sie ins Bild kommt.

Im Studio öffnen

Dies statt das

Wertepaare in der Form bekannter Manifeste. Die gewählte Seite wird hell und bekommt ihre Linie beim Hereinscrollen, die andere bleibt durchgestrichen.

Im Studio öffnen

Versprechen

Versprechen, die nacheinander aufsteigen, daneben ein Zähler der Unterschriften. Mit dem eigenen Namen unterschreiben, die Zahl steigt um eins, du bekommst deine Nummer.

Im Studio öffnen

Details

Was Manifest mitbringt, aus Registry und Quellcode gelesen.

Bereich
Marketing
Variants
5
Version
1.0.0 · seit 1.1.0
Datei
components/ui/manifesto.tsx
Bringt mit
utilskitbuttoniconmotionrevealsectionnumber-tickerword-reveal
npm-Pakete
Keine
Sprachen
Englisch und Deutsch, 7 eigene Texte
Studio
Alle 5 Variants bearbeitbar
Mit KI bauen
Per MCP in Claude, Cursor, Copilot und Codex

Props

Die Schnittstelle ManifestoProps aus components/ui/manifesto.tsx. Beschreibungen stammen aus den Kommentaren im Code und sind auf Englisch.

  • variantoptional
    ManifestoVariant

    scroll-litbeliefsfounder-letteroverpledge

  • eyebrowoptional
    React.ReactNode
  • titleoptional
    React.ReactNode
  • descriptionoptional
    React.ReactNode
  • statementoptional
    string

    scroll-lit: the statement

  • highlightoptional
    string

    scroll-lit: a phrase inside the statement in the accent

  • itemsoptional
    { title: string; text?: string }[]

    beliefs and pledge: the lines

  • pairsoptional
    { chosen: string; over: string; text?: string }[]

    over: the pairs

  • letteroptional
    { greeting: string; paragraphs: string[]; closing: string; name: string; role: string; date?: string }

    founder-letter

  • signedoptional
    number

    pledge: people who signed so far

  • ctaoptional
    { label: string; href: string }
  • onSignoptional
    (name: string) => void

Eingebaute Texte

Diese Texte schreibt Manifest selbst. Die Sprache folgt dem KitProvider, über die Prop labels ersetzt du einzelne.

Alle 7 Texte anzeigen
overEnglisch overDeutsch statt
signedEnglisch people signedDeutsch Menschen haben unterschrieben
nameEnglisch Your nameDeutsch Dein Name
namePlaceholderEnglisch Lena WeberDeutsch Lena Weber
signEnglisch Sign the pledgeDeutsch Versprechen unterschreiben
thanksEnglisch Thank you, {n}. You are number {c}.Deutsch Danke, {n}. Du bist Nummer {c}.
requiredEnglisch Please enter your name.Deutsch Bitte gib deinen Namen ein.

Barrierefreiheit

Aus dem Quellcode der Component abgeleitet.

  • Setzt aria-live, damit Screenreader Zweck und Zustand ansagen.
  • Nutzt die Rolle status.
  • Meldet Änderungen über eine Live-Region, ohne den Fokus zu verschieben.
  • Der Server rendert den Startzustand vollständig, JavaScript ergänzt nur die Interaktion.

Bewegung

  • Erscheint beim ersten Sichtkontakt mit einem kurzen Auftritt (kit-rise, useInView).
  • Bei reduzierter Bewegung (prefers-reduced-motion) bleibt sie ruhig. 3 Stellen im Code schalten Bewegung dann ab.

Häufige Fragen

Wie installiere ich Manifest?

Mit aiw add @ai-website/manifesto. Der Befehl legt die Datei components/ui/manifesto.tsx in dein Projekt, der Code gehört danach dir. Mit dabei sind button, icon, motion, reveal, section, number-ticker und word-reveal. Weitere npm-Pakete braucht sie nicht.

Welche Varianten hat Manifest?

5 Varianten, Aussage, Überzeugungen, Gründerbrief, Dies statt das und Versprechen. Du wählst sie mit der Prop variant, zum Beispiel variant="beliefs".

Kann ich die Texte von Manifest übersetzen?

Ja. Manifest bringt 7 eigene Texte auf Deutsch und Englisch mit, etwa „statt“, „Menschen haben unterschrieben“ und „Dein Name“. Die Sprache folgt dem KitProvider, einzelne Texte ersetzt du über die Prop labels.

Kann ein KI-Assistent Manifest einbauen?

Ja. Über den MCP-Server der aiw CLI finden Claude, Cursor, GitHub Copilot, Windsurf, Codex und Gemini Manifest mit aiw_components und installieren sie mit aiw_add @ai-website/manifesto. Nenn im Prompt die Variante, etwa variant="scroll-lit", dann schreibt der Assistent deine Inhalte direkt in die Props.

Kann ich Manifest ohne Code anpassen?

Ja, im Studio. Alle 5 Varianten lassen sich dort bearbeiten, Texte, Listen und Schalter. Das Studio schreibt den passenden Manifesto-Code zum Kopieren.

Ähnliche Components

Mehr aus Marketing, demselben Bereich des Kits.

Wird oft kombiniert mit

Sections, die auf einer Seite meist neben Manifest stehen.

Oft gesucht

Direkt zu

In die Zwischenablage kopiert