Pixel assemble
A grid of cells scatters into space, tumbles, and snaps back into a code-like pattern before a scan line sweeps it and a verified badge pops.
npm install motion clsx tailwind-merge lucide-react or npx programmable-cli add pixel-assemble
MP4 and GIF exports are for sites that are not on React. Each counts as this month’s download of the component.
What it’s for
- Celebrating a signup, an upgrade or a launch
- Section transitions and hero moments
- Product tours that need a little delight
How to use it
- Download the file. PixelAssemble.tsx is one self-contained React component. Pick a brand colour above and the file comes in it, where the component has a main colour to replace. Sites not on React can take it as an MP4 or GIF.
- Install what it uses.
npm install motion clsx tailwind-merge lucide-react, with Tailwind CSS set up in your project. - Drop it in.
import { PixelAssemble } from "./PixelAssemble";then render<PixelAssemble />where you want it.
Want it about your product? Make one like it and the studio builds a version with your features, numbers and brand.
Related components
ConfettiA burst of confetti for a win moment, fired by a prop or the built-in button.
Feature cubeA slowly turning 3D cube with a feature on each face, badges drifting around it, a soft glow behind, and buttons that swing it to any side.
Impact chartMonthly bars rise, a line draws through their tops, a dashed launch divider splits before from after, and three result cards fill in beneath.
Success story coverA magazine-cover case study that turns its own pages: the headline and quote slide in, a tilted stat card counts up, and the next story arrives on its own.React + Tailwind CSS. Use downloads in your own sites and products; please don’t resell them as a component library. Repeat downloads of the same component in a month don’t count.