Zur Component Expo springen
VelinStyle+PixVerse Partnerwerbung · AI Video Maker Werbung
EN DE

Accessibility-first CSS + Web Components

CSS Design System mit live Web Components.

OKLCH-Tokens, Utilities, Themes und 43 Custom Elements — nur laden, was im DOM liegt.

npm i @birdapi/velinstyle@1.3.0
Loslegen Installation GitHub Docs Live Demo

Surfaces & Studio

Atelier und Quiz jetzt. Studio als Nächstes.

Fertige Interfaces und die Quiz Challenge heute — visueller Template-Bau, wenn Studio kommt.

Jetzt verfügbar

VelinStyle Atelier

Kuratierte produktionsreife Interfaces, Live-Showcases und Template-Bibliothek. Surfaces per CLI holen und mit scaffold --atelier zusammensetzen — komplette Flächen, keine isolierten Bauteile.

  • Template-Bibliothek
  • Live-Demos
  • CLI-Pull (beta)
Atelier öffnen Bibliothek CLI-Docs

Demnächst

Velin Studio

Der geplante visuelle Template-Builder: Atelier-Surfaces kombinieren, Layouts bearbeiten und produktionsreifen Markup exportieren — Authoring-UI über der Bibliothek, kein Ersatz dafür.

  • Template-Builder
  • Kombinieren & Export
  • Geplant
Noch nicht ausgeliefert Roadmap in 1.3.0

Jetzt verfügbar

Quiz Challenge

60 Fragen zu Komponenten, Tokens, A11y, Runtime und CLI — Level, Streaks, Badges und Leaderboard. Eigenständige App unter /vs-quiz/.

  • 60 Fragen
  • 3 Level
  • Leaderboard
Quiz starten Docs

Framework-Fakten

1.3.0 auf einen Blick

Zuerst die Kernzahlen — danach gebündelte Fähigkeiten. Der Production Builder liefert nur, was ihr braucht: build only what your project actually uses.

35+ CSS Components 43 Web Components 27 HTML Attributes 13 Themes 5 Transparenz-Säulen

Kern

Build & CLI

Transparenz & AI

Warum VelinStyle

Ein Vorteil pro Karte

Accessibility

WCAG-2.2-AAA-orientierte Tokens, Fokus, Keyboard-Contracts.

Accessibility Docs

Modernes CSS

OKLCH-Tokens, Nesting, Layers, Container Queries.

Design Tokens

Native Runtime

bootFromDOM lädt nur Komponenten, die auf der Seite liegen.

JavaScript API

Web Components

43 Custom Elements für Overlays, Search, Toast, Charts.

Component Index

Developer Experience

npm-Pin, CDN, CLI, generierte Docs, Live-Galerien.

Download

Performance

Selektive Loader, Audit-CLI, kein Full-IIFE auf der Home.

Performance Audit

Framework-Vergleich

Bootstrap · Tailwind · VelinStyle

Kriterium
Bootstrap
Tailwind
VelinStyle
Markup-Dichte
Niedrig
Hoch (Class-Sprawl)
Kontrolliert
CSS
Komponenten
Utilities
Komponenten + Utilities
Accessibility
Teilweise
Selbst bauen
Integriert
Themes
Begrenzt
Selbst bauen
13 Themes
Motion
Plugins
Bibliotheken
Integriert
Web Components
Nein
Nein
43
CLI
Eingeschränkt
CLI
CLI + Generator + Audit
Agent Support
Nein
Nein
velin-agent.json · llms.txt
Live Demo
Docs Samples
Play CDN
Diese Seite

Ein Stack · drei Habits

CSS · Web Components · Attributes

1. CSS Components

<button class="velin-btn velin-btn--primary">Invite</button>

Token-basierter Button mit Varianten und Focus Ring.

Button Docs

2. Web Components

<velin-theme-toggle themes-base="dist/themes/"></velin-theme-toggle>

