360 free animated React components

A centred hero with a soft radial spotlight, badge and dual call-to-action.

A minimal centred hero with a soft gradient-mesh backdrop, announcement pill and dual call-to-action buttons.

A full-screen hero pairing a drifting animated gradient-mesh backdrop with a word-by-word staggered blur-in headline and a logo marquee under the fold.

A hero whose headline cycles through rotating words with a live typewriter caret over an animated grid backdrop, degrading to a gentle word swap when reduced motion is on.

A hero with glassy floating UI cards that drift continuously and shift on mouse-parallax depth around a staggered centre headline.

A dark hero with animated aurora light beams, a shimmering sweep across the primary CTA, and dual-direction logo marquees beneath the fold.

Animated hero with a shimmering animated-gradient badge and an aurora gradient-text headline over an ambient radial glow. Self-contained CSS animations, dependency-free, respects prefers-reduced-motion.

An asymmetric bento feature grid whose cards stagger into view on scroll, lift on hover and feature an animated conic gradient border, shimmering headline, growing bar chart and a masked marquee tag strip.

A scroll-linked how-it-works section where a sticky panel cross-fades between steps and a progress ring plus filling timeline track advance as you scroll through the process.

A responsive feature card grid where each card follows the cursor with a radial spotlight glow, lifts and rotates its icon on hover, reveals a call to action, and sits above a scrolling logo marquee.

A bold feature band with an animated gradient background, floating blurred orbs, blur-in staggered headline, two opposing marquee pill rows and shimmering stat cards.

The Magic UI bento pattern: a mixed-span grid of cards where the icon shrinks and the description lifts on hover to reveal a call-to-action. Self-contained (no framer-motion, no icon libs), pure CSS group-hover, with a glow background and full dark styling.

A three-tier pricing section whose cards reveal in a staggered spring cascade, with a rotating conic-gradient glow on the popular plan and prices that count up smoothly when you toggle monthly and annual billing.

Pricing cards that light up with a cursor-following radial spotlight, drift over floating background orbs and rise into view with a staggered spring entrance, plus a pulsing glow on the popular plan.

A pricing row where an animated gradient highlight glides via shared layout animation to whichever plan you hover, a three-way billing switch slides its pill, prices recount instantly and a perks marquee scrolls beneath.

A full-bleed dark call-to-action banner with a rotating aurora gradient, floating orbs and a shine-on-hover button, with staggered blur-in text that reveals on scroll.

An email-capture call-to-action card wrapped in a rotating conic-gradient border beam, with staggered reveal, animated shine text and an inline success state on submit.

A dark call-to-action band framed by two infinite scrolling tag ribbons with a continuously flowing animated-gradient button and staggered centre content.

A pair of infinitely scrolling, pause-on-hover marquees pairing a customer logo wall with compact quote cards, with reduced-motion support.

A split layout pairing a large aggregate rating score, star row and overlapping avatar stack with two featured review cards.

An auto-advancing testimonial carousel that slides and crossfades between quotes with a live progress bar, pause-on-hover, and dot plus arrow navigation.

A testimonial grid whose cards spring in with a staggered scroll reveal and light up with an animated gradient border on hover.

A three-row marquee wall of review cards scrolling in alternating directions that pause on hover, with a shimmering gradient headline and faded edges.

A responsive grid of cards that tilt in 3D toward your cursor with a light glare and lifted depth layers, powered by Framer Motion springs.

Feature cards where a soft radial spotlight and a glowing border chase the cursor on hover, with a staggered scroll reveal and an animated shimmer line.

Pricing-style cards that flip in 3D on hover or tap to reveal details on the back, keyboard accessible with a staggered entrance animation.

Cards wrapped in a live conic gradient border that rotates and speeds up on hover, with a shimmer sweep and a scrolling tag marquee.

A reusable glow effect card for React and Tailwind, with hover and motion.

A reusable neon gradient card for React and Tailwind, with hover and motion.

A reusable spotlight magic card for React and Tailwind, with hover and motion.

A reusable tilt spotlight card for React and Tailwind, with hover and motion.

A dark pill button with a continuous conic-gradient light shimmer sweeping around its border.

A button wrapped in an animated multi-colour gradient border with a matching blurred underglow.

A pill button whose dot expands to fill the surface and reveals an arrow label on hover.

A solid button that emits a soft, continuously pulsing glow ring to draw the eye to the primary action.

A frosted-glass button with a spring-animated light sweeping across its text and border.

An animated hero section with soft, ever-drifting aurora gradient blobs floating behind staggered, blur-in content.

A launch and waitlist section set over an infinite neon grid that scrolls into a glowing horizon with rising particles.

