Media

Video- und Audio-Player, Bildvergleich, Device Frames und QR-Codes.

5 Components · 19 Variants

Kategorie wechseln

Auf dieser Seite

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

QR-Code5
Geräterahmen4
Videoplayer4
Audioplayer3
Bildvergleich3

qr-code

QR-Code

Echte, scanbare QR-Codes aus dem eigenen Encoder des Kits. Schlicht mit SVG- und PNG-Download, gestaltet mit Punkten und Logo, als Tischkarte, als WLAN-Karte oder als Generator zum Tippen.

Schlicht
Gestaltet
Tischkarte
WLAN-Karte
Generator

Props und Details

Schlicht

Ein scharfer, eckiger Code auf heller Fläche, immer dunkel auf hell, damit Telefone ihn in jedem Modus lesen. Download als SVG für den Druck oder PNG fürs Web, die Module öffnen sich beim Hereinscrollen aus der Mitte.

Im Studio öffnen

Installv1.0.0

aiw add @ai-website/qr-code

Bringt mit utils, kit, icon, copy-button

Usage

<QrCode value="https://cafe-mira.example/menu" title="Our menu" description="…" fileName="menu-qr" />

Source

Gestaltet

Runde Module, abgerundete Augen und ein Logo in der Mitte. Das Logo hebt die Fehlerkorrektur auf die höchste Stufe, damit der Code trotz verdeckter Mitte lesbar bleibt.

Im Studio öffnen

Installv1.0.0

aiw add @ai-website/qr-code

Bringt mit utils, kit, icon, copy-button

Usage

<QrCode variant="styled" value="https://…" logo={<YourMark />} color="#1d2a44" />

Source

Tischkarte

Eine Karte für Tische und Theken mit kurzer Adresse zum Abtippen. Eine sanfte Scanlinie wandert über den Code, bei reduzierter Bewegung steht sie still.

Im Studio öffnen

Installv1.0.0

aiw add @ai-website/qr-code

Bringt mit utils, kit, icon, copy-button

Usage

<QrCode variant="card" value="https://cafe-mira.example/order?table=12" title="Order from your table" displayUrl="cafe-mira.example/12" />

Source

WLAN-Karte

Gäste scannen und sind im Netz, ohne zu tippen. Das Passwort bleibt verborgen, bis man es zeigt, und kopiert sich mit einem Tipp.

Im Studio öffnen

Installv1.0.0

aiw add @ai-website/qr-code

Bringt mit utils, kit, icon, copy-button

Usage

<QrCode variant="wifi" ssid="Café Mira Guests" password="pumpkin-soup-26" title="Free Wi-Fi" />

Source

Generator

Einen Link tippen, und der Code zeichnet sich beim Tippen neu, mit Größe in Byte, Wahl der Fehlerkorrektur und beiden Downloads. Zu langer Text wird benannt, nicht abgeschnitten.

Im Studio öffnen

Installv1.0.0

aiw add @ai-website/qr-code

Bringt mit utils, kit, icon, copy-button

Usage

<QrCode variant="generator" value="https://" />

Source

device-frames

Geräterahmen

Telefon, Tablet, Laptop und Uhr, gezeichnet in CSS. Eine Breite skaliert das ganze Gerät, der Inhalt kann in echter Bildschirmgröße rendern.

Telefon
Tablet
Laptop
Geräteset

Props und Details

Telefon

Seitentasten, Dynamic Island, Statusleiste und Home-Balken, aufrecht oder quer für Karten und Video.

Installv1.0.1

aiw add @ai-website/device-frames

Bringt mit utils, kit

Usage

<PhoneDevice width={300} viewport={260}>…</PhoneDevice>  <PhoneDevice orientation="landscape" width={560}>…</PhoneDevice>

Source

Tablet

Gleichmäßige Ränder, Kamera an der langen Kante, hier quer mit einer App, die in 980 px rendert und sich einpasst.

Installv1.0.1

aiw add @ai-website/device-frames

Bringt mit utils, kit

Usage

<TabletDevice orientation="landscape" width={760} viewport={980}>…</TabletDevice>

Source

Laptop

Schmaler Rand mit Kamera, Scharnier und ein Unterteil mit Griffmulde. Ideal für Website-Vorschauen.

Installv1.0.1

aiw add @ai-website/device-frames

Bringt mit utils, kit

Usage

<LaptopDevice width={900} viewport={1100}>…</LaptopDevice>

Source

Geräteset

Laptop, Telefon und Uhr in einer Szene. Breiten in Prozent, das Set schrumpft als ein Bild.

Installv1.0.1

aiw add @ai-website/device-frames

Bringt mit utils, kit

Usage

<LaptopDevice width="76%" … />  <PhoneDevice width="21%" … />  <WatchDevice width="13%" … />

Source

video-player

Videoplayer

Ein Videoplayer mit eigener ruhiger Steuerung, Untertiteln, Tastenkürzeln und einem Vorschaubild, das jede Zeichnung oder jedes Bild sein kann.

