Website-Vorlage
orb-ui
React voice AI component library with adapters for Vapi, ElevenLabs, LiveKit, Pipecat, OpenAI Realtime, and Gemini Live.
Die Beschreibung dieser Vorlage ist noch nicht auf Deutsch verfügbar und wird daher auf Englisch angezeigt.
AI · Kostenlos
Seiten
Screenshots der Live-Demo, Seite für Seite. Scrollen Sie innerhalb einer Seite, um sie ganz zu sehen.
Design-Analyse
Eine KI-Auswertung des Designs dieser Vorlage: Farben, Typografie, Abstände, Abschnitte und markante Details. Ottermind startet damit, wenn Sie die Vorlage verwenden.
Diese Analyse ist noch nicht auf Deutsch verfügbar und wird daher auf Englisch angezeigt.
- Overall
landing page, futuristic, medium density, dark
- Palette
background #0a0a0a; surfaces [#101010, #eef7ff, #8bc7ff, #7fc2ff]; text #ffffff; muted text #858585; primary #8bc7ff; accents [#8bc7ff, #7fc2ff]
- Type
headings system-ui, 700, sentence-case; body system-ui, 16px; scale h1 76px / h2 54px / h3 13px
- Shape & spacing
button radius 7px, card radius 28px, borders none, shadows rgba(0,0,0,0.42) 0px 34px 90px 0px, inset rgba(255,255,255,0.024) 0px 1px 0px 0px, section spacing 80px, content width 1016px
- Sections (top to bottom)
- Header — horizontal layout, logo left, nav right, "Star on GitHub" button with star icon, dark background
- Hero — two-column layout, headline "Voice agent UI that feels alive." in large bold type, subtext below, CTA buttons ("npm install orb-ui", "Read the docs"), live voice surface preview with animated orb and theme controls, dark background
- Features — four equal-width cards with icons and labels: "7 Provider paths", "2-way Audio response", "A11y Accessible controls", "MIT Open source", dark background
- Quick start — two-column layout, headline "Choose your stack. Keep one component.", integration path list on left, code block on right with syntax highlighting, dark background
- Documentation — full-width section with "Build the interface around your voice agent." headline, image of orb UI, vertical list of guides with arrows, dark background
- Footer — three-column layout, brand info left, product links center, resources right, light gray text, dark background
- Signature details
- Animated gradient orb with soft glow
- Interactive theme toggle buttons with active state highlight
- Code blocks with syntax coloring and copy-to-clipboard button
- Floating card shadows with inset highlights
- Subtle motion presets for orb behavior
- Clean, minimal typography with consistent spacing
- Other pages
- /docs: sidebar navigation, main content with code examples and structured sections, dark background
- /playground: interactive UI with provider/theme selectors, signal display panel, volume sliders, real-time JSON output, dark background
Details zur Vorlage
- Kategorie
- AI
- Technologie
- React
- Autor
- larsen66
- Gelistet auf
- 21st.dev
- Preis
- Kostenlos
- Voice
- AI
- React
Originaldesign von larsen66, gelistet auf 21st.dev. Ottermind kopiert nicht den Code der Vorlage, sondern erstellt aus dem Briefing eine neue Website.
Das Briefing, mit dem Ottermind startet
Es öffnet sich in Studio als Entwurf – ergänzen Sie Marke, Zielgruppe und Seiten, bevor Sie es senden.
Build a ai website inspired by the "orb-ui" template. Reference brief: React voice AI component library with adapters for Vapi, ElevenLabs, LiveKit, Pipecat, OpenAI Realtime, and Gemini Live. Style and features to reflect: Voice, React. Use original copy and imagery for my brand rather than the reference's placeholder content.
So verwenden Sie diese Vorlage
- 1
Klicken Sie auf „Diese Vorlage verwenden“, um sie mit ausgefülltem Briefing in Ottermind Studio zu öffnen.
- 2
Ergänzen Sie das Briefing um Marke, Zielgruppe, Seiten und Inhalte.
- 3
Ottermind erstellt eine neue Website, inspiriert von diesem Design – im Chat verfeinern Sie sie weiter.