A frosted hero backed by twin counter-rotating conic gradients, with flowing gradient text and an animated gradient-border stat card.

A dot-grid section where a spring-eased spotlight follows the cursor and reveals a hidden lattice of coloured dots.

A reusable animated background for React and Tailwind: dot pattern background.

A reusable animated background for React and Tailwind: flickering grid background.

A reusable animated background for React and Tailwind: grid pattern background.

A reusable animated background for React and Tailwind: retro grid background.

A dual-row infinite logo marquee whose rows scroll in opposite directions, pause on hover and lift each logo with a shimmer sweep over an animated gradient glow.

Three vertical testimonial columns scroll at different speeds and opposite directions, pausing on hover with a shine sweep so reviews loop endlessly beside a sticky heading.

A skewed dual-direction headline marquee of big gradient and outlined words plus a pill ticker, with speed and pause controls and pause on hover over an animated mesh background.

An animated headline whose living multi-colour gradient drifts across every letter while the words blur and stagger into place on scroll.

A cinematic heading that blurs and lifts in one character at a time with a staggered, scroll-triggered reveal.

A headline with a polished light sheen that glides endlessly across the letters and races faster on hover.

A headline whose final word flips through a curated set with a blurred vertical roll while the rest of the line stays perfectly still.

A responsive six-up logo strip using simple inline-SVG marks and wordmarks with a grayscale-to-colour hover, for a trusted-by section.

A four-card stat band whose gradient numbers count up from zero as the section scrolls into view, with staggered blur-in cards, a pulsing eyebrow, floating aurora blobs and a shimmering underline sweep.

Four circular SVG progress rings that draw their gradient arcs and count up to their target percentage the moment they enter view, over a slowly rotating conic halo with a soft glow pulse behind each ring.

A dark stat band where 3D-tilt cards stagger into view with count-up figures over an animated gradient mesh, finished by an infinite marquee ticker of highlight chips that pauses on hover.

A navbar featuring a JS-free product dropdown built with native details and summary, revealing a two-item mega-menu panel with icons.

A marketing site header with a logo, inline nav links, login/register buttons, and a working hamburger toggle that reveals a stacked mobile menu below the md breakpoint. Fully keyboard/ARIA accessible with light and dark variants.

A centred single-column accordion where each question expands to reveal its answer using native details and summary, with an animated plus-to-cross toggle icon.

A section that reveals its content in sequence as you scroll, with a sticky scroll-progress bar showing how far through it you are.

A layered depth scene where background, midground and foreground drift at different speeds, driven by scroll position.

A pinned, sticky panel whose visual and copy change step by step as you scroll past it, a classic scrollytelling section.

Vertical scrolling pans a horizontal rail of cards sideways while the section is pinned, then releases.

A vertical timeline whose connecting line fills and whose milestones fade in as they enter the viewport.

A metrics band whose numbers count up from zero the moment it scrolls into view.

Panels that unmask with a clip-path wipe as they enter the viewport, revealing the media beneath.

A deck of cards that pin and scale as you scroll, each settling behind the next.

A statement whose words light up one by one as you scroll through the section.

A hero whose backdrop scales and brightens while the headline parallaxes upward as you scroll.

A responsive image grid where each tile subtly zooms and reveals a caption bar on hover.

A Pinterest-style masonry gallery using CSS columns with varied-height images; tiles lift and brighten on hover.

A filterable gallery with category tabs; clicking a tab animates the grid to show only that category.

A grid of image cards that tilt in 3D toward the cursor on hover, with a soft glare.

A horizontal strip of image panels; hovering a panel expands it and shrinks the others to reveal its caption.

Two rows of images auto-scrolling in opposite directions, pausing on hover, with edge fade masks.

A grid where each image scales up under a dark gradient overlay revealing a title and a view button on hover.

A scattered stack of slightly-rotated polaroid photos that straighten and lift on hover.

An image carousel with arrows and dots, smooth slide transitions and autoplay that pauses on hover.

A grid where images sit under a coloured duotone wash that clears to full colour on hover.

A grid of cards that flip in 3D on hover to reveal a caption and details on the back.

A bento-style gallery mixing large and small image tiles in an asymmetric grid, each with a hover zoom.

An image grid whose tiles fade and scale in, staggered, as they scroll into view.

A tight row of overlapping images that fans and spreads apart, lifting the hovered one.

Framed thumbnails with an animated inset border that draws in and a caption that fades up on hover.

A tabbed gallery that switches between named photo collections with an animated grid transition.

Full-bleed horizontal image rows that grow taller on hover to reveal a caption and accent line.

A grid where non-hovered images blur and dim while the hovered one stays sharp and lifts.

Images shown in greyscale that turn to full colour with a slight zoom on hover.

