Player-Leiste, Medienkarten, Karussell und Audio-Visualisierung ohne Produktlogik.
Komponenten werden geladen …
Persistente Wiedergabeleiste: Cover, Titel mit Live-Slot, Transport mit Timeline und Zusatzaktionen. Rein darstellend – Audio steuert die App.
import { MediaBar, MediaBarInfo, MediaBarArtwork, MediaBarMeta,
MediaBarTransport, MediaBarTimeline, MediaBarActions } from '@rapold/framework-core'
<MediaBar position="fixed" status={statusText}>
<MediaBarInfo>
<MediaBarArtwork src={cover} title="Morgenjournal" />
<MediaBarMeta eyebrow="Nachrichten" title="Morgenjournal" subtitle="12 Min." />
</MediaBarInfo>
<MediaBarTransport playButton={{ label: 'Morgenjournal abspielen', state, onPlay, onPause }}>
<MediaBarTimeline value={time} duration={742} onSeek={seek} />
</MediaBarTransport>
<MediaBarActions>{/* Lautstärke, Queue … */}</MediaBarActions>
</MediaBar>Kachel und Breitformat mit Stretched Link, Ersatz-Cover, Overlay-Etikett und eigenständigem Aktions-Slot.
Nachrichten
Die wichtigsten Meldungen aus der Schweiz und der Welt, kompakt in zwölf Minuten.
Kultur
Gespräche über Bühne, Literatur und Film – mit Gästen aus Zürich, Basel und Bern.
Wissen
Warum die Gletscher schneller schmelzen und was die Forschung dagegen unternimmt.
Kultur
Warum kleine Bühnen in Graubünden und im Jura gerade boomen – eine Reportage mit Stimmen aus dem Publikum.
import { MediaCard } from '@rapold/framework-core'
<MediaCard
variant="wide"
href="/sendungen/kulturplatz"
imageSrc={cover}
title="Kulturplatz am Abend"
eyebrow="Kultur"
meta="So, 11. Okt. · 48 Min."
action={<PlayButton label="Kulturplatz abspielen" size="sm" />}
/>Deterministisches Ersatz-Cover aus Titel und Seed. Farben stammen aus den Chart-Tokens der aktiven Brand.
import { GeneratedCover } from '@rapold/framework-core'
<GeneratedCover title="Morgenjournal" eyebrow="Sendung" index={0} />Scroll-Snap ohne Bibliothek. Autoplay mit sichtbarem Pause-Knopf; bei Hover, Fokus und «Bewegung reduzieren» steht es still.
import { Carousel, CarouselContent, CarouselItem, CarouselControls } from '@rapold/framework-core'
<Carousel label="Empfohlene Sendungen" autoplay={6000} loop>
<CarouselContent>
<CarouselItem className="sm:basis-1/2">…</CarouselItem>
</CarouselContent>
<CarouselControls />
</Carousel>Datengetriebenes SVG ohne Web Audio im Core. Farben über Tokens, bei «Bewegung reduzieren» eine stehende Hüllkurve.
BarWaveform mit Fortschritt
BarWaveform live, vom Boden
import { BarWaveform, RadialBars, ActivityRing } from '@rapold/framework-core'
<BarWaveform values={peaks} progress={time / duration} label="Wellenform" />
<RadialBars values={analyserLevels} live tone="chart-3" />
<ActivityRing mode="speech" values={levels} intensity={0.6} diameter={56}>
<Avatar />
</ActivityRing>