Custom Elements für Theme, Toast, Overlays, Search.

Component Index

3. HTML Attributes

<div velin-reveal>Erscheint beim Scrollen</div>
Erscheint beim Scrollen

27 velin-*-Brücken für Motion und Behavior.

Motion Attributes

Capabilities

Architecture Map

Core, Runtime, Accessibility, Developer und AI — anklickbare Boxen öffnen die Docs.

VelinStyle

AI Runtime

Skill-System ist bereits in VelinStyle

Offizielle Skills, Packs und Workflow-Graphs laufen über Registry + CLI — nicht geplant, sondern shipping.

shipped Skill Engine Registry Packs Workflows CLI
01Registry

IDs, Dependencies, Status, Confidence

02Packs

frontend · design · a11y · review · enterprise

03Workflows

Landing · Component Ship · Release Gates

04CLI

velinstyle skills · workflow

Schnellstart

velinstyle skills list && velinstyle workflow run release-gate

CLI Live

Motion Clips CLI bei der Arbeit

So sieht velinstyle motion aus — und die neue Surface dazu: Presets, lokale Engine, optional PixVerse.

velinstyle — motion clips 
$

Release

Neu in VelinStyle 1.3.0

Velin Motion Clips — Bild→Clip-CLI (lokal HTML/CSS + optional PixVerse AI). Page Motion bleibt die DOM-Registry. Baut auf Motion 1.2.6–1.2.9 und Velin Experience auf.

1.3.0Motion ClipsNEU

Motion-Clip-Pipeline

Paket @birdapi/velinstyle-motion · motion create / atelier / transition / sequence / usage · Wizard · Mini-Prompts · optional PixVerse (Credits).

DocsCLI
1.2.7Motion

Motion Engine Surface

Timeline Registry + Runtime · Composer · Scroll/Transitions · analyze · review · optimize · volle Blueprint-Registry. Studio-ready Datenmodell; Studio-UI später.

DocsCLI
1.2.6MotionNEU

Motion Foundation

Volle Motion Registry · Trigger Engine · Policies · doctor/scan/policy/demo · Gallery v1 · velin-motion + velin-trigger.

DocsAttribute
1.2.5Experience

Velin Experience

Registry · Contract · Themes/Modes · volle CLI-Oberfläche · dashboard · --record + replay · Plugin-Skeleton. Das Binary ist nur der Einstieg.

CLIProduction
1.2.4ScannerNEU

Content Scanner

Scan your project — HTML, Blade (.blade.php), Twig, Vue, React, Astro, Markdown/MDX. Strukturierter Production Report mit Savings %.

DocsReport
1.2.2Production

Production Builder

Build only what your project actually uses. Projekt analysieren — CSS, Web Components, Themes, Icons und Motion nur für das, was du brauchst, inkl. Größen-Report.

DocsCLI
1.2.2Atelierbeta

Atelier CLI

Library-Templates aus der CLI: atelier list, atelier 24, scaffold --atelier 24. Atelier ≠ Velin Studio (Studio bleibt planned).

DocsLibrary
1.2.2Components

Neue Komponenten

velin-otp-input, velin-password-strength, velin-empty-state — Komponenten, die Teams wirklich brauchen.

DocsLive Demo
1.2.2Tabellen

Tabellen-Severity

Severity-Zustände für Tabellen und Data Tables — weniger Custom-CSS.

DocsTabellen
1.2.2Overlays

Overlay-Titel

Modal, Drawer und Sheet unterstützen dynamische / reaktive Titel.

ModalDrawer
1.2.1Transparenzbeta

Transparency Framework

Kennzeichnung und Nachweis — KI, Trust, Compliance, Metadaten. HTML-Bridge, Claim-Taxonomie, CLI doctor / report / migrate.

Live DemoDocsCLI
1.2.2Runtime

Motion Runtime

Reveal, Stagger und Reduced-Motion-Contracts in der Attribute-Schicht.