A grid where a caption panel slides up from the bottom of each tile on hover.

A gallery where each image is revealed with a clip-path wipe on hover, with a lightbox.

Image cards that pin and stack as you scroll, driven by scroll position.

A horizontal scroll-snap rail of images with arrows and a progress bar.

A row where hovering a tile enlarges it and gently pushes its neighbours aside.

A skewed, diagonal image grid whose tiles straighten and zoom on hover.

Hexagonal image tiles in a honeycomb layout that scale on hover.

A row of circular thumbnails that scale and show a caption on hover.

A gallery with large index numbers over each image and a title that reveals on hover.

A grid where a caption card slides in from a corner over the image on hover.

A tight, gapless mosaic of mixed-size image tiles with a hover zoom.

A dark image grid that a cursor-following spotlight reveals.

Vertical columns of images auto-scrolling up and down, pausing on hover.

Image cards that tilt toward the cursor with a diagonal shine sweep on hover.

A clean image grid whose tiles fade and rise in, staggered, on scroll.

A grid where hovering a tile slides a detail panel in over part of the image.

Image columns that drift at different speeds as you scroll, with a lightbox.

Rounded image cards that lift with a soft shadow and reveal a label on hover.

A gallery filtered by clickable pill tags with an animated grid.

Overlapping stacked images that fan out as they scroll into view.

A slightly tilted, edge-faded marquee band of images that pauses on hover.

A grid where a conic gradient frame animates around each tile on hover.

A dense wall of photos with slight random rotation that straighten and lift on hover.

A thumbnail rail where hovering a thumb shows a large preview panel.

A masonry gallery whose items stagger-reveal as they scroll into view.

A diagonal split panel that slides to reveal the full image on hover.

A grid of image cards that flip in 3D to a coloured caption back on hover.

A featured hero image that zooms on scroll and transitions into a thumbnail grid.

Image zooms in smoothly inside a fixed rounded frame on hover.

Image starts zoomed and settles to normal on hover.

Image zooms and rotates slightly on hover.

Greyscale image turns to full colour on hover.

Full-colour image fades to greyscale on hover.

Blurred image sharpens on hover.

Sharp image blurs with a caption appearing on hover.

Sepia-toned image clears to full colour on hover.

Muted image saturates and pops on hover.

Low-contrast image gains punchy contrast on hover.

Dim image brightens on hover.

Image hue-shifts through colours on hover.

Duotone-washed image clears to colour on hover.

Vignetted image opens up as the vignette fades on hover.

A dark gradient overlay with a title fades in over the image on hover.

A coloured wash overlay slides off the image on hover.

A caption panel slides up from the bottom on hover.

A caption panel slides down from the top on hover.

A caption panel slides in from the right on hover.

A caption panel slides in from the left on hover.

A corner tag expands into a full caption bar on hover.

A centred view icon and dim overlay fade in on hover.

Two horizontal bars slide apart to reveal a title on hover.

A diagonal caption band sweeps across the image on hover.

A meta panel slides in over part of the image on hover.

Image zooms while a caption fades up on hover.

Image zooms inside an inset frame that draws in on hover.

Image zooms and desaturates with a title on hover.

Image zooms with soft blurred edges on hover.

A colour curtain wipes left to reveal the image on hover.

A colour curtain wipes right to reveal the image on hover.

A colour curtain wipes up to reveal the image on hover.

A colour curtain wipes down to reveal the image on hover.

A circular iris opens from the centre to reveal the image on hover.

A diamond clip-path expands to reveal the image on hover.

A diagonal clip-path wipe reveals the image on hover.

Horizontal venetian blinds open to reveal the image on hover.

Vertical blinds open to reveal the image on hover.

The image splits down the middle and opens on hover.

A camera-shutter style reveal on hover.

Image tilts in 3D toward the cursor on hover.

Image tilts in 3D with a moving glare on hover.

Image flips horizontally to a caption back on hover.

Image flips vertically to a caption back on hover.

Image folds like paper to reveal content on hover.

Image skews subtly and lifts on hover.

Image pushes back in perspective with an overlay on hover.

Image swings on a pivot on hover.

Image opens like a book cover to reveal detail on hover.

Image face turns like a cube to a second face on hover.

A diagonal shine sweeps across the image on hover.

A soft diagonal glare passes over the image on hover.

A holographic rainbow sheen shifts across the image on hover.

A gradient border draws itself around the image on hover.

A coloured glow blooms around the image edges on hover.

A radial spotlight follows the cursor across the image.

A warm light-leak streak drifts over the image on hover.

A prism chromatic edge split shimmers on hover.

An RGB channel-split glitch on hover.

A digital glitch distortion on hover.

CRT scanlines overlay that intensifies on hover.

