Keyboard, a redesigned Masonry, and zero-setup contributions
One big day for Spark UI: a mechanical Keyboard component with a homepage type test, an animated item-driven Masonry powering Templates and Showcase, and a clean open-source boundary with no-setup contributions.
v2.3.0Today's release rolls a full day of updates into one: version 2.3.0 introduces the Keyboard component, a typing test on the homepage, and the Keyboard Warrior leaderboard, adds Hello — an Apple-style welcome greeting — to Text & Motion, rebuilds Masonry into an animated grid that now powers two pages, and draws a clean boundary between the open-source frontend and the private production backend, with a flag that makes contributing a zero-setup experience.
Keyboard is a 60% mechanical keyboard rendered entirely in code. Chunky two-tone keycaps press down with a 3D depth animation, the board scales fluidly with its container, and everything is styled with semantic tokens that adapt to light and dark themes. It listens to your physical keyboard and animates the matching keycaps as you type, and clicking an on-screen key calls onKeyPress with its value, so it works as a visualizer and a virtual keyboard alike. The docs open it in a bottom sheet for room to breathe, and the Dynamic Island example adds a keystroke feed where every key blurs in, lingers, and blurs away.
The same component powers a new toy on the homepage: a 15-second type test, inspired by Keeby. Hit the Type test button in the hero and the page gives way to a random paragraph, a live stats panel, and the keyboard mirroring your keystrokes. A caret glides between letters as correct ones ink in and mistakes flash red, the seconds, wpm, and accuracy counters roll like odometers, and your final score counts up with Basic Number Ticker before offering a restart.
Typing fast is more fun when it counts, so the test now feeds Keyboard Warrior — a leaderboard at /keyboard-warrior, also linked from the navbar. Finish a run, hit Post score, and sign in with GitHub to claim your spot; each player holds exactly one score, and posting again replaces the previous run. The page crowns the top three on a podium with their GitHub avatars, and avatars come straight from the auth profile — nothing extra to fill in.
Text & Motion also gains Hello, a recreation of the Apple setup-screen welcome. A large greeting cycles through ten languages — Hello, こんにちは, Bonjour, 안녕하세요, and more — each word floating up and blurring in, holding for a moment, then blurring away for the next. The greetings list and interval are both configurable, so it works just as well for product welcomes as for hero flourishes.
Masonry has been rebuilt from a CSS-columns wrapper into an animated, item-driven grid. It takes an items array with an img and a pixel height, measures its container, and places each tile into the shortest column, with configurable duration, stagger, entry direction, and hover behavior. A new renderItem prop swaps the default image tile for any content while keeping the same animations — which is exactly how Showcase now renders its community project cards, and how the new Templates page shares the same layout engine with dimmed placeholders until real templates ship.
The repository itself got the same attention. The public repo is now purely the component library, the documentation site, and safe Supabase client helpers; the production backend lives in a separate private repository. Security never relied on hiding the schema — it comes from authentication, Row Level Security, and least-privilege access — and the full policy is documented in docs/architecture/OPEN_SOURCE_BOUNDARY.md.
The change contributors will actually feel is the NEXT_PUBLIC_BACKEND flag, which defaults to false. Clone the repo, run npm install and npm run dev, and the entire site works — docs, previews, registry, everything — with no Supabase project and no accounts to create. Backend-powered features like login and favorites simply step aside instead of breaking, and switching the flag on with your own Supabase project restores the full experience using the schema in supabase/examples/favorites.sql.
Keyboard and Masonry are available now through the Spark UI registry with live previews and full source you can customize after installation. The type test is live on the homepage — bring your fastest fingers.
Featured component
Keyboard
A two-tone mechanical keyboard with 3D press animations and physical key highlighting.
Install Keyboard
Featured component
Hello
An Apple-style welcome greeting that cycles through languages with a soft blur crossfade.
Install Hello
Featured component
Masonry
An animated masonry grid that lays out image items by explicit height, with configurable entry and hover animations.