Live DemoDocsAPI
1.2.2Search

Suche

Fuzzy-Dokumentationssuche als velin-search auf der Homepage.

Live DemoDocsAPI
1.2.2Docs

Highlight

Selektives Syntax-Highlighting für Galerien und Code-Blöcke.

Live DemoDocsAPI
1.2.2CLIbeta

CLI Plan und Review

Plan-first Scaffolding und heuristische Review-Gates für A11y, SEO und Design — beta, Schemas wachsen weiter.

Live DemoDocsAPI
1.2.2AIbeta

Agent-Metadaten

Reicheres velin-agent.json und llms.txt mit Knowledge Graph, Pages, Sections — beta-Seed.

Live DemoDocsAPI
1.2.xAI Skillsbeta

Skill Engine + Registry

Offizielle Skills mit Capabilities, Workflow-Graphs, Packs, Bundles und Projekt-Templates für Agent-Ausführung.

Live DemoDocsCLI
1.2.2Metabeta

Knowledge + Blueprints

Page Types, Section Graphs und Design Constraints — Seed-Coverage, kein fertiges AI Design System.

DocsAPI
1.2.2Runtime

Subpath APIs

Selektive ESM-Entry-Points — nur die Chunks booten, die dein DOM braucht.

Live DemoDocsAPI
1.2.2A11y

Accessibility

AAA-orientierte Defaults, Focus-Manager-Overlays und live Test-Center-Checks.

Live DemoDocsAPI
1.2.2Themes

Theme Runtime

Attribute- und System-Dark-Parität, dichterer Surface-Stack, 13 Themes.

Live DemoDocsAPI
1.2.2Perf

Performance

Selektive Loader und Audit-CLI — kein Full-IIFE auf der Homepage.

DocsLive Demo
1.2.2CSS

Container Queries

Komponentenlokales Layout mit Container-Query-Utilities und Docs.

DocsLive Demo
1.2.2Components

Komponenten-Bibliothek

43 Web Components und 35+ CSS Components — Overlays, Suche, Charts, Forms.

DocsLive DemoAPI
1.2.xUtilities

Utilities

Layout-, Display-, Spacing- und Position-Utilities auf dem gemeinsamen Token-Vertrag.

DocsLive DemoAPI
1.2.xAttributes

HTML Attributes

27 HTML Attributes für Motion, Density und Progressive Enhancement.

DocsLive DemoAPI
1.2.xThemes

Themes

Dreizehn Themes auf einem Token-Vertrag — live im Nav umschaltbar.

DocsLive DemoAPI
1.2.9RC

Release Candidate

Versionen, Site-Badges und Docs auf einer Linie nach Technical Debt 1.2.8. verify:home wieder grün.

Changelog
1.2.8Debt

Technical Debt

Security-Check-Schritt, publish pack dry-run, Malware-Kategorien, Motion-V2-Fallbacks dokumentiert.

Changelog
1.2.3Security

Velin Security Suite

CLI Security auf der Security Engine — doctor, scan, audit, publish, ci, deps, secrets, report.

Docs
1.2.0Foundation

1.2 Foundation

Ship Surface, Design Intelligence, AI Skills und neue WC-Primitives — Basis der 1.2-Linie.

Changelog

Live Playground

Wie treiben Tokens eine komplette UI-Surface?

Theme, Density, Radius und Spacing formen dieselbe Live-Surface. Labels, Fokus und Contracts bleiben intakt.

Qualitätsaussagen werden im Test Center gemessen — hier nicht behauptet.

MRR

€48k

Churn

1.2%

NPS

72

<velin-theme-toggle themes-base="dist/themes/"></velin-theme-toggle> <button class="velin-btn velin-btn--primary">Invite</button>

Component Contracts

Wann welche Overlay-Komponente?

Zweck, Wann / Wann nicht, Keyboard, ARIA, API — danach die Live-Demo.

