Beams, Partikel und Bewegung

Lichtstrahlen, Meteore, Partikel, Orbits, endlose Marquees und ein Licht, das um den Rand einer Karte wandert.

6 Components · 18 Variants

Kategorie wechseln

Auf dieser Seite

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

Lichtstrahlen3
Randlicht3
Laufband3
Sternschnuppen3
Umlaufbahn3
Partikel3

beams

Lichtstrahlen

Licht, das über Rasterlinien wandert, als Strahl fällt oder Kurven entlangläuft.

Raster
Strahlen
Wellen

Props und Details

Raster

Impulse laufen in beide Richtungen über ein feines Raster und werden kräftiger, während die Bühne hochscrollt.

Installv1.0.0

aiw add @ai-website/beams

Bringt mit utils, kit

Usage

<Beams variant="grid" cell={56} count={9} scrollReveal />

Source

Strahlen

Nur senkrechte Strahlen ohne gezeichnetes Raster, sie werden mit dem Scrollen kräftiger.

Installv1.0.0

aiw add @ai-website/beams

Bringt mit utils, kit

Usage

<Beams variant="rays" count={10} speed={6} scrollReveal />

Source

Wellen

Ein Fächer aus Kurven, der sich hinter der Überschrift trifft, Licht läuft von links nach rechts.

Installv1.0.0

aiw add @ai-website/beams

Bringt mit utils, kit

Usage

<Beams variant="waves" count={9} />

Source

border-beam

Randlicht

Eine Karte, über deren Rand ein Licht wandert, in drei Längen und drei Geschwindigkeiten.

Ankündigungskarte
Größen und Tempo
Zwei Lichter

Props und Details

Ankündigungskarte

Eine Karte, ein Licht, der Text darin.

Installv1.0.0

aiw add @ai-website/border-beam

Bringt mit utils, kit

Usage

<BorderBeam className="p-10">…</BorderBeam>

Source

Größen und Tempo

Klein und langsam, mittel und normal, groß und schnell, an drei Tarifen.

Installv1.0.0

aiw add @ai-website/border-beam

Bringt mit utils, kit

Usage

<BorderBeam size="sm|md|lg" speed="slow|normal|fast">…</BorderBeam>

Source

Zwei Lichter

Zwei Lichter auf gegenüberliegenden Seiten einer breiten Karte, gegen den Uhrzeigersinn.

Installv1.0.0

aiw add @ai-website/border-beam

Bringt mit utils, kit

Usage

<BorderBeam double reverse size="lg" speed={10}>…</BorderBeam>

Source

marquee

Laufband

Eine endlose Reihe oder Spalte aus Karten, Logos oder Vorschauen, nie aus bloßen Wörtern. Hält bei Zeiger und Fokus, gleitet auf Wunsch mit dem Scrollen, bei reduzierter Bewegung ruhig und scrollbar.

Logoreihe
Zwei Reihen Karten
Senkrechte Spalten

Props und Details

Logoreihe

Kundenlogos laufen unter dem Text, die Ränder blenden aus.

Installv1.0.0

aiw add @ai-website/marquee

Bringt mit utils, kit

Usage

<Marquee label="Customer logos" speed={36}>{logos}</Marquee>

Source

Zwei Reihen Karten

Gerichte und Getränke als Karten in zwei Reihen, die gegeneinander laufen und beim Scrollen aneinander vorbeigleiten. Hover hält die Reihe an und hebt die Karte.

Installv1.0.0

aiw add @ai-website/marquee

Bringt mit utils, kit

Usage

<Marquee scrollShift={120}>{cards}</Marquee>  <Marquee reverse speed={26} scrollShift={-120}>{cards}</Marquee>

Source

Senkrechte Spalten

Bewertungen steigen in zwei Spalten neben dem Text, eine davon andersherum.

Installv1.0.0

aiw add @ai-website/marquee

Bringt mit utils, kit

Usage

<Marquee direction="vertical" className="h-[460px]">{cards}</Marquee>

Source

meteors

Sternschnuppen

Feine Streifen, die schräg über die Bühne ziehen, aus festen Startpunkten über leisen Sternen.

