Animated React components and website sections you install as source, themed with CSS variables for Next.js and Vite.
An inline keyboard-key badge for rendering shortcuts. Use it in menus, tooltips, and docs where a keystroke needs to look pressable.
A loading indicator in five shapes — spinner, dots, pulse, ring and bar — with an optional caption. Use it for inline and full-panel pending states.
A sign-in form with social buttons, password reveal, remember-me and multiple layout variants including ribbon-drift and liquid-glass. Use it as the entry point of an authenticated app.
A bento grid whose cards light up and follow the pointer on hover. Use it for feature grids on a landing page.
A continuously scrolling row or column of content that loops seamlessly. Use it for logo walls and testimonial strips.
A CSS-column masonry layout with staggered entrance animation. Use it for image galleries and card walls of uneven height.
A CSS-column masonry layout with staggered entrance animation. Use it for image galleries and card walls of uneven height.
A swipeable stack of photo cards with location, date and tag metadata. Use it for travel, gallery and testimonial carousels.
A swipeable stack of photo cards with location, date and tag metadata. Use it for travel, gallery and testimonial carousels.
A desktop-style menu bar with click-to-open menus, separators and keyboard navigation. Use it for application chrome rather than website navigation.
Device frames for iPhone (5 through 17 Pro Max), Samsung and Pixel that wrap a screenshot, video or live children. Use them to present an app on a marketing page.
A composable overlay handling the portal, backdrop, scroll lock, Escape and backdrop dismissal, with no preset layout of its own. Use it when you hold the open state and want the panel to render your own markup.
A sticky scroll-driven service cards stack where cards slide up from below with horizontal fan offsets and smoothly tilt into resting angles as they lock into place.
A responsive marketing navbar with logo, links, mobile menu and GSAP entrance animation. Use it as the top bar of a landing page.
A horizontal navigation bar with dropdown panels and a sliding active indicator. Use it for primary site navigation with grouped links.
Concentric rings of avatar nodes around a centre node, with a staggered entrance. Use it for community, integration and social-proof sections.
A sign-up section in three layouts: readers' faces drifting around a centred form, a panel with a pointer glow and a ticker of who just joined, or the form beside a fanned stack of recent issues. The form becomes a thank-you when your promise resolves.
A sign-up section in three layouts: readers' faces drifting around a centred form, a panel with a pointer glow and a ticker of who just joined, or the form beside a fanned stack of recent issues. The form becomes a thank-you when your promise resolves.
A responsive, full-page 404 Hyperspace website section with ambient radial glow, masked cyber grid backdrop, animated compass indicator, and customizable shortcuts.
A segmented one-time-passcode field with auto-advance, paste handling, and backspace navigation. Use it for email or SMS verification steps.
A page navigator with previous/next controls and truncated page ranges. Use it for paged tables and result lists.
A high-performance text canvas component with organic repulsion physics and wordmark glow variants featuring cursor tracking and scroll-driven rising animations.
A card payment form with number, expiry month/year selects and a simulated submit state. Use it as the checkout step in a commerce flow.
An interactive Playable Piano component featuring Web Audio API synthesizers, physical keyboard keybindings (A-S-D-F-G-H-J-K-L-; and W-E-T-Y-U-O-P), master volume slider, and toggleable key indicators.
Everything a product offers as one hairline grid: small icon-and-name tiles and a few 2×2 features that show a piece of the product on a tilting card. Reveals as a wave from the centre, then a spotlight follows the pointer. Use it as the 'full platform' section of a product site.
A floating panel anchored to a trigger, with collision detection and side/align control. Use it for filter menus and inline detail cards.
A complete pricing system with plan cards, a comparison table, an interactive plan builder and an interactive service checklist.
Three pricing layouts in one item — basic cards, a feature table and a usage slider that recalculates price. Use the slider variant for consumption-based products.
A compact pricing section with monthly and annual toggle. Use it when pricing is one part of a longer landing page rather than its own page.
A refreshed pricing section with a cleaner card treatment and no animation dependency. Use it as the lighter alternative to the GSAP-based pricing sections.
A reusable, prop-driven E-commerce Product Card supporting color swatches, badges, ratings, quick view, and action buttons.
A collection of 4 production-ready, high-converting, fully responsive E-commerce Product Details components featuring split galleries, floating cards, bento hero showcases, and color-synced image previews.
A person's profile as a glass bento page: an aurora backdrop, frosted panels, and a 24-hour dial that shows their working window live. Use it for team directories, member pages and public profiles.
A themeable progress bar in three forms — a single bar, a multi-segment track, and a ring — with an optional labelled field wrapper. Use it for determinate operations where percentage complete is known.
A QR code renderer with size, colour and error-correction options. Use it for sharing links, tickets and pairing codes.
A camera-based QR scanner that decodes frames in the browser and reports matches. Use it for check-in and pairing flows.
A dynamic orbital visualization component that displays nodes in a circular pattern around a central point. Each node represents a data point with title, status, and energy level.
An interactive Range Date Picker featuring single month, dual-month, and rate-priced calendar layouts with customizable theme colors.
A sign-up form with paired name fields, password confirmation, a terms checkbox and multiple layout variants including ribbon-drift and liquid-glass. Use it wherever new accounts are created.
Draggable split panes in horizontal or vertical layout, with min and max size constraints. Use it for editor and preview layouts users can rebalance.
A high-converting Review and Testimonial section with a 3D rotating background globe, smooth right-to-left marquee cards, and client rating badges.
A scroll-linked accordion pairing expanding text steps with a synced image panel. Use it for long-form product explainers.
A scroll container with styled, optionally auto-hiding scrollbars in either axis. Use it to keep scrollbar appearance consistent across browsers.
A cinematic scroll-driven storytelling card component that splits a seamless panoramic image into three panels, expands gaps, flips 180° in 3D into editorial narratives, and glides away.
Cards that stack and scale as the page scrolls, revealing each in turn. Use it for step-by-step feature walkthroughs.
An interactive classified security envelope & travel pass sleeve component featuring a secret card that glides out horizontally on hover and elevates gracefully onto the cover on click with 3D flip physics.
A searchable select with single or multiple selection, option groups and per-option icons. Use it when a native <select> cannot carry enough structure.
That box Figma draws around a selected layer — corner handles and a crisp accent stroke — around any text span or block. Use it to spotlight a word, a card or a screenshot region in docs and marketing.