Textakzente

Farbverläufe, Schimmer, gezeichnete Marker, wechselnde Wörter und hochzählende Zahlen für die eine Zeile, auf die es ankommt.

5 Components · 16 Variants

Kategorie wechseln

Auf dieser Seite

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

Markierung4
Farbverlauf3
Zahlenzähler3
Wechselnde Wörter3
Schimmertext3

highlight-marker

Markierung

Eine Unterstreichung, ein Textmarker oder ein Kreis zeichnet sich hinter eine Wendung, als SVG in der Akzentfarbe. Die Wörter bleiben reiner Text.

Unterstrichen
Textmarker
Eingekreist
Im Fließtext

Props und Details

Unterstrichen

Ein handgezogener Strich unter der Wendung, seine Stärke folgt der Schriftgröße.

Installv1.0.0

aiw add @ai-website/highlight-marker

Bringt mit utils, kit

Usage

<h1>Tax advice you <HighlightMarker>understand</HighlightMarker></h1>

Source

Textmarker

Ein Textmarker zieht beim Scrollen hinter die untere Hälfte der Wörter und weicht zurück, wenn du hochscrollst.

Installv1.0.0

aiw add @ai-website/highlight-marker

Bringt mit utils, kit

Usage

<h2>We reply <HighlightMarker variant="marker" trigger="scroll">the same day</HighlightMarker></h2>

Source

Eingekreist

Ein Kreis um das eine Wort, auf das es ankommt, in einem Zug gezeichnet.

Installv1.0.0

aiw add @ai-website/highlight-marker

Bringt mit utils, kit

Usage

<h1 className="text-display">Websites that <HighlightMarker variant="circle">sell</HighlightMarker></h1>

Source

Im Fließtext

Kleine Größen im Absatz: ein ruhiger Marker und eine Akzentlinie, die sich bei Hover neu zeichnet.

Installv1.0.0

aiw add @ai-website/highlight-marker

Bringt mit utils, kit

Usage

<p>… <HighlightMarker variant="marker" tone="muted">until three</HighlightMarker> … <HighlightMarker trigger="hover">booked online</HighlightMarker></p>

Source

gradient-sweep

Farbverlauf

Ein Verlauf aus der Akzentfarbe fließt durch den Text. Reines CSS, außerhalb des Bildes pausiert, bei reduzierter Bewegung still.

Akzent
Spektrum beim Scrollen
Einmal

Props und Details

Akzent

Der Akzent geht in ein ruhiges Grau über und zurück, in einer gleichmäßigen Schleife.

Installv1.0.0

aiw add @ai-website/gradient-sweep

Bringt mit utils, kit

Usage

<h1 className="text-display">Reports that <GradientSweep>write themselves</GradientSweep></h1>

Source

Spektrum beim Scrollen

Der Akzent und seine beiden Nachbarn im Farbkreis, bewegt von der Scrollposition statt von der Uhr.

Installv1.0.0

aiw add @ai-website/gradient-sweep

Bringt mit utils, kit

Usage

<GradientSweep palette="spectrum" trigger="scroll">point of view</GradientSweep>

Source

Einmal

Ein Durchgang, wenn die Zeile ins Bild kommt, dann ruht sie. Palette Tinte, Textfarbe in den Akzent.

Installv1.0.0

aiw add @ai-website/gradient-sweep

Bringt mit utils, kit

Usage

<GradientSweep mode="once" palette="ink" duration={2.4}>a hundred years</GradientSweep>

Source

number-ticker

Zahlenzähler

Zählt bis zu einem Wert, sobald er ins Bild kommt, im Format der Sprache über Intl und in Tabellenziffern. Die Endbreite ist von Anfang an reserviert.

Kennzahlen
Zählwerk
Im Satz, beim Scrollen

Props und Details

Kennzahlen

Währung, Prozent und eine einfache Zahl nebeneinander, jeweils im Format der Sprache.

Installv1.0.0

aiw add @ai-website/number-ticker

Bringt mit utils, kit

Usage

