Animated React components and website sections you install as source, themed with CSS variables for Next.js and Vite.
A sources → core → outputs section: platform cards on the left feed one node in the middle, which fans out to result cards on the right, with curved connectors that draw in on first view and then carry a moving dash. Use it to explain a pipeline, an integration, or where an AI product's data comes from.
An editable spreadsheet-style grid with inline cell editing and keyboard navigation. Use it when users need to change values in place rather than just read them.
A choropleth world map colouring countries by metric, with fill and dot variants. Use it for geographic analytics and regional breakdowns.
A single-date field with a popover calendar, typed entry and validation states. Use it for one-off dates such as a deadline or birth date.
An animated folder that opens to fan out component preview cards. Use it on portfolio and feature pages to reveal a collection on interaction.
A frosted-glass folder shape with title and subtitle, used as a decorative container. Use it on portfolio and feature sections where a plain card is too plain.
A pinned resource toolkit grid featuring authentic 3D pushpins, staggered cards, brand icon badges, and connected corkboard path lines.
A composable modal dialog with focus trapping, overlay and controlled or uncontrolled open state. Use it as the general-purpose dialog primitive.
A macOS-style dock where icons magnify as the pointer approaches. Use it for app launchers and playful navigation bars.
A macOS-style dock where icons magnify as the pointer approaches. Use it for app launchers and playful navigation bars.
An interactive reorderable card list with 60fps Motion spring physics, right-side grip handles, and custom card metadata.
An interactive reorderable card list with 60fps Motion spring physics, right-side grip handles, and custom card metadata.
A panel that slides in from any screen edge, with overlay and GSAP easing. Use it for mobile navigation, filters and detail panels.
A full email client layout with folders, labels, message list, reading pane and attachments. Use it as the shell for an inbox or ticketing view.
A responsive, animated Cyberpunk Diagnostic Terminal Error Website Section with full Light and Dark mode adaptive styling, diagnostic monitors, and live stacktrace inspection.
A physics-based interactive tags playground where badges float, fall under gravity, collide realistically, and can be dragged and thrown.
Overlapping cards in a tilted diagonal cascade, dealt out of one pile into place as the stack scrolls into view. Use it for a short numbered sequence — steps, phases, a three-part system.
Overlapping cards in a tilted diagonal cascade, dealt out of one pile into place as the stack scrolls into view. Use it for a short numbered sequence — steps, phases, a three-part system.
A complete animated FAQ website section pairing an editorial header with a dynamic morphing nature photography canvas and an expandable question accordion.
A fashion hero: a bold headline between a turning video badge and a stack of faces, five staggered columns of looks on flat colour that tilt under the pointer, a call to action on the middle look, and a footer with a quote and the next story. Use it for a clothing store, a lookbook or an editorial landing page.
A product hero for anything that comes in flavours: the product stands in a mountain of powder against a moss backdrop and its flavours flank it on four tilted cream tiles. It rises from behind the powder spinning and settles; then every five seconds, or on a click, the chosen tile slides into the cup and the cup cross-fades to that flavour without moving; a glow takes the flavour's colour, a price pill and add-to-cart hang under the cup. One component for both themes: in dark mode the tiles go translucent black.
A live fleet tracking view pairing a Leaflet map with a vehicle list and status filters. Use it for logistics and delivery dashboards.
A floating support bubble that expands into a chat panel, with state persisted to localStorage. Use it for live chat and contact widgets on marketing sites.
A node-and-connector flow diagram with highlightable paths and GSAP transitions. Use it to explain a pipeline or decision flow.
Horizontal and diagonal 3D cascading gallery stream with continuous downward auto-flow motion, drag inertia physics, and isometric perspective depth.
A tactile folder — skeleton cards or your own photos tuck behind a frosted-glass pocket and fan out into an arc on hover. Use it for file groups, galleries and drag-and-drop upload targets.
A tactile folder — skeleton cards or your own photos tuck behind a frosted-glass pocket and fan out into an arc on hover. Use it for file groups, galleries and drag-and-drop upload targets.
A collection of 7 modern, animated, fully responsive Footer components for web applications, SaaS platforms, and marketing landing pages.
Form scaffolding — wrapper, field, error and submit — with a shared color theme and a glitch error variant. Use it to keep field spacing and validation styling consistent across a form.
A versatile, multi-variant interactive visual gallery featuring revolving 3D orbit rings, responsive bento grids, vertical continuous reels, 3D pill carousels, and perspective arc carousels. Use it for agencies, portfolios, product showcases, and creative hero sections.
A frosted surface in four shapes and the aurora ground it sits on. Use it for glass bento layouts, profile and booking pages — or flip it to solid cards with one prop.
An interactive 3D WebGL globe visualization with location markers, arc curves, and rotation controls. Use it for global presence and location showcases.
A star rating supporting half-star precision, in read-only or interactive mode. Use it for reviews and any score shown out of five.
A slow, ultra-smooth cardiac heart signal waveform component with 2 visual variants (realtime EKG line trace and fluid multi-lead cardiac wave).
A prop-driven hero section supporting revolving 3D orbit ring, spring word bounce, character typewriter, 3D split marquee slider, pet-shop, doctor, and facility CAD grid variants.
A full-bleed photo hero with a queue of cards: the front card is the slide on screen, the ones behind it are what comes next. Every five seconds or on a click the queue slides forward, the photograph behind crossfades and the headline and caption follow. A glass panel carries the faces of past guests, an intro and the call to action.
A feature-rich hero section with animated typing text, interactive CLI copy badge, gradient action buttons, and feature list.
A travel hero on a dark ground that shifts colour: a light line over a huge white word whose letters turn the theme's primary where they cross the photographs, and a honeycomb of hexagonal photographs with a primary hexagonal call to action set among them. The large hexagon is the slide on screen; its photograph fills the background, tinted with that photograph's own tone, so the whole section changes colour as, every four seconds or on the arrows at the foot, every hexagon moves one step along the ring, endlessly.
A horizontal sliding rail layout with smooth drag inertia, snapping cards, and navigation controls. Use it for showcasing products, media cards, or horizontal content.
A section that converts vertical scrolling into horizontal card movement with a progress indicator. Use it for process timelines and step sequences.
A set of 26 brand SVG icons — Google, GitHub, Apple, Microsoft, Slack, LinkedIn and more — as React components. Use them for social sign-in buttons and provider lists.
A before/after image slider with five handle styles and drag or click positioning. Use it for retouching, redesign and product comparison sections.
A collection of 4 responsive E-commerce Image Viewer components featuring inner lens magnifying zoom, HD side portal projection, carousel sliders, and interactive thumbnail strips.
A wall of screenshots that never ends, and a camera hanging over it: it rests zoomed in on one card, then every few seconds pulls back, glides to the next and settles on it. Use it wherever a set of images should keep showing itself — a hero, a gallery band, a showcase.
An interactive live data flow infrastructure topology graph with animated SVG beams, central neural mesh hub, service cards, and metrics.
A text input with label, helper text, error state, icon slots and password reveal. Reach for it as the default field in any form.
A printable invoice with line items, tax and totals, in three presentation styles. Use it for billing summaries and receipt pages.
A row primitive pairing media, title, description and actions in one aligned layout. Use it to build list rows, notification entries and search results.