Image pixelates then resolves on hover.

Image resolves from mosaic tiles on hover.

A gentle wave distortion ripples across the image on hover.

A water-ripple ring expands from the cursor on hover.

Chromatic aberration fringes shift on hover.

A film-grain overlay that fades on hover.

A halftone dot pattern overlays the image, clearing on hover.

A colour block in multiply blend tints the image, clearing on hover.

A screen-blend colour wash lifts off on hover.

A crosshatch texture overlays the image, fading on hover.

A dithered duochrome effect resolves to the photo on hover.

An animated gradient-mesh overlay drifts over the image.

Image fades and rises in as it scrolls into view.

Image reveals via a clip-path wipe on scroll into view.

Image sharpens from blur as it scrolls into view.

Image parallaxes within its frame as you scroll.

Image zooms based on scroll progress.

A mask wipes to reveal the image driven by scroll.

Image comes into focus from blur on scroll.

Image gains colour from greyscale as you scroll through it.

Image tilts subtly based on scroll position.

A curtain wipes off the image as it scrolls in.

A pinned image scales up as you scroll past it.

A cursor spotlight reveals a dimmed image.

Hover to crossfade between two versions of the image.

A soft circular mask follows the cursor, revealing a hidden layer.

Drag a divider to reveal a second image.

The image swaps to an alternate shot on hover.

Hovering highlights the image and dims a caption row.

Animated corner brackets draw in around the image on hover.

A double offset border animates in on hover.

An offset outline shifts behind the image on hover.

A conic gradient frame rotates around the image on hover.

A thin inset frame draws inside the image on hover.

A polaroid frame with a caption that tilts on hover.

A rounded image that lifts with a soft shadow on hover.

The image lifts with a growing drop shadow on hover.

An SVG outline strokes around the image on hover.

A page-corner fold peels on hover to show a hint.

Washi-tape corners hold the photo, wobbling on hover.

A neon glow frame pulses around the image on hover.

A dotted border frame animates around the image on hover.

Accordion where the active header gets an animated underline.

An accordion whose open panel reveals an image and text.

An alert that expands to reveal more detail.

A card that lifts with a growing shadow on hover.

A card with a coloured glow that blooms on hover.

A card whose border draws itself in on hover.

A card whose gradient background shifts on hover.

A card that tilts in 3D toward the cursor on hover.

A card with a cursor-following radial spotlight.

Animated link underline effects: grow, slide and centre-out.

Links whose label slides up to a duplicate on hover.

Buttons with a colour fill that sweeps across on hover.

Buttons with a diagonal shine sweep on hover.

Icon buttons whose icon and background fill on hover.

Icons that bounce or spin playfully on hover.

A list where the hovered row gets a sliding highlight and arrow.

A nav bar with animated underline indicators on hover.

Badges and pills that pop and change colour on hover.

Avatars that gain an animated gradient ring on hover.

An image card with a title overlay that reveals on hover.

A row of social icon buttons with distinct hover animations.

A chunky 3D push-button that depresses on hover and press.

A button that magnetically nudges toward the cursor.

Outline button variants across colours and sizes with a hover fill.

Ghost and text buttons with subtle hover backgrounds.

Gradient-filled buttons with a hover shift.

Buttons with an animated conic gradient border.

Buttons with a pulsing glow ring on hover.

Buttons where an arrow slides in and the label shifts on hover.

A card that reveals a gradient wash and lifts on hover.

An image card with a gradient overlay and a title reveal.

A stack of cards that fans out on hover.

A card that expands in place to reveal more content.

A card featuring an animated circular progress ring.

A set of foundational text inputs covering the default, hover, focus, disabled and error states in one place. Reach for it when you need a consistent baseline across a form, with the error variant pairing a red border and helper text for validation feedback.

A minimal underline input that drops the surrounding box in favour of a single bottom rule. The bar animates on focus to signal the active field, making it a good fit for clean, editorial layouts where you want form controls to stay understated.

An auto-sizing textarea that grows in height as content is added, rather than forcing an inner scrollbar. It is handy for comment boxes and message fields where entry length varies, keeping the full text visible while the user writes.

Custom checkboxes with an animated tick that draws in when toggled on. Reach for them when the native control feels plain and you want the selection to feel tactile, with the mark animating rather than appearing instantly.

An animated light and dark theme toggle that transitions between the two modes rather than snapping. Drop it in a header or settings menu to let people switch appearance, with the sun-to-moon motion confirming which theme is now in effect.

A heart like toggle for the toggles category, built for posts, comments and product cards where readers tap to show approval. Use it wherever a lightweight favourite action fits, and note the small burst animation that plays as the heart fills.

