State Relay
Button with a progress indicator
State Relay
A button that shows progress, success or an error and lets users retry. The demo and download are ready.
Open example and sourceLoading page…
Loading page…
Page blocks, buttons and other interface elements, plus animations. Ready examples can be customized and downloaded with source, a request for an AI assistant and setup instructions.
Ready to use: 9 / Planned: 23
Nine free examples are ready: page blocks, buttons, tabs and animations. The 23 paid items are planned.
Shows whether an action is running, finished or has failed. Check it by copying text, then download the source for your project.
Open exampleResults: 32Ready to use: 9 / Planned: 23
React + TypeScriptState Relay
A button that shows progress, success or an error and lets users retry. The demo and download are ready.
Open example and sourcePress Button
A button or link with clear feedback on hover, press and keyboard focus.
Open example and sourceContent Tabs
Tabs for switching between related content, such as a description, specifications and instructions.
Open example and sourceContent Reveal
Content fades into view once. It stays visible when animation is turned off.
Open example and sourceStarter Action Band
A closing section with one main action, such as opening a form or signing up.
Open example and sourceStarter Split Hero
A two-column opening for a small product site, with a short introduction and one main action.
Open example and sourceStarter Feature Grid
A grid for three to six benefits, each with a short heading and explanation.
Open example and sourceLine Assemble
A headline appears smoothly, one visual line at a time.
Open example and sourceLedger Reflow
List items move smoothly when items are added, removed, filtered or reordered.
Open example and sourceProduct Demo Hero
An opening section with an interactive example that lets visitors try your product.
View descriptionProduct Feature Steps
Present three to five product features, each with an explanation and a visual example.
View descriptionProduct Pricing Compare
Compare the prices and features of plans on your site. Payment processing is not included.
View descriptionEditorial Title Hero
An opening section built around large text for a portfolio or studio site.
View descriptionEditorial Project Index
An index for three to eight projects, with your images, descriptions and links.
View descriptionEditorial Contact Footer
A page footer with contact details and links to the rest of the site.
View descriptionPlayful Sticker Hero
An opening section using original shapes and stickers to give a site its own character.
View descriptionPlayful Question Cards
Cards with answers to four to eight common questions about your product or service.
View descriptionPlayful Orbit CTA
A closing action at the centre of a composition, with graphic elements arranged around it.
View descriptionSegmented Navigation
A compact menu for moving between pages or sections of the current page.
View descriptionMetric Switcher
Switch between groups of figures, for example for different periods or categories.
View descriptionProject Card
A card with a project image, a short description of your role and a link to the project.
View descriptionMedia Gallery
A gallery for three to twelve images. Visitors can open a selected image at a larger size.
View descriptionMagnetic Button
A button that moves slightly towards the pointer on hover while keeping normal click and keyboard behaviour.
View descriptionTestimonial Switcher
A set of testimonials that visitors can switch through manually.
View descriptionStagger Group
A group of elements appears one after another, with a short delay between them.
View descriptionSoft Mesh Background
A soft gradient for the background of one section, created with CSS.
View descriptionPointer Spotlight
A background highlight follows the pointer inside a section without changing its text or content.
View descriptionContext Bridge
Content changes smoothly between two prepared views inside one area of the page.
View descriptionFocus Plane
A thumbnail changes into a detail view with a smooth change of size and position.
View descriptionEdge Unfold
A panel or menu slides in from a chosen edge and slides back when closed.
View descriptionScroll Chapters
An indicator shows the current section and reading progress as visitors scroll down the page.
View descriptionMetric Roll
A number changes smoothly to its new value using the number format of the selected language.
View description