Text Animationen für Überschriften

Headlines, die ankommen. Blur in, Buchstaben und Wörter nacheinander, Schreibmaschine und Scramble.

5 Components · 15 Variants

Kategorie wechseln

Überschriften, die ankommen

Ein Texteffekt gibt einer Headline einen Auftritt, und er darf nie Lesbarkeit kosten. Die fünf Components hier behalten echten Text in der Seite, Screenreader hören jeden Satz einmal, Wörter brechen nie mitten durch, und bei reduzierter Bewegung steht der Text einfach da.

„Scharf werden“ stellt eine ganze Zeile scharf, der ruhigste der fünf. „Buchstabe für Buchstabe“ lässt Buchstaben nacheinander aufsteigen, für kurze Markenzeilen. „Wort für Wort“ bringt Wörter beim Hereinscrollen oder lässt sie beim Lesen aufleuchten, gut für ein Manifest. Die Schreibmaschine tippt, hält und löscht, für Hero-Schleifen und Prompts, mit reserviertem Platz, damit nichts springt. „Entschlüsseln“ löst Buchstaben in den Text auf, passend für Tech-Marken und Links beim Hover.

Animiere eine Headline je Bildschirm, nicht jede Überschrift der Seite. Halte den Effekt kurz, unter einer Sekunde für eine Zeile. Schreibmaschine und „Entschlüsseln“ passen zu kurzen Wörtern, lange Sätze lesen sich besser mit „Scharf werden“ oder „Wort für Wort“.

Auf dieser Seite

Alle Components dieser Kategorie. Wähle eine, um zu ihren Variants zu springen.

Scharf werden3
Buchstabe für Buchstabe3
Entschlüsseln3
Schreibmaschine3
Wort für Wort3

blur-in

Scharf werden

Eine ganze Zeile wird von unscharf zu scharf. Sie bleibt echter Text, nur Deckkraft, Filter und Transformation bewegen sich.

Weich
Kräftig
Folge beim Scrollen

Props und Details

Weich

Ein leichter Schleier, der etwas aufsteigt, die Einleitung folgt einen Takt später.

Installv1.0.0

aiw add @ai-website/blur-in

Bringt mit utils, kit

Usage

<BlurIn as="h1" rise className="text-display">…</BlurIn>  <BlurIn delay={250} className="text-lead">…</BlurIn>

Source

Kräftig

Tiefe Unschärfe und ein leichter Zoom für eine kurze Markenzeile.

Installv1.0.0

aiw add @ai-website/blur-in

Bringt mit utils, kit

Usage

<BlurIn as="h2" amount="strong" duration={1400} className="text-display">…</BlurIn>

Source

Folge beim Scrollen

Drei Zeilen werden beim Scrollen nacheinander scharf. Die letzte trägt den Akzent.

Installv1.0.0

aiw add @ai-website/blur-in

Bringt mit utils, kit

Usage

<BlurIn as="span" trigger="scroll" rise>…</BlurIn>  <BlurIn as="span" trigger="scroll" scrollRange={[0.14, 0.52]}>…</BlurIn>

Source

letter-stagger

Buchstabe für Buchstabe

Buchstaben treten nacheinander auf, Wörter bleiben ganz und brechen nie um. Screenreader hören den Text einmal.

Aufsteigen
Unschärfe beim Scrollen
Wachsen

Props und Details

Aufsteigen

Buchstaben steigen an ihren Platz, der Ortsname trägt den Akzent.

Installv1.0.0

aiw add @ai-website/letter-stagger

Bringt mit utils, kit

Usage

<LetterStagger as="h1" className="text-display" text="Good morning, Leipzig" highlight="Leipzig" />

Source

Unschärfe beim Scrollen

Buchstaben werden mit der Scrollposition an ihrem Platz scharf, ruhig genug für einen ernsten Ton.

Installv1.0.0

aiw add @ai-website/letter-stagger

Bringt mit utils, kit

Usage

<LetterStagger as="h2" effect="blur" trigger="scroll" className="text-h1" text="…" />

Source

Wachsen

Buchstaben wachsen aus etwas kleiner heran, schnell und hell, linksbündig.

Installv1.0.0

aiw add @ai-website/letter-stagger

Bringt mit utils, kit

Usage

<LetterStagger as="h2" effect="scale" stagger={22} duration={550} className="text-h1" text="…" />

Source

scramble

Entschlüsseln

