Free animated components for Next.js and React
Premium, motion-first sections and effects. Open source, accessible, and installable in one command with the shadcn CLI.
Backgrounds
- Aurora BackgroundFree animated aurora background for Next.js and React. Drifting gradient blobs with a dithered noise overlay, GPU-only transforms, reduced motion safe.
- Caustic LightFree animated caustics background for React and Next.js: refracted light threads drift over your theme's surface, WebGL shader, dithered, reduced motion safe.
- Dot MatrixFree animated dot matrix background for Next.js and React: a soft glow sweeps across a dotted grid, pure CSS transforms, offscreen paused, reduced motion safe.
- Gradient MeshFree animated mesh gradient background for Next.js and React: corner-anchored colour fields breathing on GPU transforms, dithered, reduced motion safe.
- Grid BeamsFree animated grid background for Next.js and React: glowing beams travel along a subtle grid, built with Motion, paused offscreen and reduced motion safe.
- Kinetic LinesFree React kinetic line background with configurable flow, curvature, trail length, and a fully static reduced-motion SVG for Next.js.
- Noise FieldFree animated noise background for Next.js and React: layered SVG film grain flickers as living static, CSS keyframes, offscreen paused, reduced motion safe.
- Floating OrbsFree floating orbs background for Next.js and React: soft glow orbs drift upward on GPU transforms, dithered, offscreen paused, reduced motion safe.
- Particle ConstellationFree React particle constellation background with bounded links, fine-pointer force, strict frame budgets, and reduced-motion fallback for Next.js.
- Light RaysFree light rays background for Next.js and React: volumetric beams sway from the top edge on CSS transforms, dithered, offscreen paused, reduced motion safe.
- Skewed GridFree React skewed grid background for Next.js: a 3D tilted lattice with seeded ragged rails, per-edge depth, cursor glow, and reduced-motion safety.
- Moiré LatticeFree moire lattice background for React: two semantic line fields create a restrained interference pattern with a finite CSS transform loop.
- Spotlight FollowFree spotlight background for Next.js and React: a soft glow trails the cursor with an eased follow, fine pointers only, static and calm under reduced motion.
- TopographyFree topographic background for Next.js and React: drifting SVG contour lines drawn in the border token, CSS driven, offscreen paused, reduced motion safe.
Heroes
- Aurora HeroAnimated hero section with a drifting aurora background and a masked word-by-word headline reveal. Built for Next.js and Tailwind with Motion.
- Command Center HeroFree React command-center hero with an accessible h1, real CTAs, live-signal dashboard, layered depth, and reduced-motion fallback for Next.js.
- Dot Matrix HeroFree animated hero section for Next.js and React: masked word reveal over a dot grid swept by a soft glow, built with Motion, reduced motion safe.
- Gradient Mesh HeroFree mesh gradient hero for Next.js and React: masked word-by-word headline reveal over a drifting gradient mesh, built with Motion, reduced motion safe.
- Grid Beams HeroFree animated hero section for Next.js and React: headline, subtitle and CTAs rise in over a grid of traveling light beams. Accessible, reduced motion safe.
- Marquee HeroFree hero section with marquee for Next.js and React: a Motion block reveal plus a full width scrolling text strip under the CTAs, reduced motion safe.
- Product Demo HeroFree animated product demo hero for Next.js and React with an interactive proof moment, responsive Tailwind layout, accessible CTAs, and Motion transitions.
- Split Media HeroFree split media hero for Next.js and React with an editorial reveal, optional image parallax, responsive Tailwind layout, and accessible CTAs.
- Spotlight HeroFree interactive hero section for Next.js and React: a cursor-following spotlight behind a staggered block reveal, calm and complete on any device.
- Stats HeroFree hero section with animated stats for Next.js and React: a staggered block reveal plus counters that count up on view, SSR and reduced motion safe.
- Video Reveal HeroFree Next.js video hero with an accessible h1, real CTAs, captioned native media, and a configurable Motion mask reveal for React and Tailwind.
Text Effects
- Blur Reveal TextFree blur reveal text effect for Next.js and React: words sharpen from a soft blur as they enter view in a Motion stagger, SSR and reduced motion safe.
- Bracket EmphasisAnimated bracket text for React and Next.js, with intact semantic copy, a one-shot annotation reveal and a static reduced-motion state.
- Completion StrikeA reversible React completion strike that keeps text readable, selectable and naturally wrapped. Built for Next.js and Tailwind.
- Fit HeadingResponsive text fitting for React and Next.js. Size a semantic heading to its container within a readable range, with full wrapping copy as fallback.
- Count UpFree animated counter for Next.js and React: numbers count up once on scroll with Motion, render the real value in SSR HTML, and respect reduced motion.
- Fade StaggerFree text reveal for Next.js and React: children fade and rise into view with a smooth stagger, built with Motion, scroll triggered once, reduced motion safe.
- Gradient Shine TextFree gradient text component for Next.js and React: brand gradient fill with a shine sweep every 4s, pure CSS, offscreen paused, reduced motion static.
- Marquee TextFree marquee text component for Next.js and React: a seamless CSS loop that pauses on hover and focus, stays scrollable under reduced motion, no JS timers.
- Rotating TextFree rotating text component for Next.js and React: one word in the headline cycles with exit and enter motion, zero layout shift, reduced motion safe.
- Scramble TextFree scramble text effect for Next.js and React: characters decrypt into your copy once on scroll, SSR safe, accessible and reduced motion safe.
- Split RevealFree split text animation for Next.js and React: each word rises out of its own mask in a smooth stagger, built with Motion, reduced motion safe.
- Spoiler RevealAn accessible React spoiler reveal with a finite opaque wipe, native button and selectable answer text. Built for Next.js and Tailwind.
- SVG Outline DrawFree React SVG text effect that draws a responsive outline before settling into a semantic-token fill, with a static reduced-motion fallback.
- Typewriter TextFree typewriter text effect for Next.js and React: headline types itself with a blinking block cursor, SSR renders the full string, reduced motion safe.
- Variable Axis WaveFree React variable-font weight wave with grapheme-safe text, configurable range and wavelength, plus a static reduced-motion fallback for Next.js.
- Text Footnote LeaderFree React inline citation link with a short associated note, a visible marker-to-note leader, and native same-page fallback.
- Text Revision ReaderPersistent side-by-side plain-text revisions with semantic inserted and deleted text and keyboard change navigation.
- Text Replace DiffInline React text-change effect: briefly mark the replacement range while keeping the current copy native, selectable and reduced-motion safe.
Scroll Storytelling
- Horizontal ScrollFree horizontal scroll section for Next.js and React: panels glide sideways as you scroll, CSS sticky pin and scrub, escapable, reduced motion stacks.
- Parallax LayersFree parallax section for Next.js and React: layers translate at different depths as you scroll, GSAP ScrollTrigger scrub, reduced motion static.
- Scroll Image SequenceFree scroll-scrubbed image sequence for Next.js and React: frames advance with scroll on a pinned canvas, with a static poster when motion is off.
- Pinned PanelsFree pinned scroll section for Next.js and React: panels crossfade in place as you scroll, CSS sticky pin and scrub, escapable, reduced motion stacks.
- Scroll Product TourFree React scroll product tour with sticky screenshot steps, readable semantic content, scoped GSAP progress, and a static mobile fallback for Next.js.
- Scroll ProgressFree reading progress bar for Next.js and React: a top bar fills as you scroll the page, scrubbed from native scroll, one transform, reduced motion safe.
- Scroll Stacked CardsFree React scroll section with sticky story cards that layer into a restrained depth stack, plus a complete static mobile and reduced-motion layout.
- Scroll Text HighlightFree scroll-highlight text for React: a paragraph lights up word by word as it scrolls through the viewport, dimmed text resolving to full. GSAP ScrollTrigger.
- Scroll Edge CuesQuiet physical-edge cues for a native overflow region with accessible naming and no scroll interception.
Cards
- Expandable Card GridFree React expandable card grid using native details, Motion layout reflow, controlled state, and an instant reduced-motion fallback for Next.js.
- 3D Flip CardFree 3D flip card for Next.js and React: click or hover flips the card on its Y axis to reveal a back face. CSS transforms, accessible, reduced motion safe.
- Gradient Border CardFree gradient border card for Next.js and React: a conic gradient slowly rotates around the card edge, CSS keyframes, offscreen paused, reduced motion safe.
- Hover Reveal CardFree hover reveal card for Next.js and React: an action row rises on hover and keyboard focus, always visible on touch, CSS driven, reduced motion safe.
- Spotlight CardFree spotlight card for Next.js and React: a soft glow and lit border trail the cursor over the card, CSS driven, fully readable without hover or motion.
- Card StackFree draggable card stack for Next.js and React: drag the top card to cycle the deck with springs, keyboard buttons included, reduced motion safe.
- Tilt CardFree 3D tilt card for Next.js and React built with Motion springs: perspective tilt and moving glare on hover, disabled on touch and under reduced motion.
- Video Preview CardsFree React video preview cards with accessible links and play controls, fine-pointer intent, muted media, and reduced-motion safety for Next.js.
Buttons
- Border Beam ButtonFree animated border button for React: a light beam orbits the pill's edge via a masked conic gradient. Pure CSS, pauses under reduced motion.
- Download Progress ButtonFree React download progress button with determinate, success, cancel, and retry states plus accessible reduced motion for Next.js.
- Undo GraceShow a truthful, finite undo window around a real consumer-owned reversal link after an action. Built for React, Next.js and Tailwind.
- Hold to Confirm ButtonFree React hold-to-confirm button with cancellable progress, keyboard parity, success feedback, and reduced-motion support for Next.js.
- Icon Morph ButtonFree animated icon button for Next.js and React: label and arrow swap with a spring on hover and focus, zero layout shift, reduced motion safe.
- Liquid ButtonFree liquid fill button for Next.js and React: the CTA fills from the bottom on hover and focus, pure CSS, AA contrast, reduced motion safe.
- Magnetic ButtonFree magnetic button for React: the pill leans toward your cursor, its label leans a touch further, and everything springs home on leave.
- Morph State ButtonFree React submit button that morphs through idle, loading and success states: width animates, spinner spins, check draws in. Announced to AT.
- Press Ripple ButtonReact activation ripple button with native form behaviour, pointer-origin feedback, keyboard parity and an instant reduced-motion response.
- Shine ButtonFree shine button for Next.js and React: a diagonal sheen sweeps across the CTA on hover and keyboard focus, pure CSS and reduced-motion safe.
Features
- Bento GridFree bento grid for Next.js and React: cells reveal in a stagger on view with Motion, hover lift on fine pointers, responsive CSS grid, reduced motion safe.
- Collaborative Cursors FeatureFree React collaborative cursors feature section with bounded presence paths, accessible activity context, and reduced-motion support.
- Product Feature TabsFree React product feature tabs with direct-access navigation, animated split panels and a responsive Tailwind product frame for modern Next.js sites.
- AI Agent WorkflowAnimated AI agent workflow section for React and Next.js: a request hands off between agents, tools fire, and an outcome lands. Motion and Tailwind.
- Before After WorkflowFree process comparison section for Next.js and React with native workflow radios, caller-supplied result metrics, and shared step continuity.
- Guided Product TourFree guided React product tour with accessible step progress and animated workspace states for Next.js and Tailwind.
- Feature RowsFree feature section for Next.js and React: alternating two column rows reveal on scroll, media and copy slots, accessible, reduced motion safe.
- Feature Spotlight DeckFree interactive React feature section with accessible tabs and polished Motion transitions for product visuals in Next.js and Tailwind.
- Workflow MapFree animated workflow map for Next.js and React with branching feature nodes, Motion-scaled connectors and responsive source-to-outcome layouts.
- Zigzag Sticky FeaturesFree React sticky feature section with scroll-driven product previews, alternating copy, responsive stacking, and reduced-motion support.
Pricing
- Pricing Add-on BuilderFree React pricing add-on builder with accessible selections, transparent live totals, a sticky summary, and reduced-motion support.
- Pricing Comparison MatrixFree pricing comparison matrix for Next.js and React with grouped features, sticky labels and an animated differences-only view. Built with Motion and Tailwind.
- Highlight Sweep Pricing TableFree comparison pricing table for React: a spring highlight frame sweeps to whichever plan column you hover or focus. Motion layoutId, accessible, Next.js.
- Plan RecommenderFree React pricing plan recommender with an accessible guided chooser, transparent result logic, animated indicator, and reduced motion.
- Slider Pricing CalculatorFree usage-based pricing calculator for React: a slider sets the tier and the price rolls to match, with a plan summary. Motion digits, accessible, Next.js.
- Toggle Pricing CardsFree animated pricing section for React: monthly/annual switch with rolling price digits and highlighted-plan lift. Motion, accessible, Next.js and Tailwind.
Testimonials
- Audio Customer StoriesFree React audio testimonial section with native playback, transcripts, animated waveform accents, keyboard selection, and reduced motion.
- Case Study SelectorFree testimonial selector for Next.js and React with company tabs, a spring indicator, animated case-study quotes and visible outcome metrics.
- Testimonial MarqueeFree testimonial marquee for Next.js and React: two rows scroll in opposite directions, pause on hover or by keyboard, CSS driven, reduced motion safe.
- Marquee Quote ColumnsFree testimonial wall for React: quote cards scroll in vertical marquee columns at offset speeds, pausing on hover. CSS-driven, accessible, Next.js ready.
- Spotlight Quote CarouselFree testimonial carousel for React: one spotlight quote at a time with directional slide transitions and dot navigation. Motion springs, accessible, Next.js.
- Video Testimonial SpotlightFree React video testimonial section with captions, transcript, proof metric, masked reveal, and accessible reduced-motion behaviour.
Logos and Stats
- Case Study Logo StripFree React case-study logo strip with customer outcomes, responsive card geometry, and accessible hover and focus motion for Next.js and Tailwind.
- Logo CloudFree logo cloud for Next.js and React: marquee or grid modes, pauses on hover and focus, CSS driven, accessible and reduced motion safe.
- Fade Cycle Logo CloudFree logo cloud for React: a fixed grid where logos crossfade in randomized-feeling waves to rotate through a larger set. Motion, accessible, Next.js ready.
- Velocity Logo MarqueeFree animated logo marquee for React: infinite logo cloud whose drift speed reacts to scroll velocity, pauses on hover. GSAP, accessible, Next.js ready.
- Trust Evidence GridFree React trust evidence section pairing compliance marks with concrete reliability facts, accessible links, and restrained motion.
- Count-Up Stat GridFree animated stats section for React: metrics count up on scroll into view with staggered reveals. SSR-rendered final values, Motion springs, Next.js ready.
- Odometer StatsFree React odometer stats section with stable SSR values, rolling digits, locale formatting, semantic labels, and reduced-motion support.
- Progress Ring StatsFree animated stat rings for React: circular SVG progress rings sweep to their value on scroll into view, with a count-up number. Motion, accessible, Next.js.
- Sparkline TraceTrace a small supplied numeric time series with honest spacing and exact readable readings. Built for React, Next.js and Tailwind.
- Sample RugPlace actual supplied observations on one numeric scale to reveal clusters and outliers, with every value readable in text. Built for React and Next.js.
- Proof RailFree animated stats rail for Next.js and React with a one-shot proof trace, static metric values and responsive social-proof geometry in Tailwind.
- Distribution StripShow how named supplied parts divide one total in a compact animated strip with an exact readable legend. Built for React and Next.js.
- Threshold MeterAn accessible React threshold meter with exact values, a visible acceptable band and a finite indicator transition. Built for Next.js and Tailwind.
- Uncertainty WhiskerShow a supplied estimate and its bounded interval on one animated axis, with exact readable values. Built for React, Next.js and Tailwind.
- Signed Contribution BridgeA free logos and stats signed contribution bridge for ordered positive and negative totals in React.
- Calendar MosaicA free logos and stats calendar mosaic for date-positioned monthly values and unknown days in React.
Integrations
- Integration Beam NetworkFree React integration section with an accessible hub-and-spoke network and animated data beams, built with GSAP for Next.js and Tailwind.
- Integration Connector RailFree React integrations section with an accessible connector rail, selectable app relationships, and animated sync evidence for Next.js and Tailwind.
- Integration Orbit HubFree animated React integrations section with orbiting product nodes, semantic relationships, and a static reduced-motion layout for Next.js.
- Integration Stack CarouselFree React integrations carousel showing connected software stacks as accessible layered cards, with Motion transitions for Next.js and Tailwind.
Product Showcases
- Browser StackFree React product showcase with an accessible stack of selectable browser previews and premium Motion depth transitions for Next.js and Tailwind.
- Code PreviewFree React product showcase with accessible code tabs, line reveals, highlighted output, and a copy action for Next.js and Tailwind.
- Code Line SelectionFree React code review component for accessible contiguous source-line selection in Next.js and Tailwind projects.
- Gradient Stop EditorFree React gradient stop editor for Next.js and Tailwind, with accessible position and colour controls that preserve caller order and hard stops.
- Device StageFree React product showcase with responsive device frames, layered depth, pointer tilt, and a static reduced-motion stage for Next.js and Tailwind.
- Video SpotlightFree React product demo section with a captioned native video, a Motion mask reveal, proof metrics, and reduced-motion fallback for Next.js.
- Split Pane DividerFree resizable split-pane layout for React: compare product or design content with bounded pointer and keyboard controls for Next.js and Tailwind.
Navbars
- Floating Island NavbarFree floating navbar for React and Next.js with scroll-direction reveal, accessible mobile disclosure and responsive Tailwind top or bottom placement.
- Glass Shrink NavbarFree sticky navbar for React: shrinks and gains blur-glass surface on scroll, spring underline tracks the active link. Motion, keyboard-first, Next.js ready.
- Mega Menu Reveal NavbarFree mega menu navbar for React: full-width panels reveal with height spring and staggered link groups. Motion, keyboard-first, Escape-safe, Next.js ready.
- Mobile Navigation SheetFree React mobile navigation sheet with focus management, Escape close, scroll lock, real links, staged motion, and reduced-motion support.
- Priority OverflowFree React priority navigation for Next.js and Tailwind, fitting native links by container width and keeping the remainder in a More disclosure.
- Product Switcher NavigationFree React product switcher navigation with accessible disclosure links, shared preview motion, keyboard close, and responsive layout.
- Reading Progress NavbarFree sticky navbar for React with a reading-progress bar that fills as the page scrolls and active-section links. Pure CSS scroll timeline, accessible, Next.js.
- Landmark Skip MenuA keyboard-first menu of caller-defined page landmarks with destination focus, reduced-motion scrolling, and removed-target handling.
- Breadcrumb OverflowCompact semantic breadcrumb that keeps its root and current page visible while exposing middle ancestors through a native disclosure.
Footers
- CTA Horizon FooterFree React CTA footer with a luminous horizon transition, complete sitemap, accessible links, bounded motion, and reduced-motion support.
- Glow Top FooterFree animated footer for React: a breathing accent glow lights the top edge over dithered noise, columns reveal on scroll. Motion, accessible, Next.js.
- Newsletter Grid FooterFree newsletter footer for Next.js and React with a responsive link grid, native email form and CSS-drawn divider reveal. Tailwind and reduced-motion ready.
- Reveal Parallax FooterFree animated footer for React: the page appears to lift away, revealing a parallax footer pinned beneath it. Pure CSS sticky technique, accessible, Next.js.
- Status Console FooterFree React status console footer with service health, recent release, grouped links, restrained signals, and accessible reduced motion.
CTA Sections
- Beam Banner CTAFree animated CTA section for React: full-width banner with drifting accent beams behind a headline and button pair. CSS keyframes, dithered, Next.js ready.
- Countdown Band CTAFree countdown CTA section for React and Next.js: days, hours, minutes and seconds flip toward a target date beside a headline. Accessible, motion safe.
- Product Launch CTAFree React product launch CTA with release proof, responsive media reveal, real actions, restrained ambient motion, and reduced-motion support.
- Split Choice CTAFree React split-choice CTA with two equally accessible conversion paths, responsive emphasis, keyboard parity, and reduced motion.
- Waitlist Form CTAFree waitlist CTA section for Next.js and React with an animated email form, controlled submit states and a native no-JavaScript fallback. Motion and Tailwind.
FAQ
- FAQ AccordionFree accessible FAQ accordion for Next.js and React: CSS grid height animation, real buttons with aria-expanded, keyboard friendly, reduced motion safe.
- Grouped Columns FAQFree grouped FAQ section for Next.js and React with editorial columns, category jump links and CSS-drawn reading rails. Tailwind and reduced-motion ready.
- Guided Path FAQFree React guided FAQ path with branching questions, back navigation, accessible progress, animated panels, and reduced-motion support.
- Searchable FAQFree searchable FAQ for React: a filter box narrows an animated accordion in real time, highlighting matches. Motion height, accessible, Next.js and Tailwind.
- Split Panel FAQFree React split-panel FAQ with an accessible question list, persistent animated answer, mobile accordions, and reduced-motion support.
Contact Sections
- Booking SplitFree React booking section with accessible day and time selection, local availability data, and polished Motion panel transitions for Next.js.
- Contact Channel CardsFree React contact section with accessible channel cards, response expectations, fine-pointer tilt, and reduced-motion fallbacks for Next.js.
- Glow Contact FormFree React contact section with a production-ready accessible form and a restrained pointer-following glow for Next.js and Tailwind.
- Office Pulse MapFree React contact section with semantic office cards and a dependency-free SVG pulse map, animated with scoped GSAP for Next.js and Tailwind.
Theme Switchers
- Contrast Mode SwitchFree React high-contrast mode switch with controlled state, morphing icon, clear labels, scoped demo behaviour, and reduced motion.
- Theme Palette DockFree React theme palette dock with controlled named themes, accessible swatches, shared indicators, scoped previews, and reduced motion.
- System SegmentFree light/system/dark segmented theme control for React: a spring-loaded thumb slides between three options with icon crossfades. Radio-group a11y.
- Sun Moon MorphFree animated theme toggle for Next.js and React: the sun's core morphs into a crescent moon with spring physics, rays retracting. Accessible switch.
- Theme WipeFree React theme switcher with a circular wipe: the new theme expands from the toggle button across the container with a clip-path animation.
Tables
- Expandable RowsFree React table with expandable detail rows: panels unfold with a grid-rows transition, chevrons rotate, semantics stay pure table. Zero JS animation.
- Data PaginationFree controlled React pagination for tables and result sets with range status, bounded page buttons, page-size choices, and accessible controls.
- Table Column VisibilityFree React table column visibility control with native checkboxes, controlled and local state, protected last column, and semantic table output.
- Table Bulk SelectionFree React table bulk selection with stable record IDs, native checkboxes, current-page select all, retained off-page state, and accessible counts.
- Filter Chip TableFree React filter chip table with semantic rows, controlled filters, animated results, accessible counts, and reduced-motion support.
- Live Update TableFree React live update table with semantic rows, controlled pause, highlighted changes, announced status, FLIP reordering, and reduced motion.
- Row Stagger TableFree animated data table for Next.js and React: rows cascade in with a scroll-triggered stagger while header and semantics stay rock solid.
- FLIP Sort TableFree sortable React table where rows glide to their new order with FLIP layout animation. aria-sort headers, keyboard operable, reduced-motion safe.
- Table Inline EditingFree semantic React table editing for one isolated row at a time, with typed copied drafts, native field editors, and clear save or cancel status.
- Table Axis InspectorA free tables axis inspector for comparing a selected cell with its row and column context in React.
Forms and Inputs
- Elastic RangeFree React range input with an exact-value bubble and bounded elastic tether. Native keyboard, touch and form behaviour for Next.js and Tailwind.
- Floating Label InputFree floating label input for Next.js and React: the label glides from placeholder to a docked caption on focus or value. Pure CSS, with real label semantics.
- Newsletter BandFree newsletter signup section for Next.js: headline reveal, focus glow, loading and error states, and an accessible success transition.
- Multi-step Progress FormFree React multi-step form with accessible validation, progress, review, animated panels, keyboard flow, and reduced-motion support.
- File Dropzone QueueFree React file dropzone with native input, accessible queue, validation, keyboard removal, visual previews, and reduced motion.
- OTP Code InputFree React OTP input: code boxes pop as digits land, shake on invalid codes, and behave as one accessible field with full paste and form support.
- Tag Composer InputFree React tag composer with controlled chips, accessible keyboard editing, duplicate validation, animated reflow, and reduced motion.
- Token OrderFree controlled preference ranking for Next.js and React with native move controls, committed form fields and finite Motion reflow.
- Form Error NavigatorFree native form error summary for React. Lists browser-reported constraint failures in form order with accessible links back to fields.
- Input Date RangeFree accessible controlled date range field for React with native date or datetime inputs, timezone-safe strings, bounds, and ordered-range feedback.
- Input Quantity StepperA labeled native number field with single-press increment and decrement buttons and explicit min, max and step behavior.
- Input Breakpoint RulerFree controlled responsive breakpoint ruler for React authoring tools with draggable width thresholds, keyboard controls, safe ordering, and viewport preview.
- Saturation/Value Color PlaneA controlled HSV saturation and value input with pointer preview, keyboard adjustment, and precise numeric alternatives.
- Input Shortcut RecorderControlled keyboard shortcut recorder with focused capture, canonical modifier ordering, explicit clearing, and non-intercepting reserved-combination feedback.
- Input Aspect RatioFree accessible controlled aspect-ratio field for React with common presets and reduced custom integer ratios.
- Input Elapsed DurationFree accessible controlled elapsed-duration field for React with unbounded hours, explicit commit, carry, and total-second bounds.
- Input Variable Font AxesFree controlled variable font axis controls for React, with bounded native sliders, fractional numeric drafts, and caller-owned font metadata.
- Input Shadow LayersFree controlled CSS box-shadow layer editor for React with immutable ordering, keyboard-accessible reorder actions, and a faithful preview.
- Linked Logical SpacingA controlled writing-direction-aware editor for four logical spacing edges with exact-token linking.
- Controlled Key/Value PairsA free controlled editor for ordered configuration pairs with stable rows, keyboard reordering, and duplicate-key validation.
- Exact-Decimal Currency AmountAn accessible controlled currency amount field that preserves exact decimal strings and caller-defined fraction digits.
- Timezone PickerA searchable, keyboard-operable picker for caller-provided IANA time zone options without implicit offset conversion.
- Cubic Bezier Curve EditorA keyboard-accessible CSS cubic-bezier editor with draggable control points, numeric inputs, and a reduced-motion-safe preview.
- Grid Track EditorA controlled CSS grid track editor with a bounded unit grammar, immutable ordering, and a safe live preview.
- Budget Transfer InputA free forms and inputs budget transfer editor for caller-controlled allocation balances in React.
- Form Preference CenterGrouped preference settings with native checkboxes, tri-state group controls, complete callbacks and server-rendered mixed-state labels.
- Password CriteriaNative password input with visible Unicode-defined composition checks and no strength score or password storage.
Modals and Overlays
- Command PaletteFree React command palette: ⌘K opens a spring panel, results filter as you type with staggered reveals and full combobox keyboard navigation.
- Slide-Over DrawerFree React slide-over drawer: panel glides in from the right with staggered content reveal, focus trapped, Escape closes. Native dialog underneath.
- Fullscreen Takeover ModalFree fullscreen modal for React: a trigger expands into a fullscreen overlay with a clip-path takeover, native dialog focus trap, Escape to close. Motion, a11y.
- Gallery Lightbox ModalFree React gallery lightbox with keyboard navigation, captions, focus trap, thumbnails, responsive media, and reduced-motion support.
- Morph Trigger ModalFree React morphing modal with shared trigger transition, focus trap, Escape close, scroll lock, safe focus return, and reduced motion.
- Spring DialogFree React modal dialog with spring scale-in, backdrop blur fade, full focus trap and Escape handling. Built on the native dialog element.
Loaders
- Buffered ProgressFree React progress bar with synchronized completed and prepared frontiers, controlled values, accessible semantics and reduced-motion support.
- Orbit SpinnerFree React loading spinner: two counter-rotating arcs with a breathing core dot. CSS transforms, accessible status, calm reduced-motion state.
- Upload Queue ProgressFree React upload queue with controlled progress, cancel and retry actions, accessible status, animated rows, and reduced motion.
- Counting Progress BarFree React progress bar with a synced percentage counter: the fill springs to each controlled value while the number follows. Proper progressbar semantics.
- Skeleton ShimmerFree skeleton loader for React: composable line, circle and block placeholders with a soft transform-only shimmer, static under reduced motion.
- Step Pipeline LoaderFree React step pipeline loader with named stages, controlled progress, semantic status text, bounded motion, and reduced-motion support.
Image and Media
- Before After SliderFree before/after comparison slider for React: drag or arrow-key the divider to reveal the second image with a spring handle. Fully keyboard operable.
- Video Chapter PlayerFree React video chapter section with native playback, captions, transcript, keyboard chapter seeking, active progress, and reduced motion.
- Audio Region LoopReplay one supplied short audio passage using native controls, a real transcript and bounded region feedback. Built for React and Next.js.
- Hover Zoom GalleryFree React image gallery grid: images ease into a slow zoom on hover while a caption rises over a gradient scrim. Pure CSS, focus-visible parity.
- Accessible Image CarouselFree React image carousel with keyboard buttons, touch drag, pause-aware autoplay, captions, stable media, and reduced-motion support.
- Mask Reveal ImageFree scroll-triggered image reveal for React: a clip-path curtain wipes open while the image settles from a gentle scale. Motion, reduced-motion safe.
- Tile AssembleAssemble one supplied image from sixteen registered tiles while retaining its intact accessible image. Built for React and Next.js.
- Perspective RectifyA controlled React image tool with four explicit corners, an authored output size and a planar preview that preserves access to the original.
- Media Pixel SamplerReview a browser-decoded image pixel with native coordinate fields, controlled selection and a source-bound RGBA result. Built for React and Next.js.
- Media Annotation PinsPlace numbered review notes on a caller-supplied image, then select them through accessible pins and a complete ordered note list.
- Media Distance ProbeMeasure between two controlled points on a responsive image, with design-space coordinates, native numeric editing and caller-owned saved measurements.
- Media Alpha PreviewCompare a caller-supplied image over checkerboard, light and dark CSS backgrounds with native keyboard-accessible controls.
- Media Focal Point PickerA free image media focal point picker for responsive crop positioning in React and Next.js.
- Inspect LensAccessible React image magnifier with a controlled inspection lens, explicit keyboard controls, intrinsic sizing and reduced-motion support.
- Media Composition GuidesFree image review overlays for React: switch rule-of-thirds, centre and diagonal composition guides, then tune their opacity.
- Media Resolution AuditFree React image resolution audit comparing intrinsic pixels with rendered CSS size at a chosen display density, with per-axis coverage.
- Panorama WindowFree responsive panorama viewer for React: pan one wide image with a keyboard and touch friendly range control.
Cursor Effects
- Dot Ring CursorFree custom cursor for React: a crisp dot with a trailing ring on an eased follow, growing over interactive elements. Fine pointers only.
- Glow TrailFree cursor glow trail for React sections: a soft radial highlight drifts after the pointer on an eased lag, lighting content beneath. Decorative only.
- Context Cursor BadgeFree React context cursor badge with target-aware labels, fine-pointer tracking, bounded lag, safe cleanup, and reduced-motion fallback.
- Cursor Image TrailFree React cursor image trail with bounded pooled media, distance sampling, fine-pointer gating, performance cleanup, and reduced motion.
- Contour MagnetFree contour hover effect for React: one outline travels between marked native links and buttons while their hit areas stay fixed. Fine pointers only, reduced-motion safe.
- Magnetic FieldFree magnetic hover wrapper for React: children lean toward the cursor with spring physics and snap back on leave. Fine pointers only, a11y neutral.
Timelines and Steps
- Horizontal Milestone TimelineFree React horizontal milestone timeline with accessible rail controls, scroll snap, progress fill, mobile stacking, and reduced motion.
- Process Cards TimelineFree process steps section for Next.js and React with numbered cards, native-scroll sticky stacking, GSAP depth transitions and a static mobile fallback.
- Release Notes TimelineFree React release notes timeline with semantic versions, expandable changes, accessible controls, alternating branches, and reduced motion.
- Roadmap CardsFree roadmap section for Next.js: milestone cards alternate along a centre spine, sliding in from their side as they enter. Motion, order-safe a11y.
- Numbered StepperFree React stepper: numbered stops connected by a fill line that springs forward as steps complete, with check morphs and text state. Fully accessible.
- Vertical TimelineFree React vertical timeline: the spine fills as you scroll while entries and their markers light up in sequence, with ordered-list semantics.