Website component sets

A component set is a family of short, looping animations made for the sections of a website, all in one design system so they look like they belong together.

Make a set

Open Library › Component sets (or + New › Component set) and enter your website to plan a matching family of components. Or open a product demo and choose Turn into components.

You review the plan before anything is generated. Each component is then one generation: about one film's worth of credits, or one animation on a BYOK plan.

Kinds of component

• Hero loop: a wide strip under your headline, showing the product at work.
• Feature spotlight: one feature, shown doing its job.
• How it works: three or four numbered steps that light up in turn.
• Product walkthrough: the product in use, beside the business view it updates.
• Metrics moment: a live dashboard with the number that matters.
• Before / after: a wipe from the old way to yours.
• Testimonials: customer quotes and results that rotate.
• Integrations: your product at the centre of the tools it connects.

Looking native to your site

When you extract your brand from your website, 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. See Your brand kit.

Put them on your site

When a component is ready, publish it and copy its embed. See Share links and embeds. You can also download it as a React component from Export.