Vorschaubild
Untertitel
Schlicht in einer Karte
Hochkant-Clip

Props und Details

Vorschaubild

Unberührter Zustand mit Titel, Länge und großem Startknopf. Die Steuerung blendet beim Abspielen aus und kommt bei Bewegung oder Fokus zurück.

Installv1.0.0

aiw add @ai-website/video-player

Bringt mit utils, kit, icon

Usage

<VideoPlayer src="/tour.mp4" title="Product tour" poster={<img src="/tour.jpg" alt="" />} />

Source

Untertitel

Mitten im Film pausiert, Untertitel an. Die Zeilen kommen als Daten oder als WebVTT, der Knopf erscheint nur, wenn es Untertitel gibt.

Installv1.0.0

aiw add @ai-website/video-player

Bringt mit utils, kit, icon

Usage

<VideoPlayer src="/interview.mp4" cues={[{ start: 28, end: 33, text: "…" }]} defaultCaptions initialTime={34} />

Source

Schlicht in einer Karte

Eine Zeile Steuerung für kleine Player, hier als Lektion in einem Kurs.

Installv1.0.0

aiw add @ai-website/video-player

Bringt mit utils, kit, icon

Usage

<VideoPlayer controls="minimal" src="/lesson-3.mp4" poster={…} />

Source

Hochkant-Clip

Ein Clip im Format 9:16 für Reels und Storys, mit schlichter Steuerung und einem Beitrag daneben.

Installv1.0.0

aiw add @ai-website/video-player

Bringt mit utils, kit, icon

Usage

<VideoPlayer aspect="portrait" controls="minimal" src="/flat-white.mp4" poster={…} />

Source

audio-player

Audioplayer

Audio mit gezeichneter Wellenform zum Klicken, Ziehen und Durchsteppen, von der Podcast-Karte bis zur Sprachnachricht.

Podcast-Karte
Kompakt im Text
Sprachnachricht

Props und Details

Podcast-Karte

Eine Folge mit Cover, Wellenform, Sprungknöpfen, Zeit und Tempo. Der gespielte Teil der Wellenform trägt den Akzent.

Installv1.0.0

aiw add @ai-website/audio-player

Bringt mit utils, kit, icon

Usage

<AudioPlayer variant="card" src="/episode-42.mp3" title="…" subtitle="Lumen Talks · Episode 42" artwork={<img … />} />

Source

Kompakt im Text

Eine Zeile für Artikel, Lektionen und Listen. Abspielen, Wellenform, Zeit und Tempo.

Installv1.0.0

aiw add @ai-website/audio-player

Bringt mit utils, kit, icon

Usage

<AudioPlayer variant="compact" src="/article.mp3" title="Listen to this article" />

Source

Sprachnachricht

Sprechblasen für eingehende und eigene Nachrichten. Das Tempo erscheint, sobald die Nachricht läuft.

Installv1.0.0

aiw add @ai-website/audio-player

Bringt mit utils, kit, icon

Usage

<AudioPlayer variant="voice" src="/note.m4a" align="end" meta="09:41" />

Source

image-compare

Bildvergleich

Vorher und nachher mit verschiebbarer Trennlinie. Funktioniert mit zwei beliebigen Elementen, seitlich oder von oben nach unten.

Website-Relaunch
Bildbearbeitung
Senkrecht

Props und Details

Website-Relaunch

Links die alte Seite, rechts die neue. Ziehen, klicken oder mit den Pfeiltasten schieben.

Installv1.0.0

aiw add @ai-website/image-compare

Bringt mit utils, kit, icon

Usage

<ImageCompare before={<img src="/old.png" alt="…" />} after={<img src="/new.png" alt="…" />} />

Source

Bildbearbeitung

Die Rohaufnahme gegen die bearbeitete. Dasselbe Bild mit und ohne Bearbeitung.

Installv1.0.0

aiw add @ai-website/image-compare

Bringt mit utils, kit, icon

Usage

<ImageCompare before={<img src="/raw.jpg" alt="…" />} after={<img src="/graded.jpg" alt="…" />} initial={40} />

Source

Senkrecht

Oben vorher, unten nachher. Passt zu hohen Bildern und Telefonen.

Installv1.0.0

aiw add @ai-website/image-compare

Bringt mit utils, kit, icon

Usage

<ImageCompare orientation="vertical" before={…} after={…} />

Source

Wird oft kombiniert mit

Sections, die auf einer Seite meist neben Media stehen.

Auf dieser Seite

Schlicht

Gestaltet

Tischkarte

WLAN-Karte

Generator

Telefon

Tablet

Laptop

Geräteset

Vorschaubild

Untertitel

Schlicht in einer Karte

Hochkant-Clip

Podcast-Karte

Kompakt im Text

Sprachnachricht

Website-Relaunch

Bildbearbeitung

Senkrecht

Ähnliche Components, Wird oft kombiniert mit

Ähnliche Components

Wird oft kombiniert mit