ovio
Expressive motion components for developer websites, each in four design worlds: Minimal, Craft, Retro and Toy. Install it, own the source.
The four worlds' colours, radii, shadows and fonts as CSS variables under [data-ovio-world]. Import styles/ovio.css from your global stylesheet.
The World type, OvioProvider for a site-wide default world, and useWorld().
Per-world motion tokens as Motion transitions (Minimal eases, Craft lift, Retro steps, Toy springs) and a reduced-motion hook that resolves springs instantly.
Maps arrow, Page, Home and End keys to an index, so tab rows and chart scrubbers answer the keyboard the same way.
en-US number and UTC date formatters, so server and client render the same labels.
NumberFlow tuned to the Ovio spec: 0.9s spring spin, 0.45s fade, fixed width, continues when interrupted.
A raised key that compresses when pressed and a loose piece that springs back to its seat.
A QR code drawn as one SVG path in the current text colour, as squares or round dots.
Initials on a tile with the photo laid over them; a photo that fails to load falls back to the initials.
Eases its height to its content's, so swapping or wrapping content never jumps.
The SVG goo filter: blur shapes together and cut the alpha back to a hard edge.
useLiveData(url, fallback): client JSON fetched once per page and shared by every component that asks, with the fallback shown until it arrives or if it fails.
Native fetch with Next's data cache, a timeout, and typed errors: RateLimitError says when the limit resets.
Server-side helpers that fetch repository, star history, contributor, release and contribution data for Ovio components, with an optional token.
Server-side helpers that fetch weekly downloads from npm and bundle sizes from bundlephobia for Ovio components.
Server-side getNowPlaying for <NowPlaying />, from any attached music service: Spotify and Last.fm ready-made, musicService() for any JSON API.
A year of activity, one cell per day. From an editorial heatmap to a drum you can spin.
Stargazers over time, with annotated spikes.
A repo at a glance: name, description, stars, forks and language, in four worlds.
The people behind a project, ranked by commits.