An account dropdown anchored by the signed-in visitor's avatar, revealing profile, settings and sign-out links. Place it in the top corner of an app or dashboard header, where the avatar doubles as the trigger and keeps the bar compact.

Multi-column mega menu that spreads its links across several columns and reserves one slot for a featured item. Well suited to large catalogues or marketing sites that want to highlight a promotion alongside standard navigation, with the featured block drawing the eye first.

Nested menu that expands submenus to the side as you hover deeper into the hierarchy. Choose it when actions fall naturally into categories and a flat list would grow too long, since each level opens beside its parent so the trail stays clear.

This notifications menu drops down a scrollable list of recent alerts from a bell trigger in the header. It suits apps that need to surface unread activity at a glance, presenting each notification as its own row.

Filter menu that reveals a dropdown of checkbox options for narrowing a list or result set. It fits product grids and data tables where several criteria can be toggled at once, each choice sitting on its own checkable row.

This icon sidebar keeps navigation to a slim column of icons, revealing each item's text label on hover. It works well where horizontal space is precious, trading always-visible labels for a compact, uncluttered rail.

Sidebar with expandable nested items, so parent entries open to reveal their child links in an indented tree. Use it when your navigation runs several levels deep and you need that hierarchy laid out clearly in one rail.

A mini sidebar rail that sits collapsed as a narrow strip of icons and expands to reveal full navigation labels on hover. Use it when you want to reclaim horizontal space in a dashboard without hiding navigation entirely, since the expand animation keeps every destination one hover away.

Floating sidebar with rounded corners that detaches from the screen edge and hovers over the layout as a self-contained panel. Choose it for a softer, more modern shell, as the inset margins and rounding set the navigation apart from the main content.

A narrow icon rail that keeps navigation to a slim vertical strip, surfacing each destination's name in a tooltip on hover. Use it in space-tight layouts where labels would crowd the interface, so the icons stay compact yet remain identifiable on demand.

Underline tabs where a sliding indicator glides beneath the active label as you switch between panels. They fit content sections that need a clean, understated switcher, and the animated bar gives a clear visual cue of which tab is currently selected.

A horizontally scrollable tab bar for navigation sets too wide for the viewport. Reach for it when you have more tab labels than the container can hold, especially on mobile, where the row scrolls sideways instead of wrapping or truncating.

Tabbed navigation whose active indicator morphs smoothly between items as you switch. Use it when a bit of motion should make the current selection feel fluid and deliberate, with the marker sliding and reshaping to fit each tab.

This is a card-style tab set that pairs each tab with its own content panel. It suits dashboards or settings screens where sections deserve clear visual separation, giving every tab a raised card appearance above the panel it reveals.

An underline tab set where the indicator grows into place beneath the active item. Choose it when a subtle entrance animation should draw the eye to the current tab, the line expanding outward rather than simply appearing.

This modal handles a long, scrollable body, part of the modals family. Reach for it when your content exceeds the viewport, such as terms and conditions or lengthy details, keeping the header and actions in view as the body scrolls.

Basic tooltips that appear on hover to explain an element in a few words. Reach for these when an icon or control needs a short label, with the hint fading in beside the trigger as the cursor rests on it.

Click-triggered popover that reveals a panel of content next to the trigger. Unlike a hover tooltip it stays open until dismissed, making it suited to richer content the user may want to read or interact with.

Profile hover card that surfaces a preview panel when you point at a name or avatar. Use it on mentions or user links to show a photo, bio and details on hover, saving the user a trip to the full profile.

Click-to-reveal tooltip that toggles its hint on tap rather than on hover. This variant suits touch devices and deliberate interactions, keeping the label hidden until the user actively clicks the trigger.

Data table that highlights a row on hover as the pointer moves over it. It works well for interactive lists where users scan and click, giving immediate visual feedback about which record they are currently focused on.

Data table with a sticky header that stays pinned as the body scrolls. This is useful for long datasets viewed in a fixed-height panel, keeping the column labels in view so rows further down remain easy to read.

Paginated data table with page controls built into its footer. Use it to break a large dataset into manageable pages, letting users step through records without loading everything at once or scrolling an endlessly long list.

Expandable data table whose rows open to reveal further detail beneath them. Use it when each record carries secondary information you would rather keep hidden by default, so the main grid stays compact until a user chooses to drill in.

Use this data table when mobile matters: on narrow screens each row collapses into its own stacked card with labelled fields. It suits content-heavy tables that would otherwise force awkward horizontal scrolling on phones. Above the breakpoint it renders as a conventional grid.

A glassmorphic navigation bar that sticks to the top of the viewport with a frosted, translucent backdrop. Well suited to modern landing pages and product sites where the content beneath should show through subtly. The blurred background keeps links readable as the page scrolls.

