Dots UI

Dots UI is a React animation library for morphable particle interfaces. It renders swarms of dots that can take on almost any form, and it treats a shape as a prop: the same particles morph into the next shape when a value changes. The library ships 171 particle shapes across assistant, productivity, media, commerce, and navigation, along with real UI components built from what the site calls "one living material." Developers can use ready-made components, customize their appearance and behavior, or create their own shapes in Studio. Dots UI is built for interactive interfaces, animated states, loaders, controls, visual effects, and UI that can transform from one form into another. The project is framed around the idea that interfaces should feel alive rather than static. The homepage opens with "A LITTLE LIFE. IN EVERY PIXEL" and the line "Every interface begins with small things. A letter, a shape, a moment of motion." The stated goal is to make products feel animated from the inside out: "Make the next thing feel alive." Instead of layering motion onto static components after the fact, Dots UI makes the particles themselves the interface — dots become the button, the slider, the switch. The site summarizes this as "A small API. A whole new surface," and describes the library as handling "real UI, and playful interactions" so that even the smallest visual elements carry character and movement. The foundation of the library is its shape system. Dots UI provides 171 particle shapes for React, and the core mechanic is that a shape is a prop. Changing a single prop causes the same dots to morph into the next shape, for example switching a swarm to a "wire-sphere" shape with a specified color, particle count, and height. Because the dots themselves animate between forms, smooth transitions come from the same particle field rather than separate animated assets. The library is positioned around that shift: "Every state. A little more alive." Beyond standalone shapes, Dots UI turns particles into working interface primitives. The site presents Button, Dropdown, Slider, Checkbox, and Switch as components that are built from the particle material, so interactive controls literally assemble themselves out of dots. The primitives are described as composable parts with Radix behavior and your own styles, meaning developers keep familiar component behavior and styling while the visual layer becomes particle-based. The page invites users to "Pick a primitive. Watch it come together" and shows an example with a SwarmButton inside a SwarmUI scene, where clicking a particle button triggers an ordinary click handler. Dots UI also extends the system into customization, texture, sequencing, and character. Studio is where users set color and speed, pause playback, or start from ready-made recipes such as an Assistant loop with a cloud shape, a Productivity calendar for planning the day, and a Commerce shopping bag for checkout. Textures let one shape take on different feelings — Chrome, Ink, Neon, and Glass — with chrome described as flowing silver reflections steered by pointer movement, and an on-screen note stating that this texture needs WebGL. Sequences let developers choreograph a run of shapes; the sample code builds a DotsSequence from cloud, microphone, thought-bubble, and neural-network shapes, each with a duration, and plays it through a sequence player using pro shapes. A separate set of particle actions drives reactive moments, illustrated by a dot avatar that responds when you interact with it, with the site promising "Give it a reaction" and "A thousand dots. One personality." Even words can wander: pressing a button gives a paragraph of text a new particle shape, so the same words become "a different kind of sentence." Under the hood, Dots UI is a React and TypeScript library distributed as the dots-swarm package, with UI extracted from dots-swarm/ui, styles from dots-swarm/ui.css, and pro shapes from @dots-swarm/pro. Its API is deliberately small: components such as DotSwarm, SwarmSurface, SwarmUI, SwarmButton, DotsSequence, and DotsSequencePlayer, plus handles and hooks like SwarmSurfaceHandle and swarmActions that let developers control particles from their own components. The site describes a pipeline of particles going through physics into a real button, which is why a single prop change can produce an entirely different silhouette. WebGL support is called out for richer surfaces, and the docs link to API pages for actions, usage, UI primitives, and sequences. For users, the benefit is motion that feels native to the interface instead of decorative. States become visibly different from one another, loaders and transitions carry personality, and controls stop looking like static rectangles. Because shapes are props, developers can change behavior and appearance incrementally — one prop, one new form — and because primitives are composable with Radix behavior, they can adopt the particle look without rebuilding their component logic. The site summarizes this as a small API that unlocks a whole new surface. Use cases follow directly from the examples shown on the site. Teams can use the dots for animated interface states that shift as an app changes mode, for loaders and transitions, and for controls such as buttons, dropdowns, sliders, checkboxes, and switches. Shapes can be used for visual effects, including textured surfaces like chrome, ink, neon, and glass. Sequences suit onboarding or assistant flows that move between a cloud, a microphone, a thought bubble, and a neural network. Playful interactions — a dot avatar that reacts, particles embedded in text, or a paragraph that reshapes itself on click — cover moments where a product wants to feel responsive and characterful. Dots UI targets React and TypeScript developers building interactive interfaces who want animated, particle-based visuals without assembling them from scratch. The entry points are the docs, the shape browser, the showcase pages for objects and textures, and Studio. Product Hunt lists it under Design Tools, Developer Tools, and Tech. Stack details visible in the content are React, TypeScript, Radix behavior for primitives, and WebGL for richer textures. Pricing is presented as "Free to start. More to play with," alongside a Get Pro option and pro shapes, indicating a free starting tier with a paid upgrade. In short, Dots UI turns particles into usable interface material for React. By making a shape a prop and rebuilding controls out of the same dots, it lets developers morph between 171 shapes, compose real UI primitives, design their own in Studio, and add texture, sequence, and character — so the next thing they build feels alive from the first pixel.