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