Navbar that opens a mega dropdown panel beneath a top-level link, revealing grouped navigation in one wide layout. Choose it for sites with deep catalogues or many sections that benefit from being surfaced together. The panel spans the full width rather than a narrow list.

Navbar that reveals its submenus on hover, giving deeper sites a tidy way to expose nested pages. It suits content-heavy marketing sites where each top-level item groups several destinations.

A sticky navbar that shrinks as the visitor scrolls down, trading height for reclaimed reading space. Use it on long pages where you want the header to stay present yet grow less intrusive past the fold.

Carousel that crossfades between slides rather than sliding them sideways. Choose it when you want a calmer, softer transition for image galleries or hero rotations where motion should feel understated.

A carousel that pairs sliding content with animated dot indicators along the bottom. Reach for it on image galleries or feature highlights where users want a compact sense of position and a quick way to jump between slides. The dots animate as the active slide changes.

Use this logo carousel to scroll a strip of partner or client marks across the page. It fits trust sections and footers where you want to show recognisable names in a continuous band that keeps moving without demanding attention.

Bars loader animated like an audio equaliser, with vertical bars rising and falling in turn. Reach for it when a playful, rhythmic indicator fits the tone, such as media apps or processing states that benefit from a bit of energy.

Orbiting dots loader in which small dots circle a central point to convey ongoing activity. Reach for it during page loads or data fetches when you want a lively animated indicator, the continuous orbit path keeps the eye engaged without a solid spinning ring.

This wave loader animates a row of elements in a rippling sequence to show that work is under way. Use it for lightweight loading states in lists or inline sections, the travelling wave motion gives a smooth, rhythmic sense of progress.

Dual-ring loader built from two counter-rotating rings that spin in opposite directions. Reach for it on fuller loading screens where you want more visual weight than a single ring, the opposing rotation adds depth and a sense of continuous motion.

This morphing square loader reshapes and rotates a square through a repeating animation to signal a wait. It fits minimal, geometric interfaces, the shifting square gives a distinctive loading indicator without relying on the usual circular spinner.

A typing indicator loader that mimics the three-dot animation seen in chat apps while a reply is composed. Use it in messaging or comment interfaces to show someone or something is responding, the sequential dots make the wait feel conversational.

Card skeleton placeholder that outlines a card's shape with a shimmering animation before real content arrives. Use it while card data is fetching to reduce perceived wait, the moving shimmer sweep hints that content is loading rather than stalled.

Striped progress bar with an animated diagonal pattern that moves as it fills. It works well for active operations like downloads or processing, where the shifting stripes reassure users that something is genuinely under way.

An indeterminate progress bar for when the completion amount is unknown. It runs a continuous sliding animation to signal that work is under way, ideal for waiting on a request whose duration you cannot measure.

Animated skill bars that fill to a set percentage on view. They suit an about or portfolio section where you want to visualise proficiency levels, with each bar counting up to its target value as it appears.

This avatar carries an upload and edit overlay that appears on hover. It suits profile and account settings screens where people need to change their picture in place. A single click on the overlay opens the file picker.

A toast notification component that slides in from the corner of the screen. Reach for it when you need brief, non-blocking confirmations or alerts that appear over the interface. Each toast animates in from the edge and stacks tidily as more arrive.

An interactive star rating that lets users set a score by clicking or hovering across a row of stars. Use it for reviews or feedback prompts, with the selection updating live as the pointer moves.

A rating summary block that pairs an overall score with per-level distribution bars. Use it on product or review pages to show at a glance how many people rated each level. The breakdown bars reveal the spread behind the average.

An interactive star rating with hover feedback and a descriptive label. It fits review forms and prompts where you want people to preview their choice before committing, as the label updates while they hover. Stars respond live to the pointer.

An animated gradient text effect that shifts colour continuously across the letterforms. It suits hero headlines and brand marks where you want the type itself to draw the eye, the moving gradient adding motion without any separate graphic.

This typewriter effect reveals a line character by character, trailed by a blinking caret. Use it in a hero strapline or a chat interface to imply live composition, cycling through phrases so a single heading can showcase several messages.

Shiny text effect that passes a bright highlight sweep across the letters at intervals. It works well on buttons, badges and short headings you want to feel premium, the periodic glint catching attention without constant animation.

Wave effect that animates each letter up and down in sequence so the word ripples across the baseline. Use it for playful headings or loading captions, the staggered per-letter timing producing a continuous rolling motion.

Heading effect that uncovers text from behind a moving mask as it slides into view. Pair it with scroll entry on section titles for a clean editorial reveal, the clipped edge wiping the words into place rather than fading them.