Buchstaben wirbeln und lösen sich in den Text auf, wenn er ins Bild kommt und erneut bei Hover. Mit festem Startwert, jeder Besuch sieht gleich aus, nichts verschiebt sich.

Überschrift
Links bei Hover
Code beim Scrollen

Props und Details

Überschrift

Eine große Zeile löst sich von links nach rechts auf, offene Buchstaben im Akzent.

Installv1.0.0

aiw add @ai-website/scramble

Bringt mit utils, kit

Usage

<Scramble as="h1" className="text-h1" text="Brands people recognise in a second" />

Source

Links bei Hover

Navigationslinks wirbeln bei Hover und Tastaturfokus, sonst ruhen sie.

Installv1.0.0

aiw add @ai-website/scramble

Bringt mit utils, kit

Usage

<a href="/work"><Scramble trigger="hover" text="Work" /></a>

Source

Code beim Scrollen

Ein Gutscheincode, der sich mit der Scrollposition Buchstabe für Buchstabe entschlüsselt, Tabellenziffern, nur Buchstaben derselben Schreibweise.

Installv1.0.0

aiw add @ai-website/scramble

Bringt mit utils, kit

Usage

<Scramble trigger="scroll" tone="inherit" text="MIRA-SUMMER-26" className="tabular-nums" />

Source

typewriter

Schreibmaschine

Tippt, hält und löscht mit Cursor, über eine oder mehrere Zeilen. Der Platz ist reserviert, nichts drumherum bewegt sich.

Auftakt in Schleife
Eingabe beim Scrollen
Befehl

Props und Details

Auftakt in Schleife

Die letzten Wörter einer Überschrift wechseln sich ab, getippt und gelöscht in Schleife.

Installv1.0.0

aiw add @ai-website/typewriter

Bringt mit utils, kit

Usage

<h1>Websites for <Typewriter lines={["law firms", "cafés", "studios"]} className="kit-accent-text" /></h1>

Source

Eingabe beim Scrollen

Ein langer Satz, getippt von der Scrollposition, natürlich umbrochen, mit Blockcursor. Zurückscrollen löscht ihn.

Installv1.0.0

aiw add @ai-website/typewriter

Bringt mit utils, kit

Usage

<Typewriter as="p" caret="block" trigger="scroll" lines={["Build a page for Café Mira …"]} />

Source

Befehl

Befehle im Terminal, jeder getippt und vom nächsten ersetzt, mit Unterstrich als Cursor.

Installv1.0.0

aiw add @ai-website/typewriter

Bringt mit utils, kit

Usage

<Typewriter caret="underscore" lines={["npm install", "npm run build"]} />

Source

word-reveal

Wort für Wort

Wörter steigen nacheinander auf, sobald die Zeile ins Bild kommt, oder leuchten beim Lesen auf. Screenreader hören den Satz einmal, ohne JavaScript steht er vollständig da.

Auftaktzeile
Unschärfe
Beim Lesen

Props und Details

Auftaktzeile

Display-Größe, steigt aus einer weichen Unschärfe auf, eine Wendung im Akzent.

Installv1.0.0

aiw add @ai-website/word-reveal

Bringt mit utils, kit

Usage

<WordReveal as="h1" className="text-display" text="Websites that sell while you sleep" highlight="sell" />

Source

Unschärfe

Jedes Wort wird an seinem Platz scharf, nichts bewegt sich. Langsamer und leiser.

Installv1.0.0

aiw add @ai-website/word-reveal

Bringt mit utils, kit

Usage

<WordReveal as="h2" effect="blur" stagger={140} duration={1100} className="text-h1" text="…" />

Source

Beim Lesen

Ein Einleitungsabsatz leuchtet Wort für Wort mit dem Scrollen auf, die Leseposition trägt das Licht.

Installv1.0.0

aiw add @ai-website/word-reveal

Bringt mit utils, kit

Usage

<WordReveal trigger="scroll" effect="fade" className="text-lead" text="…" />

Source

Wird oft kombiniert mit

Sections, die auf einer Seite meist neben Text Effects stehen.

Überschriften, die ankommen

Auf dieser Seite

Weich

Kräftig

Folge beim Scrollen

Aufsteigen

Unschärfe beim Scrollen

Wachsen

Überschrift

Links bei Hover

Code beim Scrollen

Auftakt in Schleife

Eingabe beim Scrollen

Befehl

Auftaktzeile

Unschärfe

Beim Lesen

Ähnliche Components, Wird oft kombiniert mit

Ähnliche Components

Wird oft kombiniert mit