ValvetUI Components Library — Free React & Next.js Components

Browse 54+ beautifully crafted UI components for React and Next.js. Buttons, cards, inputs, and more. Copy-paste ready with Tailwind CSS. GSAP and Framer Motion animations included.

Available Components

• Three.js Slider — Infinite 3D image slider with distortion effects, drag, wheel, and touch support powered by Three.js (Premium sliders component)
• Scroll Card — GSAP-powered rotating scroll-pinned sections with Lenis smooth scrolling (Premium cards component)
• Sticky Cards — GSAP pinned stacking cards that stack on top of each other as you scroll (Premium cards component)
• Counter Reveal Preloader — GSAP preloader with counter, image reveal, and overlay messages — a cinematic loading sequence with word-split hero reveal (Premium preloader component)
• SVG Scroll Draw — SVG path stroke-draw animation on scroll with feature cards and pinned sections (Premium scroll-effects component)
• Grid Transition — Grid-based page transition with block scaling reveal and GSAP, powered by next-transition-router (Premium transitions component)
• SVG View Transition — SVG path-based overlay page transition drawing a step-by-step graphic, using next-view-transitions (Premium transitions component)
• Block Transition — Grid-based block reveal page transition overlay with customizable animations (Premium transitions component)
• Block Reveal Text — Text reveal animation with a sliding colored block overlay effect using GSAP SplitText (Premium text-animations component)
• Clock Scroll — Clock hand rotation scroll animation with portrait reveal and text cycling (Premium scroll-effects component)
• Animated Menu — Fullscreen overlay menu with GSAP clip-path animations, hamburger toggle, and 3D character reveal (Premium navigation component)
• Card Scatter — Scroll-driven card scatter animation with GSAP — cards fly out and rotate as you scroll, revealing a centered logo and CTA (Premium cards component)
• OVA Scroll Slider — Fullscreen scroll-driven image slider with GSAP SplitText title animations, progress bar, and slide indicators (Premium sliders component)
• Animated Teams — Scroll-animated team section with card slide-in, letter initials, and responsive layout using GSAP ScrollTrigger (Premium scroll-effects component)
• Telescope Text — Scroll-powered character-by-character text reveal with alternating slide directions using GSAP SplitText (Premium text-animations component)
• Work Grid — Scroll-triggered work portfolio grid with rotation entrance animations powered by GSAP (Premium scroll-effects component)
• Stacked Scroll Cards — Scroll-pinned stacking cards with scale-down, rotation, and overlay dimming effects using GSAP (Premium cards component)
• Scroll Highlight Text — Scroll-driven character color animation — text lights up with an accent color then transitions to final color as you scroll (Premium text-animations component)
• Fullscreen Menu — Fullscreen overlay menu with GSAP clip-path reveal, SplitText char animations, mouse-following link highlighter, and smooth lerp movement (Premium navigation component)
• Spotlight Gallery — 3D scroll-driven image gallery — images scatter from a central point into space with cover reveal and word-by-word text transitions (Premium scroll-effects component)
• Page Transition — Full-page block reveal transition that intercepts Next.js navigation, animates 20 vertical blocks with an SVG logo draw sequence. (Premium transitions component)
• Telescope Image Scroll — Scroll-pinned telescope zoom effect with stacked mask layers revealing a full banner image, split intro text that slides apart, and word-by-word header reveal. (Premium scroll-effects component)
• Work Carousel — Fullscreen vertical-scroll carousel with dramatic clip-path entry transitions, SplitText word/line reveals, and looping slide navigation via scroll or swipe. (Premium sliders component)
• Infinite Parallax Slider — Infinite horizontal slider with deep parallax on images, supporting wheel scroll, drag, and touch. Slides loop seamlessly with inner image offset. (Premium sliders component)
• Interactive Gradient — WebGL fluid gradient powered by Three.js that distorts and trails behind the mouse cursor. Fully customisable colours, brush size, decay, and distortion. (Premium hero component)
• Dynamic Background — WebGL particle system that renders any logo/image as interactive particles. Mouse proximity pushes particles apart with spring-back physics. (Premium hero component)
• Mouse Trail — Image trail effect that spawns masked image cards following the cursor with staggered clip-path reveal and fade-out animations. (Premium hover-effects component)
• Interactive Team Hover — Team section where hovering a profile image expands it and reveals the member's name via SplitText char animation from the centre. (Premium hover-effects component)
• Button & Text Sequence — An animated button offering individual staggering character reveals and a sliding background on hover using GSAP. (Free buttons component)
• Interactive Base Grid — Background lattice with performance-optimized mathematical distance checks enabling reactive hover clusters. (Premium hover-effects component)
• Valvet Arc Carousel — A smoothly interpolated arc gallery leveraging GSAP on scroll to scale, position, and stack images algorithmically. (Premium sliders component)
• Lenis Expanding Grid — Responsive 10-row grid hooked recursively onto React Lenis scroll metrics, widening dynamically upon upward viewport intersections. (Premium cards component)
• Crisp Loading — GSAP-powered image strip loading animation with SplitText heading reveal transitioning into an interactive thumbnail slideshow. (Premium preloader component)
• Stagger Link Hover — Per-character clip-path rotation hover animation using the Web Animations API with an animated progress bar indicator. (Free hover-effects component)
• Glitch Ripple Text — ASCII glitch ripple hover effect — characters scramble in a wave pattern originating from the mouse position with configurable spread and character pool. (Premium hover-effects component)
• Bubble Navbar — Dark pill-shaped navbar with animated bubble indicators — active item gets a light gradient bubble, hovered items get a subtle dark highlight. (Premium navigation component)
• 3D Image Hover — GSAP multi-layer image hover with shape controls (rect/circle/diamond/hexagon), toggle effects (rotation/blur/color/opacity/parallax/3D), and live slider tuning. (Premium hover-effects component)
• WebGL Slideshow — Three.js + GSAP shader-powered slideshow with 5 transition effects (glass, frost, ripple, plasma, timeshift), auto-play, keyboard nav, and effect switcher. (Premium sliders component)
• Line Wobble — SVG elastic wobble line that follows your mouse with spring-physics snap-back animation. Zero dependencies. (Free hover-effects component)
• Flip Text Hover — Pure CSS per-character flip-up hover effect with staggered spring animation using text-shadow technique. (Free hover-effects component)
• Text Fill Scroll — Text gradually fills with a gradient color as you scroll through it. Powered by GSAP ScrollTrigger. (Premium text-animations component)
• Horizontal Loop Scroll — Infinite horizontal text marquee that reacts to scroll speed — scroll faster to speed up the marquee. Powered by GSAP + Observer. (Premium scroll-effects component)
• Side Navigation — Full-screen side navigation panel with GSAP wipe animation, staggered link entrances, overlay backdrop, and escape key close. (Premium navigation component)
• Dock Navbar — macOS-style dock navigation bar with magnification hover effect. Items scale up on hover with neighbors also growing proportionally. (Free navigation component)
• Word Underline — Random hand-drawn SVG underline that draws on hover. Each hover picks a new unique underline variant. Powered by GSAP DrawSVGPlugin. (Premium hover-effects component)
• Draggable Infinite Slider — Infinite horizontal slider with drag support, prev/next buttons, slide counter, and caption badges. Powered by GSAP Draggable + InertiaPlugin. (Premium sliders component)
• Interactive Gallery — Interactive image gallery with hover-activated thumbnails and click-to-open overlay panels featuring GSAP Flip transitions, title animation, and detail content. (Premium hover-effects component)
• Pixelated Image Reveal — Image card with pixelated grid transition between default and hover states. Dynamic pixel grid with random stagger animation. Supports touch devices. (Premium hover-effects component)
• SVG Stroke Transition — SVG wipe-draw page transition — two curved paths animate their stroke to cover and reveal pages with a dramatic wipe effect. (Premium transitions component)
• Overlay Menu — Fullscreen overlay navigation with layered background panel animations, clip-path reveal, and SplitText line-by-line link animations. (Premium navigation component)
• Orbit Preloader — GSAP-powered preloader with 8 rotating SVG orbit text rings, a 0–100 counter, and a cinematic hero reveal with word-by-word slide-up animation (Premium preloader component)
• Timeline Hero — Cinematic hero section with stacked image intro reveal, radial gradient overlay, and GSAP SplitText word animations (Premium hero component)
• Cinematic Scatter Preloader — Cinematic preloader with progress bar, stacked image reveals, SplitText character scatter, and hero headline entrance (Premium preloader component)
• Greet Preloader — A multilingual greeting overlay animation powered by GSAP with a curved transition effect. (Premium preloader component)

Component Categories

• Buttons: Button components with various styles and animations
• Cards: Card layouts and containers
• Transitions: Page transitions, block reveals, and view transition effects
• Preloader: Preloaders, loading screens, and initialization animations
• Hover Effects: Interactive hover animations, cursor effects, and mouse-driven interactions
• Scroll Effects: Scroll-driven animations, parallax, and scroll-triggered reveals
• Text Animations: Text reveal, fill, and character-level animation effects
• Sliders: Image sliders, carousels, and galleries
• Hero: Hero sections and landing page components
• Navigation: Menus, navbars, and navigation components