An outline-to-fill effect that starts with hollow, stroked letters and floods them with colour on cue. It suits headlines and hover states where you want a two-stage reveal, the transition from outline to solid marking the moment of emphasis.

Highlight effect that sweeps an animated marker stroke behind the text as though drawn by hand. Use it to emphasise a key phrase within a sentence, the highlighter growing across the words to single them out on load or scroll.

A split-hover text effect where each letter divides and shifts as the cursor passes over it. Reach for it on headings or interactive links when you want a playful, tactile flourish. The letters part cleanly on hover and settle back once the pointer leaves.

Video-background hero that sets the copy over a looping gradient or canvas backdrop. Choose it when you want motion behind the headline without loading a heavy video file. The animated backdrop plays continuously beneath the foreground text.

A form-capture hero combining headline copy with an inline signup form. Use it at the top of a landing page when collecting emails or sign-ups is the primary goal. The form sits directly in the hero so visitors can convert without scrolling.

This hero sets its copy over an animated mesh gradient that drifts gently behind the text. Choose it for a modern, atmospheric opening that feels alive without imagery. The mesh gradient shifts colours continuously beneath the headline.

Alternating feature section that stacks image-and-text rows, flipping their sides down the page. Ideal for walking through several features in sequence while keeping the layout lively. Each row reverses the image and copy so the rhythm stays varied as visitors scroll.

Tabbed feature showcase that groups related capabilities behind clickable tabs, revealing one panel at a time. It suits pages with plenty to explain but limited vertical space, letting visitors browse features in place without an overwhelming wall of content.

Use this feature section of cards that respond on hover to draw attention to individual benefits. Each card lifts or shifts as the cursor lands on it, making a grid of features feel interactive and guiding the eye across the row.

A floating sticky call-to-action bar that stays pinned as the visitor scrolls. Use it to keep a single conversion prompt permanently in view on long pages, so the offer and its button never scroll away.

A testimonial grid that arranges several customer quotes into evenly spaced tiles. It works well when you want to present social proof at a glance, letting visitors scan multiple endorsements together without scrolling through them one by one.

This testimonial layout spotlights one large quote as the centrepiece of the section. Reach for it when a single, strong endorsement carries more weight than many, giving that customer's words room to dominate the page.

Testimonial component that scrolls customer quotes across the screen in continuous marquee rows. Use it to show a steady stream of endorsements in a compact band, the constant motion suggesting a large body of happy customers.

Testimonials paired with trust statistics, combining customer quotes with supporting figures. Choose it when you want emotional proof and hard numbers reinforcing each other on the same section. The stats sit alongside the quotes to lend measurable credibility.

An animated counter row that tallies key figures upward as the section scrolls into view. Drop it near the top of a page to summarise headline metrics at a glance. Each number rolls from zero to its final value on reveal.

A sticky footer newsletter bar that pins to the bottom of the viewport as visitors scroll, keeping the email field always in reach. It is handy for persistent capture on long pages where a fixed prompt outperforms one buried below the fold.

Floating newsletter widget that hovers in a corner of the screen as a compact, dismissible sign-up card. Reach for it when you want a gentle, ever-present prompt that stays out of the main layout yet remains one click away.

This is an animated mesh gradient background, blending multiple colour points into a smooth, slowly moving surface. Use it when a flat fill feels dull and you want a modern, colourful backdrop for hero areas or sign-up screens, with the mesh drifting gently rather than distracting.

Use this floating blob background to set soft, organic shapes drifting slowly behind your content. It brings a playful, contemporary feel to hero sections and landing pages, with the rounded blobs moving gently to keep the backdrop alive without pulling attention from the text.

A canvas particle background that scatters small moving points across the section. It fits tech, gaming, or launch pages wanting a lively, interactive-feeling backdrop, with the particles rendered on a canvas for smooth continuous motion behind your foreground layout.

Cursor spotlight background that follows the pointer with a soft pool of light over a dark surface. It adds an interactive, focused feel to hero areas and feature sections, the spotlight tracking the cursor to gently highlight whatever sits beneath it.

An animated stripe background of repeating diagonal bands that glide steadily across the surface. It suits energetic promo sections and banners, the moving stripes adding motion and pattern while remaining subtle enough to sit behind headings and buttons.

Canvas starfield background that scatters drifting points of light like a night sky. Choose it for dark, immersive hero sections on space, tech, or launch themes, the stars rendered on a canvas so the field animates smoothly behind your content.

A logo marquee that scrolls a continuous strip of generic brand marks across the screen. Use it in a trust or partners section where you want the logos to keep moving rather than sit in a static grid, giving the row a live, ticker-like feel.

Scrolling text marquee that slides a line of words horizontally in an unbroken loop. Reach for it when you need an eye-catching announcement bar or headline ribbon, with the phrase repeating seamlessly so there is never a visible gap at the edges.