Qualitätsaussagen werden im Test Center gemessen — hier nicht behauptet.

EscFocus trap

Modal

Blockierende Entscheidung. Für Bestätigen/Zahlen. Nicht für Navigation.

Esc, Focus Trap, aria-modal. Tastatur: Tab-Zyklus.

SideNav

Drawer

Seitennavigation / Filter. Nicht für kritische Bestätigungen.

Secondary

Sheet

Sekundäre Aufgaben, Warenkorb, Notizen. Formulare kurz halten.

Anchor

Popover / Tooltip

Zusätzliche Aktionen ohne Modal.
RovingARIA

Accordion / Tabs / Toast

Roving Tabindex.
Live

Search / Code / Sparkline

bootFromDOM({ attributes: true, motion: true });
MenuEsc

Dropdown

Aktionsmenüs. Nicht für Navigationsbäume.

Contracts
FilterKB

Combobox

Filterbare Einzelauswahl mit Tastatur.

⌘K

Command

Palette für Power-User (Ctrl/Cmd+K).

SwipeFocus

Carousel / Lightbox

Slide 1 — tokens
Slide 2 — motion
Slide 3 — a11y
 VelinStyle-Logo VelinStyle-Logo monochrom
MenubarDialog

Menubar / Dialog

Dashboard

Wie sieht ein echtes Dashboard aus?

App-Shell mit Sidebar, KPIs, Tabelle, Tabs, Drawer und Theme-Switch — alles VelinStyle.

Qualitätsaussagen werden im Test Center gemessen — hier nicht behauptet.

Aktiver Workspace

Seats

42

Tickets

7

Trend

Dashboard-Rechnungen
RechnungStatusSumme
#1042Bezahlt€129
#1041Offen€49

Token Lab

Wie verändert sich dieselbe Surface mit Tokens?

Spacing, Radius, Elevation, Density, Surface, Motion — live auf Nav, Card, Form, Chart und CTA.

Qualitätsaussagen werden im Test Center gemessen — hier nicht behauptet.

Steuerungen schreiben echte --velin-*-Tokens auf #tokenSurface. Optionaler Vergleich mit Defaults unter der Live-Stage.

Live-Tokens

Surface-Karte

Radius, Elevation, Density, Accent und Typografie greifen hier über --velin-*.

Token-Beispielzeilen
TokenWert
--velin-radius-mdlive
--velin-space-3live
--velin-color-primarylive
Mit Defaults vergleichen

Control (defaults)

Baseline card

Unmodified --velin-* defaults for side-by-side proof.

Animation Gallery

Welche Motion-Patterns zählen in Product-UI?

Nur contract-gestützte Motion: Fokus, Overlays, Feedback, Loading, Reveal und Reduced Motion.

Qualitätsaussagen werden im Test Center gemessen — hier nicht behauptet.

Focus

Sichtbarer Fokusring für Tastatur. Tab in die Kontrolle.

Docs Playground
Collapse

Sekundären Inhalt zeigen, ohne die Seite zu verlassen.

Erweiterter Panel-Inhalt.

Docs Playground
Modal

Blockierende Entscheidung mit Focus Trap. Esc schließt.

Docs Playground
Drawer

Seitennavigation / Filter. Kurze Pfade halten.

Docs Playground
Toast

Kurzes Status-Feedback mit Live-Region-Semantik.

Docs Playground
Loading

Busy-State + Spinner. Lieber explizites aria-busy.

Docs Playground
Reveal

Entrance nur, wenn Motion erlaubt ist.

Eingeblendet
Docs Playground
Reduced motion

Respektiert prefers-reduced-motion. Umschalten meldet die Systempräferenz.

—

Docs Test Center

VelinStyle Test Center

Kannst du Accessibility live prüfen?

Live-Labs im gleichen Karten-Layout — Settings setzen, Stage beobachten, Markup kopieren.

Qualitätsaussagen werden im Test Center gemessen — hier nicht behauptet.

