VelinStyle 0.8.0 is out — a release focused on motion, filter effects, chart animations, new Web Components, and major CLI upgrades.
If you're into modern CSS, accessibility, or native Web Components, this update might be interesting for you.
🚀 What is VelinStyle?
VelinStyle is a CSS + Web Components framework built around:
modern CSS (container queries, :has(), color‑mix(), P3 colors, view transitions)
native Web Components (30+ components)
WCAG 2.2 accessibility
a built‑in security layer (Trusted Types, sanitizer, URL validation)
a CLI for scaffolding, layout audits, icon management, and scanning
zero build requirements — works with just + </p>
<p>✨ What’s new in 0.8.0?<br>
Motion Tokens<br>
New easing functions and durations:</p>
<p>spring, elastic, expo-out, back-out, snappy</p>
<p>slowest (800ms) and cinematic (1200ms)</p>
<p>These are available as CSS tokens and utilities.</p>
<p>Filter & Glass Utilities<br>
A new filter-effects.css utility pack:</p>
<p>velin-saturate-*<br>
velin-hue-rotate-*<br>
velin-contrast-*<br>
velin-invert, velin-sepia<br>
velin-drop-shadow-*<br>
velin-glass and velin-glass-strong<br>
Chart Animation Utilities<br>
New keyframes + utilities for data‑driven UI:<br>
velin-stroke-draw<br>
velin-sparkline-glow<br>
velin-value-bump<br>
velin-live-pulse<br>
velin-count-fade</p>
<p>New Web Components<br>
Three new components:</p>
<p>html<br>
<code><velin-sparkline values="1,4,3,6,8,5"></velin-sparkline><br>
<velin-counter value="1280" format="currency"></velin-counter><br>
<velin-live-dot></velin-live-dot></code><br>
Sparkline: animated SVG mini‑charts with live updates</p>
<p>Counter: rAF‑based number animation with Intl.NumberFormat</p>
<p>Live‑Dot: realtime status indicator</p>
<p>Motion Helpers<br>
Two new JS helpers:</p>
<p>velin-reveal.js — scroll‑reveal with auto‑init<br>
velin-flip.js — FLIP‑based reordering + filtering animations</p>
<p>CLI Upgrades<br>
The CLI now includes:</p>
<p>velinstyle scaffold — blueprint‑based HTML generator<br>
velinstyle layout audit/suggest/fix — detects and fixes Flex/Grid issues</p>
<p>Prefix‑map support for migration workflows</p>
<p>📚 Documentation & Live Demos<br>
VelinStyle comes with full documentation and several real‑world demo pages:<br>
UI Kit<br>
SaaS Landing<br>
Dashboard<br>
Forum<br>
E‑Commerce<br>
Crypto Dashboard</p>
<p>Interactive Web Components</p>
<p>👉 Live docs & demos: <a href="https://velinstyle.info">https://velinstyle.info</a><br><br>
👉 GitHub repo: <a href="https://github.com/SkyliteDesign/velinstyle">https://github.com/SkyliteDesign/velinstyle</a></p>
<p>🧩 Example: Using a Web Component<br>
html<br>
<code><script type="module" src="https://cdn.velinstyle.info/velinstyle-components.js"></script></code></p>
<p><code><velin-dialog open><br>
<h2>Hello VelinStyle</h2><br>
<p>Accessible Web Components with zero dependencies.</p><br>
</velin-dialog></code></p>
<p>🧪 Example: Using Utilities<br>
html</p>
<p><code><div class="velin-p-4 velin-bg-primary velin-text-white velin-rounded-lg velin-shadow-md"><br>
Hello World<br>
</div></code></p>
<p>💬 Feedback welcome<br>
If you work with CSS, Web Components, or UI frameworks, I’d love to hear your thoughts — especially around:</p>
<p>component API design<br>
motion utilities<br>
accessibility patterns<br>
CLI workflows</p>
<p>Happy to answer questions or dive deeper into the internals.</p>
Top comments (0)