This card marquee glides a row of content cards sideways in a rolling loop. It suits testimonial walls, feature highlights or product snippets you want kept in gentle motion, so several cards stay visible and drift past instead of paging one at a time.

Vertical marquee that scrolls its content upward through one or more columns rather than side to side. Use it for tall side panels or hero backdrops where a continuous downward-reading stream fits better, with each column looping independently.

A marquee with a soft gradient fade masking both edges so items dissolve in and out instead of clipping sharply. Choose it when the scrolling row sits against a plain background and you want the ends to blend cleanly rather than cut off abruptly.

Reverse-rows marquee that stacks two scrolling lines travelling in opposite directions. It works well as a busy, energetic band across a landing page, where the contrasting left and right motion of the two rows adds depth and rhythm.

Tilted marquee that presents its scrolling band on a diagonal slant across the layout. Use it to break up an otherwise flat section with a dynamic, poster-like angle, the content sliding along the tilted axis for a bolder editorial look.

This image marquee scrolls a continuous row of pictures sideways in a looping strip. It is handy for gallery teasers, moodboards or a photo showreel where you want the images always drifting past rather than fixed in a static thumbnail grid.

Cursor trail effect that leaves a fading tail of marks behind the moving pointer. Reach for it on playful or creative landing pages where you want motion to linger, the trail streaming out as the mouse moves and dissolving moments later.

A spotlight cursor effect that follows the pointer with a soft masked glow, dimming everything around it. Use it on dark landing pages or hero sections to draw the eye and add atmosphere, with the illuminated circle tracking movement in real time.

A thin custom scrollbar demo that slims the default browser bar down to a discreet sliver. Reach for it in sidebars, panels and content columns where a chunky scrollbar would dominate, keeping the track unobtrusive while still signalling that more content lies below.

Scrollbar styled with a colour gradient running down the thumb. It works well on branded dashboards or long articles where you want the scroll track to echo the palette, turning a purely functional element into a subtle accent as the reader progresses.

Use this rounded pill scrollbar when the default squared bar clashes with a soft, modern layout. The thumb takes a fully rounded pill shape that matches rounded cards and buttons, giving overflow areas a tidy, cohesive finish across the interface.

A scrollbar that stays hidden until the pointer enters its container, then fades into view. It keeps reading surfaces clean and distraction-free while still offering a draggable handle on demand, a pattern well suited to minimal blogs and media galleries.

Scroll progress indicator that doubles as a scrollbar, filling as the reader moves down the page. It gives long-form articles and documentation a clear sense of how much remains, with the fill tracking scroll position from top to bottom.

This scrollbar restyles both the track and the thumb rather than the handle alone. Use it when you want overflow areas to match a distinctive theme end to end, with the recessed track and contrasting thumb tuned together for a deliberate, designed look.

A date picker that reveals a dropdown calendar when the field is focused, letting users pick a single day rather than typing it. It fits booking fields, filters and forms, closing the calendar once a date is chosen and writing it back to the input.

Date range picker that shows two months side by side so users can select a start and end date across the span. Ideal for hotel stays, report windows and analytics filters, it highlights the full range between the two chosen dates as they hover and click.

A calendar that shows two months side by side and scrolls to reveal more. Reach for it in range selection, such as travel or hotel bookings, where seeing two months together makes picking a start and end date easier.

A contribution-style heatmap that arranges values into a grid of colour-graded cells. Use it to reveal activity or intensity patterns across days and weeks, much like a commit calendar. Darker cells signal higher values so clusters stand out immediately.

Media playlist that lists tracks alongside a now-playing indicator. It suits music apps and audio libraries, highlighting the active row so listeners always know which track is playing as they scroll the queue.

Hero section built around a video-style backdrop. Use it at the top of a landing page when you want cinematic motion behind the headline, with the copy and call to action layered over the moving scene.

A coming-soon page for products or sites yet to launch. Ideal for building early interest before you go live, it pairs a countdown to the reveal with an email capture so keen visitors can be notified the moment doors open.

A feature spotlight that draws attention to a single element during onboarding. Use it to introduce a new or important control in context, dimming the surroundings and highlighting the target so the callout is impossible to miss.

Compact user profile card that surfaces a person's essentials in a small footprint. Use it in lists, directories or hover previews where you need name, avatar and a few key details without opening the full profile.

This profile page organises a user's content into switchable tabs, so posts, about and activity each get their own panel without leaving the page. Reach for it when a single profile holds several distinct content types that would otherwise overwhelm one long scroll.

A store locator that sets a scrollable list of branches beside a map. Reach for it on retail or service sites where visitors need to find their nearest location, with each list entry tied to its position on the map.