<NumberTicker value={48210} format={{ style: "currency", currency: "EUR", maximumFractionDigits: 0 }} />

Source

Zählwerk

Jede Ziffer rollt an ihren Platz, die Spalten kommen von links nach rechts zur Ruhe. Reines CSS.

Installv1.0.0

aiw add @ai-website/number-ticker

Bringt mit utils, kit

Usage

<NumberTicker variant="roll" value={12480} className="text-display" />

Source

Im Satz, beim Scrollen

Zahlen im Fließtext zählen mit der Scrollposition, der Satz bewegt sich dabei nicht.

Installv1.0.0

aiw add @ai-website/number-ticker

Bringt mit utils, kit

Usage

<p>More than <NumberTicker trigger="scroll" value={1240} /> practices …</p>

Source

rotating-words

Wechselnde Wörter

Ein Wort im Satz wechselt, der Platz gleitet auf die Breite des nächsten Worts, nichts springt. Pausiert außerhalb des Bildes und bei Hover.

Schieben
Pille und Unschärfe
Kippen beim Scrollen

Props und Details

Schieben

Mitten in der Auftaktzeile schiebt sich das Wort nach oben weg, das nächste steigt nach.

Installv1.0.0

aiw add @ai-website/rotating-words

Bringt mit utils, kit

Usage

<h1>Websites for <RotatingWords words={["law firms", "cafés", "studios"]} tone="accent" /> that sell</h1>

Source

Pille und Unschärfe

Eine weiche Akzentpille hält das Wort, ihre Breite folgt jedem Wort, die Wörter blenden durch eine Unschärfe.

Installv1.0.0

aiw add @ai-website/rotating-words

Bringt mit utils, kit

Usage

<RotatingWords pill effect="blur" words={["physiotherapy", "massage", "osteopathy"]} />

Source

Kippen beim Scrollen

Die Scrollposition wählt das Wort, jedes kippt über die waagerechte Achse. Linksbündig am Zeilenende.

Installv1.0.0

aiw add @ai-website/rotating-words

Bringt mit utils, kit

Usage

<h2>Made for <RotatingWords effect="flip" trigger="scroll" words={["teams", "founders", "agencies"]} /></h2>

Source

shimmer-text

Schimmertext

Ein Licht zieht über den Text. Reines CSS auf der geerbten Farbe, außerhalb des Bildes pausiert, bei reduzierter Bewegung ruhig.

Statuszeile
Überschrift beim Scrollen
Bei Hover

Props und Details

Statuszeile

Der Schritt, der gerade läuft, schimmert, die anderen ruhen.

Installv1.0.0

aiw add @ai-website/shimmer-text

Bringt mit utils, kit

Usage

<ShimmerText className="text-sm font-medium">Writing the menu section</ShimmerText>

Source

Überschrift beim Scrollen

Ein Durchgang Akzentlicht über einer großen Zeile, getragen von der Scrollposition. In Ruhe steht die Zeile in voller Farbe.

Installv1.0.0

aiw add @ai-website/shimmer-text

Bringt mit utils, kit

Usage

<ShimmerText as="h2" tone="accent" trigger="scroll" className="text-h1">…</ShimmerText>

Source

Bei Hover

Textlinks ruhen in voller Farbe, ein Lichtdurchgang bei Hover und Tastaturfokus.

Installv1.0.0

aiw add @ai-website/shimmer-text

Bringt mit utils, kit

Usage

<a href="…"><ShimmerText trigger="hover">See all opening hours</ShimmerText></a>

Source

Wird oft kombiniert mit

Sections, die auf einer Seite meist neben Textakzente stehen.

Auf dieser Seite

Unterstrichen

Textmarker

Eingekreist

Im Fließtext

Akzent

Spektrum beim Scrollen

Einmal

Kennzahlen

Zählwerk

Im Satz, beim Scrollen

Schieben

Pille und Unschärfe

Kippen beim Scrollen

Statuszeile

Überschrift beim Scrollen

Bei Hover

Ähnliche Components, Wird oft kombiniert mit

Ähnliche Components

Wird oft kombiniert mit