A comprehensive suite of high-fidelity interaction components. It offers motion-driven components that designed with motion-react and tailwindcss, that blends seamlessly.
A status badge with a pulsing beacon dot and a blur-in label, for live, new and alert states.
Text that comes into focus from a blur, letter by letter, on mount or when scrolled into view.
The closing call to action on the emphasised surface, with a heading that blurs in as it scrolls into view. Renders in any Satori UI design system (cueit, skita, folio or a generated one): install a system first.
A new-project form with a URL derived from the name, visibility as radio cards, and validation that replaces a hint with its error. Renders in any Satori UI design system (cueit, skita, folio or a generated one): install a system first.
An Apple-inspired design system: a scoped stylesheet that re-skins the shadcn/ui foundation, plus a KPI tile, a segmented control and a page header.
A neon button whose pixel panel sweeps across it on hover and keyboard focus.
An overview screen in an app shell: four KPIs with one emphasised, recent invoices with status tints, and plan usage. Renders in any Satori UI design system (cueit, skita, folio or a generated one): install a system first.
A customers table with status filter tabs, search, row selection with select-all and paging. Works on any rows you pass. Renders in any Satori UI design system (cueit, skita, folio or a generated one): install a system first.
A reusable EmptyState and the three a product needs: first run, no search results and a failed load. Renders in any Satori UI design system (cueit, skita, folio or a generated one): install a system first.
Text that decrypts into place: random characters scramble, then resolve letter by letter.
Six features on tiles, each an icon, a name and one sentence, under a heading that slides up as it scrolls into view. Renders in any Satori UI design system (cueit, skita, folio or a generated one): install a system first.
A split-flap clock and countdown timer with smooth flip animations, in four sizes and several variants.
A flowing, glossy WebGL fluid background with configurable colours, speed and complexity.
An editorial design system: a scoped stylesheet that re-skins the shadcn/ui foundation to look like a printed report, plus a masthead and a report-style figure.
A site footer: brand and tagline, a newsletter sign-up, three columns of links and a row of legal links. Renders in any Satori UI design system (cueit, skita, folio or a generated one): install a system first.
A landing hero: an announcement, a headline that blurs in, two actions and a line of proof, over a Kinetic Grid drawn in the system's own colours. Renders in any Satori UI design system (cueit, skita, folio or a generated one): install a system first.
An interactive keyboard that lights up as you type and can type out your text on a loop. A hero visual for developer tools.
An interactive grid background whose lines and nodes ripple outward wherever you click.
A strip of four proof points, each a muted icon, a name and one line, split by hairline dividers: backs the page up without competing with it. Renders in any Satori UI design system (cueit, skita, folio or a generated one): install a system first.
Three plans with a monthly and yearly switch. The recommended plan takes the one emphasised surface a view gets. Renders in any Satori UI design system (cueit, skita, folio or a generated one): install a system first.
A call-to-action button with an animated pixel arrow, in four sizes and any colour.
An interactive dot-grid background whose dots move away from the cursor.
A reading-progress bar that tracks scroll position across the page or inside any scroll container.
An account settings page: a section list beside profile, notification switches, density radio cards and a danger zone. Renders in any Satori UI design system (cueit, skita, folio or a generated one): install a system first.
A light sweep that glides across text, for loading states and "thinking" indicators.
A split sign-in page: email, password and Google on one side, a customer quote on the emphasised surface on the other. Renders in any Satori UI design system (cueit, skita, folio or a generated one): install a system first.
A dense, monospaced workspace system: a scoped stylesheet that re-skins the shadcn/ui foundation with monospaced text, grey and a green accent, plus a KPI tile, an inset grouped list, a cascade loader and a page header.
A text reveal that slides characters, words or lines up into view, with stagger and scroll triggers.
A glowing 3D sphere rendered with Three.js and a bloom pass, for hero sections.
Customer quotes, one featured on the emphasised surface and the rest on tiles beside it, each signed with a name and role. Renders in any Satori UI design system (cueit, skita, folio or a generated one): install a system first.
A headline that cycles through words with a typewriter wipe, a coloured cursor and optional gradient text.