Changelog

Content is children everywhere. Pro Button's text, Cyberpunk Button's buttonText and Beacon Badge's label are now children. Typewriter Loop's leadText is children, and morphingText is words.

Pro ButtonCyberpunk ButtonBeacon BadgeTypewriter Loop

Colours are any CSS colour, including theme variables such as var(--primary), set with color, plus accentColor, pixelColor or backgroundColor for a second one. This replaces Pro Button's and Cyberpunk Button's named colours (buttonColor is now color), Beacon Badge's beaconColor, Typewriter Loop's staticColor (pass a list to keep cycling), Scroll Tracker's trackerColor class and Fluid Shader's color1, color2 and number arrays.

Pro ButtonCyberpunk ButtonBeacon BadgeTypewriter LoopScroll TrackerFluid Shader

Components follow the surrounding text colour instead of switching modes. Kinetic Grid drops colorScheme and globalColor and Repelling Grid draws in currentColor; both are transparent, so set the background with className. Beacon Badge drops staticTheme, and Shimmer Text drops variant: set its colour with a text class. Typewriter Loop drops darkGradientBackgroundLock, as its highlight now suits both themes.

Kinetic GridRepelling GridBeacon BadgeShimmer TextTypewriter Loop

Timing is in seconds, as delay, duration and stagger. Blur Reveal's speedReveal and speedSegment are stagger and duration, Beacon Badge's speedReveal is stagger, Encoded Reveal's speed is duration, Slide Up Reveal's and Typewriter Loop's transition is duration, and Typewriter Loop's interval is in seconds.

Blur RevealBeacon BadgeEncoded RevealSlide Up RevealTypewriter Loop

Slide Up Reveal plays with trigger, like Blur Reveal, instead of autoStart and a ref; its callbacks are onAnimationStart and onAnimationComplete, and wordClass and charClass end in ClassName. Typewriter Loop's class props are wordClassName and highlightClassName. Keyboard types its text prop instead of keyAnimationToggle with animatedString. Beacon Badge's border is radius and beaconPulses is pulse. Scroll Tracker's targetContainer is container.

Slide Up RevealTypewriter LoopKeyboard UIBeacon BadgeScroll Tracker

Every component passes className, style, id, aria and data attributes, event handlers and ref to its root element, and has a default export named after its file.

No full-screen defaults: Kinetic Grid, Repelling Grid and Sphere Shader take their height from className, and Typewriter Loop takes its size, weight and colour from the surrounding text.

Kinetic GridRepelling GridSphere ShaderTypewriter Loop

Flip Clock shows the visitor's time from the first frame, instead of the time the page was built.

Flip Clock

A Props section on every component page: each prop with its type, default and what it does, read straight from the source so it always matches.

Examples on every component page, such as a pricing card, a launch countdown, an assistant loading line and a scrolling panel, each with code you can copy.

Every prop has a description in the source, so your editor shows it once the component is installed.

Encoded Reveal takes the size of the text around it, so it works at heading sizes.

Encoded Reveal

Typewriter Loop has a fluidWidth prop. Set it to false and the line keeps room for the longest word, so in a centred layout the lead text holds still while the word animates.

Typewriter Loop

Beacon Badge no longer accepts the misspelt beconColor and beconPulses props. Use color and pulse.

Beacon Badge

Typewriter Loop no longer accepts LeadText and LeadTextClassName. Pass the lead text as children.

Typewriter Loop

Keyboard UI labels its command keys cmd.

Keyboard UI

Beacon Badge's default label is a neutral “Now in beta” instead of a component count.

Beacon Badge

Hero, Logo cloud, Features, Testimonials, Call to action and Footer blocks, under Design systems → Blocks → Landing page. Like the other blocks, each one takes the look of Cueit, Skita, Folio or a generated system.

Kinetic GridBlur RevealSlide Up Reveal

Kinetic Grid draws on a transparent canvas, with lines in the current text colour and the hover glow in a new accentColor prop (var(--primary) by default). It follows dark mode and theme changes as they happen.

Kinetic Grid

Kinetic Grid fills its box and tracks the pointer correctly inside a CSS-scaled parent, such as a thumbnail.

Kinetic Grid

Security Card. It was a one-off illustration rather than a reusable component, so it is no longer in the registry. Copies you already installed keep working.

A reducedMotion prop on every animated component. It follows the visitor's device setting by default, and a Reduced motion button on each preview shows the calm version.

Beacon BadgeBlur RevealCyberpunk ButtonEncoded RevealFlip ClockFluid ShaderKeyboard UIKinetic GridPro ButtonRepelling GridShimmer TextSlide Up RevealSphere ShaderTypewriter Loop

Cyberpunk Button and Pro Button accept every native button prop: onClick, type, disabled, children and the rest. Both gained a visible focus ring, and Cyberpunk Button opens on keyboard focus.

Cyberpunk ButtonPro Button

Keyboard UI is responsive and reads as one labelled image to screen readers.

Keyboard UI

Flip Clock no longer reads the time aloud every second. It is a quiet timer, and works outside Next.js.

Flip Clock

Beacon Badge's dot keeps its colour in dark mode. The prop is now spelled beaconColor; beconColor still works.

Beacon Badge

Fluid Shader no longer rebuilds its WebGL program every time its parent re-renders.

Fluid Shader

Shimmer Text's spread prop now sets the width of the bright band.

Shimmer Text

Typewriter Loop handles an empty word list, and its props are now leadText and leadTextClassName (the old names still work).

Typewriter Loop

Scroll Tracker, Encoded Reveal, Slide Up Reveal and Sphere Shader were cleaned up to follow React's rules, with no change to how they look.

Scroll TrackerEncoded RevealSlide Up RevealSphere Shader

The Cueit and Skita design systems: tokens, fonts and component styles installed with one command.

An MCP server at satoriui.site/mcp for Claude, Cursor and VS Code, and llms.txt for language models.

New documentation: search, install commands for every package manager, usage snippets and the full source on every page.

Fluid Shader and Sphere Shader do less work per frame.

Fluid ShaderSphere Shader

Beacon Badge.

Beacon Badge

Pro Button keeps a steady width.

Pro Button

Blur Reveal animates with Motion.

Blur Reveal

Kinetic Grid was reworked and added to the registry.

Kinetic Grid

Repelling Grid.

Repelling Grid

Sphere Shader.

Sphere Shader

Shimmer Text.

Shimmer Text

Keyboard UI and Typewriter Loop adapt to their container.

Keyboard UITypewriter Loop

Blur Reveal, Encoded Reveal and Slide Up Reveal.

Blur RevealEncoded RevealSlide Up Reveal

Fluid Shader.

Fluid Shader

Kinetic Grid.

Kinetic Grid

Cyberpunk Button.

Cyberpunk Button

Flip Clock.

Flip Clock

Typewriter Loop.

Typewriter Loop

Pro Button, in three sizes and several colours.

Pro Button

Scroll Tracker.

Scroll Tracker

Security Card.

Keyboard UI.

Keyboard UI