OUR COMPONENT
LIBRARY.

Hero with a photo that slowly zooms and pans over 26 seconds (Ken Burns), text on top and a pause button bottom right, required by WCAG 2.2.2 for motion longer than 5 seconds. Pure CSS: a transform animation plus animation-play-state via :has() on a real checkbox. With reduced motion the image stands still and the button disappears. Works in every browser.

Short preloader (about 1 s) counting 000 to 100, after which the large wordmark slides into place in the header and the hero is revealed. Plays once per session (sessionStorage in try/catch), then the page shows directly; a "Replay" button shows it again. The logo move is a FLIP animation with the Web Animations API. No counter or motion with prefers-reduced-motion.

Four lines of large type slide, scale and change colour with the scroll inside their own area. For a brand story or the opening of a project page.

A highlighter moves through the text word by word at reading pace, with a play button and speed control. For explanations paired with audio or video, or to make long copy easier to read.

Two running bands that slow down on hover and can be flung with mouse or finger; speed then eases back to normal. For USPs and certifications.

Thin reading progress bar on top of an article, driven by CSS animation-timeline: scroll() with no JS for the bar, plus a small JS fallback for browsers without scroll-driven animations (such as Firefox). It sits in a sticky strip with the title and minutes left. Runs in its own scroll area; on a real page use scroll(root).

The footer sits pinned at the bottom (position: sticky; bottom: 0) behind the content, and the page slides off it at the end. Pure CSS, no JS and no new features: works in every current browser. The demo scrolls its own container; on a real site place the sticky footer right after main.

While sending, the button fills with an orange bar and a rising percentage, then rolls on to a confirmation with a check mark. For quote and contact forms.

A row is struck through and folds away, then a toast with a countdown ring gives five seconds to restore it. For calendars, carts and admin screens.

Button that appears after scrolling a fair way, with a ring around the arrow showing your progress. Scrolls back smoothly (instantly with prefers-reduced-motion) and then moves focus to the heading so keyboard users stay oriented. Small JS, no new browser features needed.

Five orange strips close over the page in a stagger, the content swaps and the strips lift again. For sites that should feel like one continuous piece.

The menu panel rolls down from the top and each link rises out of its own mask, with a count and a contact line. For sites with a small, strong menu.

The orange marker stretches toward your cursor like a magnet and snaps onto the item below; when you leave it springs back to the active page.

A drop zone that lights up when you hold files over it, with a progress bar, cancel button and done state per file. For quote requests with photos and drawings.

The eye in the password field opens or closes and the dots decode letter by letter into readable text, and back again. For login screens and client portals.

A monthly/yearly switch where only the letters and digits that actually change move out, while the rest glides into place. For pricing blocks and subscriptions.

Four progress forms in one set: steps (2 of 4), linear bar with label and amount, an upload that ends in success or error, a ring and an indeterminate loading bar. Animates to its value when in view (IntersectionObserver + CSS transitions), with role="progressbar" and aria-valuenow. With reduced motion values are set directly and the loader stays still.

Price table for a physiotherapy practice: click a column header to sort (aria-sort, ascending/descending, aria-live announcement), sticky header, scroll shadows that only show when there is more to see (background-attachment: local, no JS) and cards with labels plus a sort select in narrow containers. Container query on the wrapper, so it also works in a sidebar.

Status timeline for a repair, order or quote request: four steps (received, scheduled, on the way, done) with dates, the current step marked (aria-current="step", calm pulse that stops under prefers-reduced-motion) and an expandable activity log. The log uses

A stack of project cards that fans open on hover or click; the card under your cursor lifts. For a compact portfolio or recent projects.

Five narrow image strips where the chosen one slides wide open with title and price; the others show a vertical label. For accommodations, collections or locations.

A project card that plays a timelapse on hover; move sideways to scrub through it, with timecode and progress bar. For case studies with build footage or product demos.

A calm background of soft light rays falling from the top left corner across a dark surface and shifting very slowly, like light through a window. One fragment shader in OGL on a triangle, paused off screen, a single still frame with reduced motion and a CSS fallback (conic-gradient) without WebGL. For the hero of a showroom, gallery or event where the text does the work.

A slowly flowing colour field in orange, rust and black, computed with layered noise in a fragment shader. As a hero backdrop; without WebGL it falls back to a CSS gradient.