Live-Stage · LTR · Desktop · Motion an · Kontrast normal · Theme auto

ARIA Live bereit

motion

axe-core scan

—

    Tastatur-Navigation

    —

    Focus

    —

    ARIA

    —

    RTL

    —

    Responsive

    —

    Dark Mode

    —

    Light Mode

    —

    Reduced Motion

    —

    High Contrast

    —

    Accessibility-Sweep

    —

    Stage-Snapshot 
    —

    Werte darunter sind keine Marketing-Claims — für messbare Fehler axe-core ausführen.

    Showcase

    Welche echten Projekte laufen mit VelinStyle?

    Screenshot, Branche, Components, Utilities, Themes, Responsive, Dark, A11y, Live-Demo, Code, Case Study.

    Qualitätsaussagen werden im Test Center gemessen — hier nicht behauptet.

    Showcase wird geladen…

    Faire Kriterien

    VelinStyle beurteilen — ohne Fake-Competitor-Skins

    Vier messbare Achsen. Keine Bootstrap-/Tailwind-/Shoelace-CSS-Skizzen. Vergleichen nach Belegen, nicht nach Vibes.

    Kriterium Was wir messen VelinStyle heute Expliziter Non-Claim
    Accessibility Fokus, Tastatur, ARIA-Contracts; live axe auf der Stage Component Contracts + Test Center axe-Scan Kein WCAG-Zertifikat für dein fertiges Produkt
    Tokens OKLCH Design Tokens + Theme-CSS, das cascaded Token Lab schreibt echte --velin-* Kein Figma-Token-Sync und keine Multi-Brand Design-Ops-Suite
    Bundle Selektiver Boot vs. voller Framework-Dump ESM bootFromDOM — nur Komponenten, die im DOM liegen Kein Zero-JS / CSS-only; Runtime lädt weiterhin, was du nutzt
    DX Docs-Erreichbarkeit, Suche, Install-Pfad, AI-Metadaten Nav-Suche, Docs, npm install, velin-agent.json / llms.txt Keine volle IDE-Extension und kein Tailwind-großes Plugin-Ökosystem

    Competitor-Parity-Claims? Nutze deren Docs und miss dieselben vier Achsen — keine bemalten Lookalikes.

    Install

    Wie startest du mit VelinStyle 1.3.0?

    npm-Pin, CDN, Runtime-Exports, Docs, Playground, Source — kopieren und shippen.

    velinstyle — install 
    $
    import { bootFromDOM } from '@birdapi/velinstyle/runtime'; bootFromDOM(document, { attributes: true, motion: true, highlight: true });
    Dokumentation lesen Playground GitHub

    Gebaut für das moderne Web

    • WCAG 2.2 AAA
    • Modernes CSS
    • Web Components
    • Runtime
    • CLI
    • AI-ready
    • Open Source

    Schneller bauen.
    Cleverer gestalten.
    Besser ausliefern.

    Partner · Motion AI

    VelinStyle + PixVerse

    Optionales AI-Video für Motion Clips — lokales HTML/CSS bleibt kostenlos; PixVerse liefert MP4, wenn du es brauchst.

    AI-Clips, die in deinen Motion-Stack schmelzen

    Text- & Image-to-Video über PixVerse, angebunden über den VelinStyle-CLI-Partnerflow. Derselbe Neon-Look wie die Motion-Surface — jetzt am Ende der Expo.

    Mit PixVerse starten PixVerse Docs Motion Clips

    Affiliate-Partnerlink · öffnet PixVerse-Signup

    Live velin-modal — Escape, Overlay-Klick, Focus Trap.

    Filter

     Navigation

    Offcanvas

    Offcanvas-Pattern über velin-sheet.

    Drawer-Animation live.

    Sheet

    Modal Open/Close-Lifecycle.

     Neu Fakten Warum VelinStyle Vergleich Drei Habits Playground Token Lab Test Center Install Docs