Animated React components for your site

Who this is for

This is for a developer or a marketer with developer help who wants a page to feel alive, without building charts and motion from scratch. Sets also suit no-code sites, because they embed without any React.

Two ways to get a component

Route one: the marketplace

1. Browse the marketplace. Anyone can browse and play components with no account.
2. Open a component and set Your brand colour.
3. Download it. You get one .tsx file with a named and a default export.
4. Install the libraries it needs, and add the file to your project.

Developers can skip the site with the CLI:

• npx programmable-cli login --key pgm_…
• npx programmable-cli list --q chart
• npx programmable-cli add bar-chart
• npm install motion lucide-react clsx tailwind-merge

The add command writes components/programmable/BarChart.tsx. Use --dir for another folder. Your project also needs Tailwind, because the components are styled with it.

Make one like it opens the studio with that component as the starting point, so you get the same idea about your own product.

Route two: a component set

1. Open Library › Component sets and enter your website, or open a product demo and choose Turn into components.
2. Review the plan. Nothing is generated until you've approved it.
3. The first component sets the reference. The others are generated and compared with it for consistency.
4. Publish a component and copy its embed, or download it as a React component from Export.

A set can include a hero loop, feature spotlight, how it works, product walkthrough, metrics moment, before and after, testimonials, or integrations. When you extract your brand from your site, the brand kit keeps a style profile: colour roles, corner radii, borders, shadows, density, type scale and button style. Components use it so they look like part of your site. Read about website component sets for more.

Use real quotes and real numbers in testimonials and metrics. The studio can draw a convincing dashboard, so it's on you to make sure what it shows is true.

What you get

• Source: a single .tsx file you can read and change. It depends only on the packages listed with it.
• React / Next.js wrapper: a .tsx file that loads lazily, shows a poster and pauses offscreen. It needs a share link first.
• Embed: a one-line script that loads when scrolled into view, or a plain iframe, with steps for Webflow, Framer, WordPress, Shopify and Squarespace.
• MP4 or GIF: for sites that don't use React.
• Transparent WebM: to overlay on your own section.

Motion and page speed

Marketplace components respect the reader's reduced motion setting. A looping section is a separate question. WCAG 2.2 criterion 2.2.2 says moving content that starts by itself, lasts over five seconds and runs beside other content needs a way to pause, stop or hide it. Add a control if your loop qualifies. Our guide to animated demos and Core Web Vitals covers load order and posters.

What it costs

Downloading the same component again in the same month doesn't count twice, and an MP4 or GIF export counts as that month's download of it. Each set component is one generation, about one film's credits, or one animation on an own-key plan. The set shows its cost before you run it. A set of four would use most of Starter's month. Pricing has the current figures.

When another route is better

• You want open-source components at no cost. Community libraries such as shadcn/ui are worth trying first for basic sections.
• You need a one-off static section. A few lines of CSS will be lighter than any animated component.
• Your site isn't React and you want the marketplace source. A .tsx file won't run there. Export the component as an MP4 or GIF instead.
• You want to resell a component library. The licence covers your own sites and products, not resale or redistribution as a library.

A brief you can paste

This uses a made-up product. Open Library › Component sets, enter your website, then add this.

"Plan a set for the Acme Invoices homepage from my invoicing demo: a hero loop showing a timesheet turning into a paid invoice, a how it works section with three numbered steps, and one feature spotlight on automatic reminders. Match the site's corner radii and button style. Use only the product's own screens, and don't add any testimonials or metrics."

Common questions