Schauer
Ruhiger Himmel
Steil

Props und Details

Schauer

Viele Streifen mit Akzentkopf, für eine Launch-Nacht.

Installv1.0.0

aiw add @ai-website/meteors

Bringt mit utils, kit

Usage

<Meteors count={16} parallax={40} />

Source

Ruhiger Himmel

Wenige lange, langsame Streifen in der Textfarbe, die Sterne ziehen beim Scrollen wie ein ferner Himmel.

Installv1.0.0

aiw add @ai-website/meteors

Bringt mit utils, kit

Usage

<Meteors count={7} speed={14} length={220} tone="neutral" stars={80} parallax={56} />

Source

Steil

Die Streifen fallen fast senkrecht, der Winkel ist frei wählbar.

Installv1.0.0

aiw add @ai-website/meteors

Bringt mit utils, kit

Usage

<Meteors angle={110} count={10} speed={8} parallax={40} />

Source

orbit

Umlaufbahn

Icons, Logos oder Avatare, die auf Ringen um eine Mitte kreisen und dabei aufrecht bleiben.

Integrationen
Halo hinter dem Text
Menschen

Props und Details

Integrationen

Zwei Ringe drehen gegeneinander um dein Zeichen, neben dem Text. Scrollen gibt ihnen einen zusätzlichen Schwung.

Installv1.0.0

aiw add @ai-website/orbit

Bringt mit utils, kit

Usage

<Orbit scrollTurn={50} center={<AppMark />} rings={[{ radius: 24, items: […] }, { radius: 43, reverse: true, items: […] }]} />

Source

Halo hinter dem Text

Weite gestrichelte Ringe um die Überschrift, die Elemente ziehen an den Rändern vorbei. Auf dem Telefon bleiben nur die Ringe.

Installv1.0.0

aiw add @ai-website/orbit

Bringt mit utils, kit

Usage

<Orbit size={920} dashed rings={[{ radius: 33, … }, { radius: 46, … }]} className="absolute …" />

Source

Menschen

Avatare auf zwei Ringen über dem Text, für eine Gemeinschaft oder ein Team.

Installv1.0.0

aiw add @ai-website/orbit

Bringt mit utils, kit

Usage

<Orbit size={300} center={…} rings={[{ radius: 28, items: avatars }, …]} />

Source

particles

Partikel

Eine Fläche mit langsam treibenden Partikeln und Linien zwischen nahen Nachbarn. Fest gesät, scharf auf jedem Bildschirm und angehalten, wenn niemand hinsieht.

Netz
Staub
Sternbild

Props und Details

Netz

Partikel in der Akzentfarbe, verbunden, sobald sie sich nähern. Größere ziehen beim Scrollen weiter mit.

Installv1.0.0

aiw add @ai-website/particles

Bringt mit utils, kit

Usage

<Particles density={1.1} linkDistance={120} parallax={48} />

Source

Staub

Feine Körner in der Textfarbe ohne Linien, wie Staub in einem Lichtstrahl.

Installv1.0.0

aiw add @ai-website/particles

Bringt mit utils, kit

Usage

<Particles tone="neutral" density={1.7} linkDistance={0} sizes={[0.6, 1.6]} speed={0.5} parallax={40} />

Source

Sternbild

Weniger, größere Punkte mit langen Linien, die auch zum Zeiger greifen.

Installv1.0.0

aiw add @ai-website/particles

Bringt mit utils, kit

Usage

<Particles density={0.6} linkDistance={170} sizes={[1.4, 2.8]} interactive parallax={64} />

Source

Wird oft kombiniert mit

Sections, die auf einer Seite meist neben Beams, Partikel und Bewegung stehen.

Auf dieser Seite

Raster

Strahlen

Wellen

Ankündigungskarte

Größen und Tempo

Zwei Lichter

Logoreihe

Zwei Reihen Karten

Senkrechte Spalten

Schauer

Ruhiger Himmel

Steil

Integrationen

Halo hinter dem Text

Menschen

Netz

Staub

Sternbild

Ähnliche Components, Wird oft kombiniert mit

Ähnliche Components

Wird oft kombiniert mit